Update 04-components E2E tests to pass on chromium

Author: webstackdev

.github/instructions/general.instructions.md

@@ -35,6 +35,10 @@ applyTo: "**"
 - **API utility files** go specifically in the `_utils/` folder
 - **API contract/type files** go in `_contracts/` folder for centralized type definitions
 
+## API Endpoints (Permission Required)
+- **Do not create, recreate, or restore `src/pages/api/*` endpoints without explicit user permission.**
+- Prefer Astro Actions (`/_actions/...`) for new backend behavior unless instructed otherwise.
+
 ## Mixed Concern Files
 - Files that straddle server-side API and client-side concerns (like API client wrappers) require clarification
 - **Ask before placing such files** - they may need special handling or alternative organization

src/actions/gdpr/@types/index.d.ts

@@ -27,7 +27,7 @@ export interface ConsentRecord {
   id: string
   DataSubjectId: string
   email?: string
-  purposes: Array<'contact' | 'marketing' | 'analytics' | 'downloads'>
+  purposes: Array<'contact' | 'marketing' | 'analytics' | 'functional' | 'downloads'>
   timestamp: string
   source:
     | 'contact_form'
@@ -45,7 +45,7 @@ export interface ConsentRecord {
 export interface ConsentRequest {
   DataSubjectId: string
   email?: string
-  purposes: Array<'contact' | 'marketing' | 'analytics' | 'downloads'>
+  purposes: Array<'contact' | 'marketing' | 'analytics' | 'functional' | 'downloads'>
   source: string
   userAgent: string
   ipAddress?: string

src/actions/gdpr/constants.ts

@@ -1,4 +1,4 @@
-export const CONSENT_PURPOSES = ['contact', 'marketing', 'analytics', 'downloads'] as const
+export const CONSENT_PURPOSES = ['contact', 'marketing', 'analytics', 'functional', 'downloads'] as const
 
 export type ConsentPurpose = (typeof CONSENT_PURPOSES)[number]
 

src/components/Consent/Banner/client/index.ts

@@ -168,13 +168,6 @@ export class ConsentBannerElement extends HTMLElement {
       this.wrapper.style.display = 'block'
       this.setupFocusTrap()
       this.wrapper.focus()
-      setTimeout(() => {
-        if (this.wrapper.style.display === 'none') {
-          return
-        }
-
-        this.allowBtn.focus()
-      }, 0)
       showConsentBanner()
       ConsentBannerElement.isModalCurrentlyVisible = true
     } catch (error) {
@@ -330,6 +323,17 @@ export class ConsentBannerElement extends HTMLElement {
           return
         }
 
+        if (document.activeElement === this.wrapper) {
+          keyEvent.preventDefault()
+          if (keyEvent.shiftKey) {
+            lastFocusable.focus()
+            return
+          }
+
+          firstFocusable.focus()
+          return
+        }
+
         if (keyEvent.shiftKey) {
           if (document.activeElement === firstFocusable) {
             keyEvent.preventDefault()

src/components/Consent/Preferences/index.astro

@@ -75,7 +75,10 @@ import logoSvg from '@assets/images/site/logo.svg'
                 Helps us understand how visitors use our website
               </p>
             </div>
-            <label class="relative inline-flex items-center cursor-pointer">
+            <label
+              class="relative inline-flex items-center cursor-pointer"
+              data-consent-toggle="analytics-cookies"
+            >
               <input
                 type="checkbox"
                 id="analytics-cookies"
@@ -117,7 +120,10 @@ import logoSvg from '@assets/images/site/logo.svg'
                 Remembers your social media preferences
               </p>
             </div>
-            <label class="relative inline-flex items-center cursor-pointer">
+            <label
+              class="relative inline-flex items-center cursor-pointer"
+              data-consent-toggle="functional-cookies"
+            >
               <input
                 type="checkbox"
                 id="functional-cookies"
@@ -165,7 +171,10 @@ import logoSvg from '@assets/images/site/logo.svg'
                 Used to deliver relevant advertisements
               </p>
             </div>
-            <label class="relative inline-flex items-center cursor-pointer">
+            <label
+              class="relative inline-flex items-center cursor-pointer"
+              data-consent-toggle="marketing-cookies"
+            >
               <input
                 type="checkbox"
                 id="marketing-cookies"

src/components/Icon/index.astro

@@ -14,15 +14,21 @@ export interface Props {
   size?: number | string
   /** Color variant for the icon */
   variant?: IconVariant
+  /** Optional accessible title for the rendered SVG */
+  title?: string
 }
 
-const { class: className, name, size = 24, variant = 'default' as IconVariant } = Astro.props
+const { class: className, name, size = 24, variant = 'default' as IconVariant, title } = Astro.props
+
+const a11yProps = title
+  ? { title, 'aria-label': title }
+  : { 'aria-hidden': 'true' as const }
 ---
 
 <Icon
   name={name}
   class:list={['inline-block align-middle', colorClasses[variant], `icon--${name}`, className]}
   size={size}
-  aria-hidden="true"
+  {...a11yProps}
   focusable="false"
 />

src/components/Navigation/Menu.astro

@@ -24,6 +24,7 @@ const activeMenuItem = (url: string) => {
       'w-full font-heading text-[0.85rem] uppercase tracking-[0.22em] text-primary',
       'lg:relative lg:text-[0.8rem] lg:tracking-[0.12em]',
     ]}
+    aria-label="main navigation"
     tabindex="-1"
   >
     {

src/components/Navigation/NavToggle.astro

@@ -6,6 +6,8 @@ import styles from './navToggle.module.css'
 ---
 
 <button
+  id="nav-toggle"
+  data-testid="nav-toggle"
   class:list={[
     'nav-toggle-btn',
     'lg:hidden inline-flex items-center justify-center rounded-full border-0 bg-primary-offset text-bg transition-colors duration-150 ease-linear hover:bg-primary focus:bg-primary focus:outline-none',

src/components/Navigation/index.astro

@@ -17,7 +17,7 @@ const { path } = Astro.props
       <Menu path={path} />
     </span>
     {/* Mobile navigation toggle button to show menu on full-page splash screen */}
-    <span id="header__nav-icon" class="block shrink-0 z-(--z-content-overlay) lg:hidden">
+    <span id="header__nav-icon" class="block shrink-0 relative z-(--z-mobile-close-btn) lg:hidden">
       <NavToggle />
     </span>
   </div>

src/components/scripts/store/__tests__/consent.spec.ts

@@ -358,7 +358,7 @@ describe('Consent side effects', () => {
       throw new TestError('Expected consent logging fetch to be called once')
     }
     const [url, options] = firstFetchCall
-    expect(url).toBe('/api/gdpr/consent')
+    expect(url).toBe('/_actions/gdpr.consentCreate')
     expect(options?.method).toBe('POST')
     const payload = JSON.parse(options?.body as string)
     expect(payload).toMatchObject({