Keep heading levels in order (fix #181)

src/components/views/Contact.jsx

@@ -16,6 +16,7 @@ export default () => {
                 <meta property="og:description" content={pageDescription} />
                 <meta name="description" content={pageDescription} />
             </Helmet>
+            <h2>Contact</h2>
             <p id="contact">
                 Please email us at
                 {' '}<a href="mailto:fx-public-data@mozilla.com">fx-public-data@mozilla.com</a>

src/components/views/styl/Dashboard.styl

@@ -7,8 +7,17 @@
         margin-bottom: 0;
         text-align: center;
     }
+    // Hidden from view but kept for screen readers, so the metric headings
+    // below it don't skip a level.
     #metrics-heading {
-        display: none;
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
     }
 }
 

tests/playwright/specs/contact.spec.js

@@ -9,6 +9,10 @@ test('Page loads', async ({ page }) => {
     await expect(page.locator('#contact')).toBeVisible();
 });
 
+test('Page has a Contact heading', async ({ page }) => {
+    await expect(page.getByRole('heading', { level: 2, name: 'Contact' })).toBeVisible();
+});
+
 test('Page <title> is correct', async ({ page }) => {
     await expect(page.locator('#contact')).toBeVisible();
     await expect(page).toHaveTitle('Contact | Firefox Public Data Report');