[HOMEPAGE] fix: landmarks and title hierarchy for A11y

homepage/src/components/LanguageSwitcher.astro

@@ -6,9 +6,9 @@ const { pathname } = canonicalUrl
 ---
 
 <div class="language-switcher">
-    <h3 class="language-switcher-heading">
+    <p class="language-switcher-heading">
         <T locale={locale} k="languages.available_languages" />
-    </h3>
+    </p>
     <ul>
         {
             locales.map(({ id, label }) => (
@@ -18,11 +18,11 @@ const { pathname } = canonicalUrl
             ))
         }
     </ul>
-    <h4>
+    <p>
         <a href="https://github.com/StateOfJS/locale-en-US">
             <T locale={locale} k="languages.help_us_translate" />
         </a>
-    </h4>
+    </p>
 </div>
 
 <style lang="scss">

homepage/src/components/Newsletter.tsx

@@ -3,11 +3,7 @@ import { useI18n } from '../helpers/i18nContext'
 import '../stylesheets/_newsletter.scss'
 import T from './T'
 
-import {
-    getStringTranslator,
-    Locale,
-} from '../helpers/translator'
-
+import { getStringTranslator, Locale } from '../helpers/translator'
 
 const getEOConfig = listId => ({
     emailOctopusUrl: `https://emailoctopus.com/lists/${listId}/members/embedded/1.3/add`,
@@ -59,9 +55,9 @@ export default function Newsletter({ listId, locale }) {
 
     return (
         <div className="newsletter">
-            <h3 className="newsletter-heading">
+            <h2 className="newsletter-heading">
                 <T locale={locale} k="newsletter.stay_tuned" />
-            </h3>
+            </h2>
             <p className="newsletter-details">
                 <T locale={locale} k="newsletter.leave_your_email" />
             </p>{' '}

homepage/src/components/OtherSurveys.astro

@@ -4,14 +4,16 @@ const { survey, surveys, locale } = Astro.props
 const otherSurveys = surveys.filter(s => s.id !== survey.id)
 ---
 
-<div class="other-surveys">
-  <div class="other-surveys-inner">
+<header class="other-surveys">
+  <nav class="other-surveys-inner">
     <T locale={locale} k="homepage.other_surveys" />
+    <ul class="other-surveys-list">
     {otherSurveys.map(
-    ({name, domain})=> (<a class="other-survey-link" href={`https://${domain}`}>{name}</a>)
+    ({name, domain})=> (<li class="other-survey-item"><a class="other-survey-link" href={`https://${domain}`}>{name}</a></li>)
     )}
-  </div>
-</div>
+    </ul>
+  </nav>
+</header>
 
 <style lang="scss">
   .other-surveys {
@@ -24,18 +26,29 @@ const otherSurveys = surveys.filter(s => s.id !== survey.id)
   .other-surveys-inner {
     width: 100%;
     margin: 0 auto;
+    display: flex;
+    justify-content: center;
 
     @media screen and (max-width: 666px) {
       font-size: var(--small-font);
+      flex-wrap: wrap;
     }
   }
 
-  .other-survey-link {
+  .other-surveys-list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 0;
+  }
+
+  .other-survey-item {
     display: inline-block;
     margin-left: var(--doublespacing);
 
     @media screen and (max-width: 666px) {
       margin-left: var(--halfspacing);
     }
   }
+
 </style>

homepage/src/components/SurveyEdition.astro

@@ -24,16 +24,15 @@ if (isOpen) {
 
 <div class:list={['survey-edition', { 'survey-edition-last': isLast }]}>
     <div class="survey-edition-card" style={`background: ${background};`}>
+
         {
-            marker && (
-                <h4 class="survey-edition-status">
+            marker ? (
+                    <h2 class="survey-edition-title"><span class="survey-edition-status">
                     <T locale={locale} k={marker} />
-                </h4>
-            )
+                </span><span class="survey-edition-year">{year}</span></h2>
+            ) : <h3 class="survey-edition-year">{year}</h3>
         }
 
-        <h4 class="survey-edition-year">{year}</h4>
-
         <a class="image-wrapper" href={mainLink}
             ><span class="image-inner" style={`background-image: url(${imageUrl})`}></span>
         </a>
@@ -81,7 +80,9 @@ if (isOpen) {
         overflow: hidden;
         margin-bottom: var(--quarterspacing);
     }
-
+    .survey-edition-title {
+        font-size: var(--medium-font);
+    }
     .survey-edition-status,
     .survey-edition-year {
         position: absolute;
@@ -100,6 +101,7 @@ if (isOpen) {
 
     .survey-edition-year {
         right: 0;
+        font-size: var(--medium-font);
     }
 
     .image-wrapper {

homepage/src/components/T.tsx

@@ -68,7 +68,7 @@ export default function T({
     props.className = classNames.join(' ')
 
     return md ? (
-        <div {...props} dangerouslySetInnerHTML={{ __html: translation }} />
+        <p {...props} dangerouslySetInnerHTML={{ __html: translation }} />
     ) : html ? (
         <span {...props} dangerouslySetInnerHTML={{ __html: translation }} />
     ) : (

homepage/src/layouts/DefaultLayout.astro

@@ -48,9 +48,9 @@ const variables = `
   <body>
       <OtherSurveys locale={locale} surveys={surveys} survey={survey} />
       <div class="layout">
-        <div>
+        <main>
         <slot />
-        </div>
+        </main>
         {survey.partners && <Partners {...Astro.props} />}
         <Footer {...Astro.props} />
       </div>

homepage/src/stylesheets/_newsletter.scss

@@ -10,6 +10,7 @@
 
 .newsletter-heading {
   margin-bottom: var(--halfspacing);
+  font-size: 1.17em;
 }
 
 .newsletter-details {