Auth VoiceOver (#231)

* Auth dropdown WCAG adjustments --------- Co-authored-by: Abrasimov Yaroslav <[email protected]>
hlxsites · Dec 5, 2024 · 32af5fc · 32af5fc
1 parent 09c3741
commit 32af5fc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/blocks/commerce-order-returns/commerce-order-returns.js b/blocks/commerce-order-returns/commerce-order-returns.js
@@ -34,6 +34,6 @@ export default async function decorate(block) {
 
       return `${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`;
     },
-    routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+    routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
   })(block);
 }
diff --git a/blocks/commerce-orders-list/commerce-orders-list.js b/blocks/commerce-orders-list/commerce-orders-list.js
@@ -32,7 +32,7 @@ export default async function decorate(block) {
       routeOrdersList: () => CUSTOMER_ORDERS_PATH,
       routeOrderDetails: (orderNumber) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
       routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
-      routeOrderProduct: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeOrderProduct: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
     })(block);
   }
 }
diff --git a/blocks/commerce-returns-list/commerce-returns-list.js b/blocks/commerce-returns-list/commerce-returns-list.js
@@ -34,7 +34,7 @@ export default async function decorate(block) {
       routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
       routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
       routeReturnsList: () => CUSTOMER_RETURNS_PATH,
-      routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
     })(block);
   }
 }
diff --git a/blocks/header/renderAuthDropdown.js b/blocks/header/renderAuthDropdown.js
@@ -27,7 +27,7 @@ function renderSignIn(element) {
 export function renderAuthDropdown(navTools) {
   const dropdownElement = document.createRange().createContextualFragment(`
  <div class="dropdown-wrapper nav-tools-wrapper">
-    <button type="button" class="nav-dropdown-button"></button>
+    <button type="button" class="nav-dropdown-button" aria-haspopup="dialog" aria-expanded="false" aria-controls="login-modal"></button>
     <div class="nav-auth-menu-panel nav-tools-panel">
       <div id="auth-dropin-container"></div>
       <ul class="authenticated-user-menu">
@@ -43,17 +43,26 @@ export function renderAuthDropdown(navTools) {
   navTools.append(dropdownElement);
 
   const authDropDownPanel = navTools.querySelector('.nav-auth-menu-panel');
-  const authDropDownMenuList = navTools.querySelector('.authenticated-user-menu');
+  const authDropDownMenuList = navTools.querySelector(
+    '.authenticated-user-menu',
+  );
   const authDropinContainer = navTools.querySelector('#auth-dropin-container');
   const loginButton = navTools.querySelector('.nav-dropdown-button');
-  const logoutButtonElement = navTools.querySelector('.authenticated-user-menu > li > button');
+  const logoutButtonElement = navTools.querySelector(
+    '.authenticated-user-menu > li > button',
+  );
 
   authDropDownPanel.addEventListener('click', (e) => e.stopPropagation());
 
   async function toggleDropDownAuthMenu(state) {
     const show = state ?? !authDropDownPanel.classList.contains('nav-tools-panel--show');
 
     authDropDownPanel.classList.toggle('nav-tools-panel--show', show);
+    authDropDownPanel.setAttribute('role', 'dialog');
+    authDropDownPanel.setAttribute('aria-hidden', 'false');
+    authDropDownPanel.setAttribute('aria-labelledby', 'modal-title');
+    authDropDownPanel.setAttribute('aria-describedby', 'modal-description');
+    authDropDownPanel.focus();
   }
 
   loginButton.addEventListener('click', () => toggleDropDownAuthMenu());