Frontend: Fix headings (#3906)

# Description and Motivation
<!--- bulleted, high level items. use keywords (eg "closes #144" or
"fixes #4323") -->

- fixes #3904 
- updates e2e tests as needed
- adds e2e test coverage for all tabs of methodology and policy hubs,
including a11y checks
- fixes needed a11y issues on all pages

## Has this been tested? How?

updates e2e and passing

## Types of changes

(leave all that apply)

- Bug fix
- Refactor / chore

## New frontend preview link is below in the Netlify comment 😎

biome.json

@@ -32,7 +32,8 @@
 			},
 			"a11y": {
 				"useSemanticElements": "off",
-				"noSvgWithoutTitle": "off"
+				"noSvgWithoutTitle": "off",
+				"noInteractiveElementToNoninteractiveRole": "off"
 			},
 			"suspicious": {
 				"noExplicitAny": "off",

frontend/playwright-tests/ami.ci.spec.ts

@@ -29,7 +29,11 @@ test('PHRMA: Medicare AMI', async ({ page }) => {
   await page
     .getByRole('button', { name: 'Population vs. distribution' })
     .click()
-  await page.getByLabel('Comparison bar chart showing').getByRole('img').click()
+  await page
+    .getByLabel('Comparison bar chart showing')
+    .getByRole('img')
+    .nth(1)
+    .click()
   await page.getByRole('heading', { name: 'Summary for acute' }).click()
   await page.getByText('Gender: The Medicare source').click()
   await page.getByText('Sexual Orientation:').click()

frontend/playwright-tests/black_men_gun_homicides.ci.spec.ts

@@ -63,7 +63,11 @@ test('Black Men Homicide Test: Bottom Half of Cards', async ({ page }) => {
     .locator('#population-vs-distribution')
     .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
-  await page.getByLabel('Comparison bar chart showing').getByRole('img').click()
+  await page
+    .getByLabel('Comparison bar chart showing')
+    .getByRole('img')
+    .nth(1)
+    .click()
   await page.getByRole('button', { name: 'Data table' }).click()
   await page.getByRole('heading', { name: 'Summary of Black male gun' }).click()
   await page

frontend/playwright-tests/cawp.ci.spec.ts

@@ -41,7 +41,6 @@ test('CAWP: Congress', async ({ page }) => {
     .getByLabel(
       'Comparison bar chart showing Population vs. distribution of total women in US congress in the United States',
     )
-    .getByRole('img')
     .click()
   await page
     .getByLabel(

frontend/playwright-tests/drinking.nightly.spec.ts

@@ -38,7 +38,6 @@ test('Excessive Drinking Flow', async ({ page }) => {
     .getByLabel(
       'Comparison bar chart showing Population vs. distribution of total adult excessive drinking cases in the United States',
     )
-    .getByRole('img')
     .click()
   await page
     .getByRole('heading', {

frontend/playwright-tests/faqs.ci.spec.ts

@@ -9,7 +9,6 @@ test('FAQ Tab Loads', async ({ page }) => {
 
   const heading = await page.getByRole('heading', {
     name: 'Frequently Asked Questions',
-    level: 1,
   })
   await expect(heading).toBeVisible()
 

frontend/playwright-tests/hiv_black_women.ci.spec.ts

@@ -100,6 +100,7 @@ test('HIV Black Women: Deaths', async ({ page }) => {
     '/exploredata?mls=1.hiv_black_women-3.00&group1=All&dt1=hiv_deaths_black_women',
   )
   await page
+    .locator('#rates-over-time')
     .getByRole('heading', { name: 'Rates of HIV deaths for Black' })
     .click()
   await page

frontend/playwright-tests/internal_methodology_routes.nightly.spec.ts

@@ -0,0 +1,171 @@
+import AxeBuilder from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+test.describe.configure({ mode: 'parallel' })
+
+test('Methodology Introduction Tab Loads', async ({ page }) => {
+  await page.goto('/methodology', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Methodology Introduction' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Methodology Data Sources Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/data-sources', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Data Sources' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Topic Categories Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Topic Categories' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Behavioral Health Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/behavioral-health', {
+    waitUntil: 'commit',
+  })
+  await page
+    .getByRole('heading', { name: 'Behavioral Health', exact: true })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Chronic Diseases Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/chronic-disease', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Chronic Diseases' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Community Safety Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/community-safety', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Community Safety' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('COVID-19 Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/covid', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'COVID-19', exact: true }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('HIV Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/hiv', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'HIV', exact: true }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Political Determinants Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/pdoh', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', {
+      name: 'Political Determinants of Health',
+      exact: true,
+    })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Social Determinants Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/sdoh', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', {
+      name: 'Social Determinants of Health',
+      exact: true,
+    })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Medication Utilization Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/topic-categories/medication-utilization', {
+    waitUntil: 'commit',
+  })
+  await page
+    .getByRole('heading', { name: 'Medication Utilization', exact: true })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Data Methods Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/definitions', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Data Methods' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Limitations Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/limitations', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', { name: 'Limitations and Missing Data' })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Metrics Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/definitions/metrics', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Metrics' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Topic Definitions Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/definitions/topic-definitions', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Topic Definitions' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Races and Ethnicities Definitions Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/definitions/races-and-ethnicities', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Races and Ethnicities' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Age-Adjustment Tab Loads', async ({ page }) => {
+  await page.goto('/ageadjustment', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', { name: 'Age-Adjustment', exact: true })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Recommended Citation Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/recommended-citation', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', { name: 'Recommended Citation', exact: true })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Glossary Tab Loads', async ({ page }) => {
+  await page.goto('/methodology/glossary', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Glossary', exact: true }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})

frontend/playwright-tests/internal_policy_routes.nightly.spec.ts

@@ -0,0 +1,84 @@
+import AxeBuilder from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+test.describe.configure({ mode: 'parallel' })
+
+// use prefers-reduced-motion to prevent a11y constrast failures on unfinished fade-in animations
+test.beforeEach(async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' })
+})
+
+test('Gun Violence Policy Home Link Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', {
+      name: 'Understanding the Crisis of Gun Violence in Atlanta',
+    })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Crisis Overview Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/crisis-overview', {
+    waitUntil: 'commit',
+  })
+
+  await page.getByRole('heading', { name: 'Crisis Overview' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Data Collection Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/data-collection', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Data Collection' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Our Findings Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/our-findings', { waitUntil: 'commit' })
+  await page
+    .getByRole('heading', { name: "Georgia's Youth Fatality Rates" })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Current Efforts Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/current-efforts', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Current Efforts' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Reform Opportunities Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/reform-opportunities', {
+    waitUntil: 'commit',
+  })
+  await page.getByRole('heading', { name: 'Reform Opportunities' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('How to Use the Data Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/how-to-use-the-data', {
+    waitUntil: 'commit',
+  })
+  await page
+    .getByRole('heading', { name: 'HET Data Visualization Maps and Charts' })
+    .click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})
+
+test('Community Safety FAQs Tab Loads', async ({ page }) => {
+  await page.goto('/policy/gun-violence/faqs', { waitUntil: 'commit' })
+  await page.getByRole('heading', { name: 'Community Safety FAQs' }).click()
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
+  expect(accessibilityScanResults.violations).toEqual([])
+})

frontend/playwright-tests/internal_routes.ci.spec.ts

@@ -11,20 +11,6 @@ test('Methodology Hub Loads', async ({ page }) => {
   expect(accessibilityScanResults.violations).toEqual([])
 })
 
-test('Policy Hub Loads', async ({ page }) => {
-  await page.goto('/policy', { waitUntil: 'commit' })
-  await expect(page.getByLabel('Policy Context Introduction')).toContainText(
-    'Understanding the Crisis of Gun Violence in Atlanta',
-  )
-  // mimic reduced motion to prevent animation, which was causing contrast a11y error
-  await page.emulateMedia({ reducedMotion: 'reduce' })
-  const accessibilityScanResults = await new AxeBuilder({ page })
-    .exclude('.text-tinyTag')
-    .exclude('.shadow-raised-tighter')
-    .analyze()
-  expect(accessibilityScanResults.violations).toEqual([])
-})
-
 test('Age-Adjustment Redirects to Age-Adjustment Page of Methodology Hub', async ({
   page,
 }) => {
@@ -48,19 +34,7 @@ test('About Us Page Loads', async ({ page }) => {
 
 test('Terms of Use Page Loads and Renders Correctly', async ({ page }) => {
   await page.goto('/termsofuse', { waitUntil: 'commit' })
-  const mainSection = page.locator('section#main-content')
-  await expect(mainSection).toBeVisible()
-  const mainHeading = mainSection.locator('h1#main')
-  await expect(mainHeading).toHaveText('Terms of Use')
-  const termsList = mainSection.locator('ul')
-  await expect(termsList).toBeVisible()
-  const firstTerm = termsList.locator('li#tou-0')
-  const firstTermHeading = firstTerm.locator('h2')
-  await expect(firstTermHeading).toHaveText('Privacy Policy')
-  const firstTermParagraph = firstTerm.locator('p')
-  await expect(firstTermParagraph).toContainText(
-    'The Health Equity Tracker (HET)',
-  )
+  await page.getByRole('heading', { name: 'Terms of Use' }).click()
   const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
   expect(accessibilityScanResults.violations).toEqual([])
 })

frontend/playwright-tests/maternal_mortality.nightly.spec.ts

@@ -48,7 +48,7 @@ test('Maternal Mortality', async ({ page }) => {
     .locator('#population-vs-distribution')
     .getByRole('heading', { name: 'New Mothers, Ages 10-' })
     .click()
-  await page.getByLabel('Comparison bar chart showing').getByRole('img').click()
+  await page.getByLabel('Comparison bar chart showing').click()
   await page.getByRole('heading', { name: 'Summary for maternal' }).click()
   await page
     .getByRole('figure', { name: 'Summary for maternal' })

frontend/src/cards/CardWrapper.tsx

@@ -58,7 +58,6 @@ function CardWrapper(props: {
         return (
           <article
             className={`relative m-2 rounded-sm bg-white p-3 shadow-raised ${props.className}`}
-            tabIndex={-1}
           >
             {shouldShowInsightDisplay && (
               <InsightDisplay

frontend/src/cards/ui/InsightDisplay.tsx

@@ -58,6 +58,7 @@ const InsightDisplay: React.FC<InsightDisplayProps> = ({
   return (
     <>
       <IconButton
+        aria-label={insight ? 'Clear insight' : 'Generate insight'}
         onClick={insight ? handleClearInsight : handleGenerateInsight}
         className='absolute top-2 right-2 z-10'
         disabled={isGeneratingInsight}