[Glitch] Fix heading level gaps

Port 6a4d14b178 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/about/index.jsx

@@ -18,6 +18,7 @@ import { LinkFooter} from 'flavours/glitch/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/flavours/glitch/features/collections/components/collection_lockup.tsx

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

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx

@@ -105,12 +105,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/flavours/glitch/features/status/components/detailed_status.tsx

@@ -304,7 +304,12 @@ export const DetailedStatus: React.FC<{
       );
 
     if (taggedCollection) {
-      media = <CollectionPreviewCard collection={taggedCollection.toJS()} />;
+      media = (
+        <CollectionPreviewCard
+          collection={taggedCollection.toJS()}
+          headingLevel='h2'
+        />
+      );
     } else {
       media = (
         <Card
@@ -320,7 +325,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'
+        />
       );
     }
   }