From 9367e340662338aadf9bd8e98293470712fdcc5b Mon Sep 17 00:00:00 2001
From: pawelkierklo <admin@herf.pl>
Date: Sat, 30 Sep 2023 10:36:41 +0200
Subject: [PATCH] Improve accessibilites

Google PageSpeed suggests making elements more accessible for a11y. This boosts the page's score by +10 points.
---
 .../views/templates/components/modals/add-to-wishlist.tpl     | 4 ++--
 modules/ps_contactinfo/ps_contactinfo.tpl                     | 2 +-
 modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl   | 2 +-
 .../views/templates/hook/hookDisplayFooter.tpl                | 2 +-
 modules/ps_linklist/views/templates/hook/linkblock.tpl        | 2 +-
 templates/components/qty-input.tpl                            | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl b/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl
index 753f2033a..a48213390 100644
--- a/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl
+++ b/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl
@@ -44,9 +44,9 @@
         </div>
 
         <div class="modal-footer">
-          <a @click="openNewWishlistModal" class="wishlist-add-to-new text-primary">
+          <div role="button" @click="openNewWishlistModal" class="wishlist-add-to-new text-primary">
             <i class="material-icons text-primary" aria-hidden="true">add_circle_outline</i> {$newWishlistCTA}
-          </a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/modules/ps_contactinfo/ps_contactinfo.tpl b/modules/ps_contactinfo/ps_contactinfo.tpl
index e1b637bca..f9cad8cae 100644
--- a/modules/ps_contactinfo/ps_contactinfo.tpl
+++ b/modules/ps_contactinfo/ps_contactinfo.tpl
@@ -7,7 +7,7 @@
 
   <p class="footer__block__title d-none d-md-flex">{l s='Store information' d='Shop.Theme.Global'}</p>
 
-  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
+  <div role="button" class="footer__block__toggle d-md-none collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Store information' d='Shop.Theme.Global'}</span>
     <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
index 9618ef2bb..0eedc41ff 100644
--- a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
+++ b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
@@ -10,7 +10,7 @@
     </a>
   </p>
 
-  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
+  <div role="button" class="footer__block__toggle d-md-none collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl b/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
index 2a67ceadb..6d486bf9e 100644
--- a/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
+++ b/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
@@ -7,7 +7,7 @@
 
   <p class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</p>
 
-  <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
+  <div role="button" class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>
     <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_linklist/views/templates/hook/linkblock.tpl b/modules/ps_linklist/views/templates/hook/linkblock.tpl
index aee67eafb..40ca58f3e 100644
--- a/modules/ps_linklist/views/templates/hook/linkblock.tpl
+++ b/modules/ps_linklist/views/templates/hook/linkblock.tpl
@@ -7,7 +7,7 @@
 
     <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle d-md-none collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
+    <div role="button" class="footer__block__toggle d-md-none collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
       <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
     </div>
diff --git a/templates/components/qty-input.tpl b/templates/components/qty-input.tpl
index a736b6e08..fb8c374ea 100644
--- a/templates/components/qty-input.tpl
+++ b/templates/components/qty-input.tpl
@@ -19,7 +19,7 @@
 {/if}
 
 <div class="input-group flex-nowrap{if isset($marginHelper)} {$marginHelper}{else} mb-3{/if}">
-  <button class="btn {$prepend.button} js-{$prepend.button}-button" type="button">
+  <button role="button" aria-label="{$prepend.button}" class="btn {$prepend.button} js-{$prepend.button}-button" type="button">
     <i class="material-icons" aria-hidden="true">&#x{$prepend.icon};</i>
     <i class="material-icons confirmation d-none">&#x{$prepend.confirm_icon};</i>
     <div class="spinner-border spinner-border-sm align-middle d-none" role="status"></div>
@@ -39,7 +39,7 @@
       min="1"
     {* End of default attributes *}
   />
-  <button class="btn {$append.button} js-{$append.button}-button" type="button">
+  <button role="button" aria-label="{$append.button}" class="btn {$append.button} js-{$append.button}-button" type="button">
     <i class="material-icons" aria-hidden="true">&#x{$append.icon};</i>
     <i class="material-icons confirmation d-none">&#x{$append.confirm_icon};</i>
     <div class="spinner-border spinner-border-sm align-middle d-none" role="status"></div>