fixed accessibility issues

hlxsites · Dec 2, 2024 · dd667e9 · dd667e9
1 parent 05575f5
commit dd667e9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
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">My Account</button>
+    <button type="button" class="nav-dropdown-button"></button>
     <div class="nav-auth-menu-panel nav-tools-panel">
       <div id="auth-dropin-container"></div>
       <ul class="authenticated-user-menu">
@@ -92,6 +92,7 @@ export function renderAuthDropdown(navTools) {
           width="25"
           height="25"
           viewBox="0 0 24 24"
+          aria-label="My Account"
           >
           <g fill="none" stroke="#000000" stroke-width="1.5">
           <circle cx="12" cy="6" r="4"></circle>

diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -137,13 +137,13 @@ export default async function decorate(block) {
 
     // Configuration – Button - Add to Cart
     UI.render(Button, {
-      children: labels.PDP.Product.AddToCart.label,
+      children: labels.PDP?.Product?.AddToCart?.label,
       icon: Icon({ source: 'Cart' }),
       onClick: async () => {
         try {
           addToCart.setProps((prev) => ({
             ...prev,
-            children: labels.Custom.AddingToCart.label,
+            children: labels.Custom?.AddingToCart?.label,
             disabled: true,
           }));
 
@@ -180,7 +180,7 @@ export default async function decorate(block) {
         } finally {
           addToCart.setProps((prev) => ({
             ...prev,
-            children: labels.PDP.Product.AddToCart.label,
+            children: labels.PDP?.Product?.AddToCart?.label,
             disabled: false,
           }));
         }
@@ -191,9 +191,14 @@ export default async function decorate(block) {
     UI.render(Button, {
       icon: Icon({ source: 'Heart' }),
       variant: 'secondary',
+      'aria-label': labels.Custom?.AddToWishlist?.label,
       onClick: async () => {
         try {
-          addToWishlist.setProps((prev) => ({ ...prev, disabled: true }));
+          addToWishlist.setProps((prev) => ({
+            ...prev,
+            disabled: true,
+            'aria-label': labels.Custom?.AddingToWishlist?.label,
+          }));
 
           const values = pdpApi.getProductConfigurationValues();
 
@@ -204,7 +209,11 @@ export default async function decorate(block) {
         } catch (error) {
           console.error(error);
         } finally {
-          addToWishlist.setProps((prev) => ({ ...prev, disabled: false }));
+          addToWishlist.setProps((prev) => ({
+            ...prev,
+            disabled: false,
+            'aria-label': labels.Custom?.AddToWishlist?.label,
+          }));
         }
       },
     })($addToWishlist),