[Accessibility] Fix heading level gaps (#39149)

app/javascript/mastodon/components/status.jsx

@@ -556,7 +556,7 @@ class Status extends ImmutablePureComponent {
       ).find((item) => compareUrls(item.get('url'), cardUrl));
   
       if (taggedCollection) {
-        media = <CollectionPreviewCard collection={taggedCollection.toJS()} />;
+        media = <CollectionPreviewCard collection={taggedCollection.toJS()} headingLevel='h2' />;
       } else {
         media = (
           <Card
@@ -570,7 +570,7 @@ class Status extends ImmutablePureComponent {
       const firstLinkedCollection = status.get('tagged_collections').first();
       if (firstLinkedCollection) {
         media = (
-          <CollectionPreviewCard collection={firstLinkedCollection.toJS()} />
+          <CollectionPreviewCard collection={firstLinkedCollection.toJS()} headingLevel='h2' />
         );
       }
     }

app/javascript/mastodon/features/about/index.jsx

@@ -18,6 +18,7 @@ import { LinkFooter} from 'mastodon/features/ui/components/link_footer';
 
 import { Section } from './components/section';
 import { RulesSection } from './components/rules';
+import { getColumnSkipLinkId } from '../ui/components/skip_links';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -80,7 +81,7 @@ class About extends PureComponent {
 
     return (
       <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
-        <div className='scrollable about'>
+        <div className='scrollable about' id={getColumnSkipLinkId(1)}>
           <div className='about__header'>
             <ServerHeroImage
               withAltBadge

app/javascript/mastodon/features/collections/components/collection_lockup.tsx

@@ -47,6 +47,7 @@ export interface CollectionLockupProps {
   withTimestamp?: boolean;
   sideContent?: React.ReactNode;
   className?: string;
+  headingLevel?: 'h2' | 'h3' | 'h4';
 }
 
 export const CollectionLockup: React.FC<CollectionLockupProps> = ({
@@ -54,6 +55,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
   withAuthorHandle = true,
   withTimestamp,
   sideContent,
+  headingLevel = 'h3',
   className,
 }) => {
   const { id, name } = collection;
@@ -70,7 +72,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
       sideContent={sideContent}
     >
       <ListItemLink
-        as='h3'
+        as={headingLevel}
         to={getCollectionPath(id)}
         subtitle={
           <CollectionInfo

app/javascript/mastodon/features/collections/components/share_modal.tsx

@@ -92,7 +92,7 @@ export const CollectionShareModal: React.FC<{
         />
 
         <div className={classes.preview}>
-          <CollectionPreviewCard collection={collection} />
+          <CollectionPreviewCard collection={collection} headingLevel='h2' />
         </div>
 
         <CopyLinkField

app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx

@@ -212,12 +212,12 @@ export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
       tabIndex={-1}
     >
       <div className='inline-follow-suggestions__header'>
-        <h3 id={uniqueId}>
+        <h2 id={uniqueId} className='inline-follow-suggestions__title'>
           <FormattedMessage
             id='follow_suggestions.who_to_follow'
             defaultMessage='Who to follow'
           />
-        </h3>
+        </h2>
 
         <div className='inline-follow-suggestions__header__actions'>
           <button className='link-button' onClick={handleDismiss} type='button'>

app/javascript/mastodon/features/navigation_panel/components/trends.tsx

@@ -37,21 +37,21 @@ export const Trends: React.FC = () => {
   }
 
   return (
-    <div className='navigation-panel__portal'>
+    <aside className='navigation-panel__portal'>
       <div className='getting-started__trends'>
-        <h4>
+        <h2 className='getting-started__trends-heading'>
           <Link to={'/explore/tags'}>
             <FormattedMessage
               id='trends.trending_now'
               defaultMessage='Trending now'
             />
           </Link>
-        </h4>
+        </h2>
 
         {trends.take(4).map((hashtag) => (
           <Hashtag key={hashtag.get('name') as string} hashtag={hashtag} />
         ))}
       </div>
-    </div>
+    </aside>
   );
 };

app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx

@@ -106,10 +106,10 @@ export const NotificationAdminReport: React.FC<{
 
       <div className='notification-group__main'>
         <div className='notification-group__main__header'>
-          <div className='notification-group__main__header__label'>
+          <h2 className='notification-group__main__header__label'>
             {message}
             <RelativeTimestamp timestamp={report.created_at} />
-          </div>
+          </h2>
         </div>
 
         {report.comment.length > 0 && (

app/javascript/mastodon/features/notifications_v2/components/notification_collection.tsx

@@ -46,7 +46,7 @@ export const NotificationCollection: React.FC<{
 
       <div className='notification-group__main'>
         <div className='notification-group__main__header'>
-          <div className='notification-group__main__header__label'>
+          <h2 className='notification-group__main__header__label'>
             {type === 'added_to_collection' && (
               <FormattedMessage
                 id='notification.added_to_collection'
@@ -79,7 +79,7 @@ export const NotificationCollection: React.FC<{
                 }}
               />
             )}
-          </div>
+          </h2>
         </div>
 
         <CollectionPreviewCard collection={collection} />

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -125,7 +125,7 @@ export const NotificationGroupWithStatus: React.FC<{
               )}
             </div>
 
-            <div className='notification-group__main__header__label'>
+            <h2 className='notification-group__main__header__label'>
               <span>{label}</span>
               {timestamp && (
                 <>
@@ -135,7 +135,7 @@ export const NotificationGroupWithStatus: React.FC<{
                   <RelativeTimestamp timestamp={timestamp} />
                 </>
               )}
-            </div>
+            </h2>
           </div>
 
           {statusId && (

app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx

@@ -101,12 +101,12 @@ export const NotificationWithStatus: React.FC<{
         )}
         tabIndex={0}
       >
-        <div className='notification-ungrouped__header'>
+        <h2 className='notification-ungrouped__header'>
           <div className='notification-ungrouped__header__icon'>
             <Icon icon={icon} id={iconId} />
           </div>
           <span>{label}</span>
-        </div>
+        </h2>
 
         <StatusQuoteManager
           id={statusId}

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -272,7 +272,12 @@ export const DetailedStatus: React.FC<{
       );
 
     if (taggedCollection) {
-      media = <CollectionPreviewCard collection={taggedCollection.toJS()} />;
+      media = (
+        <CollectionPreviewCard
+          collection={taggedCollection.toJS()}
+          headingLevel='h2'
+        />
+      );
     } else {
       media = (
         <Card
@@ -286,7 +291,10 @@ export const DetailedStatus: React.FC<{
     const firstLinkedCollection = status.get('tagged_collections').first();
     if (firstLinkedCollection) {
       media = (
-        <CollectionPreviewCard collection={firstLinkedCollection.toJS()} />
+        <CollectionPreviewCard
+          collection={firstLinkedCollection.toJS()}
+          headingLevel='h2'
+        />
       );
     }
   }

app/javascript/styles/mastodon/components.scss

@@ -3764,16 +3764,6 @@ a.account__display-name {
     margin-bottom: 12px;
   }
 
-  .getting-started__trends h4 {
-    padding: 10px 12px;
-    padding-inline-start: 16px;
-  }
-
-  .getting-started__trends .trends__item {
-    padding: 10px 12px;
-    padding-inline-start: 16px;
-  }
-
   @media screen and (height <= 930px) {
     &__portal .trends__item:nth-child(n + 5) {
       display: none;
@@ -4140,25 +4130,30 @@ a.account__display-name {
   border: 1px solid var(--color-border-primary);
   border-top: 0;
 
+  &__trends-heading {
+    border-bottom: 1px solid var(--color-border-primary);
+    padding: 10px;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 500;
+
+    .navigation-panel & {
+      padding: 10px 12px;
+      padding-inline-start: 16px;
+    }
+
+    a {
+      color: var(--color-text-secondary);
+      text-decoration: none;
+    }
+  }
+
   &__trends {
     flex: 0 1 auto;
     opacity: 1;
     animation: fade 150ms linear;
     margin-top: 10px;
 
-    h4 {
-      border-bottom: 1px solid var(--color-border-primary);
-      padding: 10px;
-      font-size: 12px;
-      text-transform: uppercase;
-      font-weight: 500;
-
-      a {
-        color: var(--color-text-secondary);
-        text-decoration: none;
-      }
-    }
-
     .trends__item {
       border-bottom: 0;
       padding: 10px;
@@ -4166,6 +4161,11 @@ a.account__display-name {
       &__current {
         color: var(--color-text-secondary);
       }
+
+      .navigation-panel & {
+        padding: 10px 12px;
+        padding-inline-start: 16px;
+      }
     }
   }
 }
@@ -10077,18 +10077,18 @@ noscript {
     background: var(--color-bg-brand-softest);
   }
 
+  &__title {
+    font-size: 15px;
+    line-height: 22px;
+    font-weight: 500;
+  }
+
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
 
-    h3 {
-      font-size: 15px;
-      line-height: 22px;
-      font-weight: 500;
-    }
-
     &__actions {
       display: flex;
       align-items: center;