Merge pull request #936 from yannicka/feature/a11y

Accessibility: add some `aria-hidden`, `label`s...

Author: tblivet

modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl

@@ -17,7 +17,8 @@
           </div>
         {/if}
         <div class="d-flex gap-2 align-items-center mb-2">
-          <input class="form-control flex-grow-1" type="email" name="email" value="{$value}" placeholder="{l s='Your email address' d='Modules.Emailsubscription.Shop'}" aria-label="{l s='Your email address' d='Modules.Emailsubscription.Shop'}" autocomplete="email" required />
+          <label for="emailsubscription_input" class="visually-hidden">{l s='Your email address' d='Modules.Emailsubscription.Shop'}</label>
+          <input class="form-control flex-grow-1" type="email" name="email" value="{$value}" placeholder="{l s='Your email address' d='Modules.Emailsubscription.Shop'}" id="emailsubscription_input" autocomplete="email" required />
           <input class="btn btn-primary" type="submit" name="submitNewsletter" value="{l s='Subscribe' d='Shop.Theme.Actions'}" aria-label="{l s='Subscribe to our newsletter' d='Modules.Emailsubscription.Shop'}" />
         </div>
         {capture name="display_gdpr_consent"}{hook h='displayGDPRConsent' id_module=$id_module}{/capture}

modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -6,7 +6,6 @@
   {foreach $linkBlocks as $linkBlock}
     <nav
       class="ps-linklist footer-block col-md-6 col-lg-3"
-      role="navigation"
       aria-labelledby="footer_title_{$linkBlock.id}"
     >
       <p

modules/ps_searchbar/ps_searchbar.tpl

@@ -28,13 +28,14 @@
     <form class="ps-searchbar__form" method="get" action="{$search_controller_url}" role="search">
       <input type="hidden" name="controller" value="search">
       <i class="material-icons ps-searchbar__magnifier js-search-icon" aria-hidden="true">&#xE8B6;</i>
+      <label for="ps_searchbar_input" class="visually-hidden">{l s='Search' d='Shop.Theme.Catalog'}</label>
       <input
         class="js-search-input form-control ps-searchbar__input"
         type="text"
         name="s"
         value="{$search_string}"
         placeholder="{l s='Search products...' d='Shop.Theme.Catalog'}"
-        aria-label="{l s='Search' d='Shop.Theme.Catalog'}"
+        id="ps_searchbar_input"
         autocomplete="off"
         role="combobox"
         aria-haspopup="listbox"
@@ -43,7 +44,7 @@
         aria-expanded="false"
       >
       <button type="button" class="ps-searchbar__clear js-search-clear btn outline outline--rounded d-none" aria-label="{l s='Clear search' d='Shop.Theme.Catalog'}">
-        <i class="material-icons">&#xE14C;</i>
+        <i class="material-icons" aria-hidden="true">&#xE14C;</i>
       </button>
     </form>
 
@@ -69,7 +70,7 @@
 <div class="ps-searchbar--mobile d-md-none d-flex col-auto">
   <div class="header-block d-flex align-items-center">
     <a class="header-block__action-btn" href="#" role="button" data-bs-toggle="offcanvas" data-bs-target="#searchCanvas" aria-controls="searchCanvas" aria-label="{l s='Show search bar' d='Shop.Theme.Global'}">
-      <span class="material-icons header-block__icon">&#xE8B6;</span>
+      <span class="material-icons header-block__icon" aria-hidden="true">&#xE8B6;</span>
     </a>
   </div>
 

templates/catalog/_partials/active_filters.tpl

@@ -14,7 +14,7 @@
           <li class="filter-block">
             {l s='%1$s:' d='Shop.Theme.Catalog' sprintf=[$filter.facetLabel]}
             {$filter.label}
-            <a class="js-search-link" href="{$filter.nextEncodedFacetsURL}"><i class="material-icons close">&#xE5CD;</i></a>
+            <a class="js-search-link" href="{$filter.nextEncodedFacetsURL}"><i class="material-icons close" aria-hidden="true">&#xE5CD;</i></a>
           </li>
         {/block}
       {/foreach}

templates/catalog/_partials/facets.tpl

@@ -39,8 +39,8 @@
 
           <span>
             <span class="navbar-toggler collapse-icons">
-              <i class="material-icons add">&#xE313;</i>
-              <i class="material-icons remove">&#xE316;</i>
+              <i class="material-icons add" aria-hidden="true">&#xE313;</i>
+              <i class="material-icons remove" aria-hidden="true">&#xE316;</i>
             </span>
           </span>
         </div>
@@ -68,7 +68,7 @@
                         {elseif isset($filter.properties.color)}
                           <span class="color" style="background-color:{$filter.properties.color}"></span>
                         {else}
-                          <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
+                          <span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked" aria-hidden="true">&#xE5CA;</i></span>
                         {/if}
                       </span>
                     {else}

templates/catalog/_partials/miniatures/product-quickview.tpl

@@ -12,6 +12,6 @@
   <button class="{$componentName}__quickview-touch btn btn-tertiary btn-square-icon js-quickview"
     data-ps-action="open-quickview"
     aria-label="{l s='Quick view %product_name%' sprintf=['%product_name%' => $product.name] d='Shop.Theme.Actions'}">
-    <i class="material-icons">&#xE417;</i>
+    <i class="material-icons" aria-hidden="true">&#xE417;</i>
   </button>
 {/block}

templates/catalog/_partials/product-add-to-cart.tpl

@@ -30,7 +30,7 @@
 
           {** And render the availability message with icon *}
           <div class="product__availability-status {$availability_class}" aria-live="off" data-ps-ref="product-availability">
-            <i class="product__availability-icon material-icons rtl-no-flip">&#x{$availability_icon};</i>
+            <i class="product__availability-icon material-icons rtl-no-flip" aria-hidden="true">&#x{$availability_icon};</i>
 
             <div class="product__availability-messages">
               <span class="visually-hidden">{l s='Product availability:' d='Shop.Theme.Global'}</span>

templates/catalog/_partials/product-cover-thumbnails.tpl

@@ -74,7 +74,7 @@
 
       {block name='product_images_modal_button'}
         <button class="product__zoom btn btn-tertiary outline outline--rounded btn-square-icon" data-bs-toggle="modal" data-bs-target="#product-modal" aria-label="{l s='Open zoomed product image gallery' d='Shop.Theme.Global'}" title="{l s='Open zoomed product image gallery' d='Shop.Theme.Global'}">
-          <i class="material-icons">&#xE8B6;</i>
+          <i class="material-icons" aria-hidden="true">&#xE8B6;</i>
         </button>
       {/block}
     </div>

templates/catalog/product.tpl

@@ -165,7 +165,7 @@
                             href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}"
                             aria-label="{l s='Download %attachment_name%' sprintf=['%attachment_name%' => $attachment.name] d='Shop.Theme.Actions'}"
                           >
-                            <i class="material-icons">&#xE2C4;</i> {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
+                            <i class="material-icons" aria-hidden="true">&#xE2C4;</i> {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                           </a>
                         </div>
                       {/foreach}

templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -108,7 +108,7 @@
 
         <div class="product-line__item product-line__item--availability">
           <div class="product-line__item-availability-message {$availability_class}">
-            <i class="product-line__item-availability-icon material-icons rtl-no-flip">&#x{$availability_icon};</i>
+            <i class="product-line__item-availability-icon material-icons rtl-no-flip" aria-hidden="true">&#x{$availability_icon};</i>
             {$product.availability_message}
           </div>
         </div>