Various ARIA fixes

Author: webstackdev

axe-results-incomplete.json

@@ -1 +0,0 @@
-[]

axe-results-violations.json

@@ -40,6 +40,7 @@ const buttonText = 'Subscribe'
               id="newsletter-email"
               name="email"
               placeholder={placeholder}
+              aria-label="Email address"
               class="flex-1 px-3 py-2 bg-page-base/10 border border-page-base/20 rounded text-page-base text-sm placeholder:text-page-base/40 focus:outline-none focus-visible:outline-none"
               required
               aria-describedby="newsletter-message"

src/components/CallToAction/Newsletter/layouts/article.astro

@@ -113,6 +113,7 @@ const buttonText = 'Subscribe'
                 id="newsletter-email"
                 name="email"
                 placeholder={placeholder}
+                aria-label="Work Email"
                 class="w-full px-4 py-3 border border-trim rounded-lg bg-page-offset text-sm focus:outline-none focus-visible:outline-none transition-colors"
                 required
                 aria-describedby="newsletter-message"

src/components/CallToAction/Newsletter/layouts/home.astro

@@ -49,6 +49,7 @@ const buttonText = 'Subscribe'
             id="newsletter-email"
             name="email"
             placeholder={placeholder}
+            aria-label="Work Email"
             class="w-full px-4 py-3 border border-trim rounded-lg bg-page-offset text-sm focus:outline-none focus-visible:outline-none transition-colors"
             required
             aria-describedby="newsletter-message"

src/components/CallToAction/Newsletter/layouts/page.astro

@@ -192,9 +192,9 @@ const { token } = Astro.props
               size={10}
             />
           </div>
-          <h2 class="text-2xl sm:text-3xl font-bold text-danger" id="error-title" tabindex="-1">
+          <h1 class="text-2xl sm:text-3xl font-bold text-danger" id="error-title" tabindex="-1">
             Confirmation Error
-          </h2>
+          </h1>
         </div>
         <div class="px-6 py-8">
           <p class="text-lg text-content-active text-center mb-6" id="error-message">

src/components/Pages/Newsletter/Confirm/index.astro

@@ -5,4 +5,4 @@
  */
 ---
 
-And a [link](/about) to included text.
+And a [link to the About page](/about) in included text.

src/components/Test/Demo.mdx

@@ -2512,6 +2512,10 @@ Download PDF files
       text: "Download-ready reference material",
     },
   ]}
+  secondaryLink={{
+    href: "/services/consulting",
+    text: "View consulting services",
+  }}
 />
 ```
 
@@ -2533,6 +2537,10 @@ Download PDF files
       text: "Download-ready reference material",
     },
   ]}
+  secondaryLink={{
+    href: "/services/consulting",
+    text: "View consulting services",
+  }}
 />
 
 ### Newsletter Signup Component

src/content/articles/demo/index.mdx

@@ -0,0 +1,115 @@
+import { BasePage, test } from '@test/e2e/helpers'
+
+const pages = [
+  '/',
+  '/about',
+  '/articles',
+  '/articles/demo',
+  '/case-studies',
+  '/consent',
+  '/contact',
+  '/my-data',
+  '/newsletter',
+  '/newsletter/confirm/error-token',
+  '/newsletter/confirm/expired-token',
+  '/newsletter/confirm/success',
+  '/offline',
+  '/privacy',
+  '/search',
+  '/services',
+  '/terms',
+  '/404',
+]
+
+const pagesWithForms = [
+  '/',
+  '/articles/demo',
+  '/consent',
+  '/contact',
+  '/privacy/my-data',
+  '/newsletter',
+  '/search',
+]
+
+interface PageLoopDiagnostics {
+  currentUrl: string
+  pathname: string
+  readyState: string
+  title: string
+}
+
+const getPageLoopDiagnostics = async (page: BasePage): Promise<PageLoopDiagnostics> => {
+  if (page.page.isClosed()) {
+    return {
+      currentUrl: 'page-closed',
+      pathname: 'unavailable',
+      readyState: 'unavailable',
+      title: 'unavailable',
+    }
+  }
+
+  const currentUrl = page.page.url()
+
+  const metadata = await page.evaluate(() => {
+    return {
+      pathname: window.location.pathname,
+      readyState: document.readyState,
+      title: document.title || '',
+    }
+  }).catch(() => {
+    return {
+      pathname: 'unavailable',
+      readyState: 'unavailable',
+      title: 'unavailable',
+    }
+  })
+
+  return {
+    currentUrl,
+    pathname: metadata.pathname,
+    readyState: metadata.readyState,
+    title: metadata.title,
+  }
+}
+
+const wrapPageLoopError = async (
+  page: BasePage,
+  url: string,
+  error: unknown,
+  formPagesOnly = false
+) => {
+  const diagnostics = await getPageLoopDiagnostics(page)
+  const message = error instanceof Error ? error.message : String(error)
+
+  throw new Error(
+    [
+      `Looped accessibility check failed on ${url}.`,
+      `pageSet=${formPagesOnly ? 'pagesWithForms' : 'pages'}`,
+      `currentUrl=${diagnostics.currentUrl}`,
+      `pathname=${diagnostics.pathname}`,
+      `title="${diagnostics.title}"`,
+      `readyState=${diagnostics.readyState}`,
+      `originalError=${message}`,
+    ].join(' '),
+    { cause: error instanceof Error ? error : undefined }
+  )
+}
+
+export const runAcrossPages = async (
+  page: BasePage,
+  label: string,
+  callback: (_url: string) => Promise<void>,
+  formPagesOnly = false
+) => {
+  const loopPages = formPagesOnly ? pagesWithForms : pages
+
+  for (const url of loopPages) {
+    await test.step(`${label} on ${url}`, async () => {
+      try {
+        await callback(url)
+      } catch (error) {
+        await wrapPageLoopError(page, url, error, formPagesOnly)
+      }
+    })
+  }
+}