Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: add aria-hidden (and some aria-label) #506

Merged
merged 1 commit into from
Jun 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

<div class="modal-footer">
<a @click="openNewWishlistModal" class="wishlist-add-to-new text-primary">
<i class="material-icons text-primary">add_circle_outline</i> {$newWishlistCTA}
<i class="material-icons text-primary" aria-hidden="true">add_circle_outline</i> {$newWishlistCTA}
</a>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div id="empty-product-comment" class="product-comment-list-item">
{if $post_allowed}
<button class="btn btn-primary btn-with-icon post-product-comment">
<i class="material-icons">&#xE3C9;</i>
<i class="material-icons" aria-hidden="true">&#xE3C9;</i>
{l s='Be the first to write your review' d='Modules.Productcomments.Shop'}
</button>
{else}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{include file="catalog/_partials/productlist.tpl" products=$products productClass="col-6 col-lg-4 col-xl-3"}
<div class="best-sellers-products-footer text-center">
<a class="all-product-link btn btn-outline-primary" href="{$allBestSellers}">
{l s='All best sellers' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip">&#xE315;</i>
{l s='All best sellers' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
</a>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
aria-haspopup="true"
aria-expanded="false">
{l s='All brands' d='Shop.Theme.Catalog'}
<i class="material-icons float-end">arrow_drop_down</i>
<i class="material-icons float-end" aria-hidden="true">arrow_drop_down</i>
</button>
<div class="dropdown-menu dropdown-menu-start">
{foreach from=$brands item=brand}
Expand Down
10 changes: 5 additions & 5 deletions modules/ps_contactinfo/ps_contactinfo-rich.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@
<div class="contact__details">
<h2 class="contact__title">{l s='Store information' d='Shop.Theme.Global'}</h4>
<div class="contact__item">
<i class="material-icons">&#xE55F;</i>
<i class="material-icons" aria-hidden="true">&#xE55F;</i>
<div class="contact__info">{$contact_infos.address.formatted nofilter}</div>
</div>
{if $contact_infos.phone}
<hr/>
<div class="contact__item">
<i class="material-icons">&#xE0CD;</i>
<i class="material-icons" aria-hidden="true">&#xE0CD;</i>
<div class="contact__info"><a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a></div>
</div>
{/if}
{if $contact_infos.fax}
<hr/>
<div class="contact__item">
<i class="material-icons">&#xE0DF;</i>
<i class="material-icons" aria-hidden="true">&#xE0DF;</i>
<div class="contact__info">{$contact_infos.fax}</div>
</div>
{/if}
{if $contact_infos.email && $display_email}
<hr/>
<div class="contact__item">
<i class="material-icons">&#xE158;</i>
<i class="material-icons" aria-hidden="true">&#xE158;</i>
<div class="contact__info contact__info--email">{mailto address=$contact_infos.email encode="javascript"}</div>
</div>
{/if}
{if !empty($contact_infos.details)}
<hr/>
<div class="contact__item">
<i class="material-icons">&#xE88E;</i>
<i class="material-icons" aria-hidden="true">&#xE88E;</i>
<div class="contact__info">{$contact_infos.details|nl2br nofilter}</div>
</div>
{/if}
Expand Down
8 changes: 4 additions & 4 deletions modules/ps_contactinfo/ps_contactinfo.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div 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">arrow_drop_down</i>
<i class="material-icons" aria-hidden="true">arrow_drop_down</i>
</div>

<div id="contact-infos" class="footer__block__content footer__block__content-contact collapse">
Expand All @@ -20,21 +20,21 @@

{if $contact_infos.phone}
<div class="contact__phone">
<i class="material-icons">phone</i>
<i class="material-icons" aria-hidden="true">phone</i>
<a href="tel:{$contact_infos.phone}">{$contact_infos.phone}</a>
</div>
{/if}

{if $contact_infos.fax}
<div class="contact__fax">
<i class="material-icons">fax</i>
<i class="material-icons" aria-hidden="true">fax</i>
<a href="fax:{$contact_infos.fax}">{$contact_infos.fax}</a>
</div>
{/if}

{if $contact_infos.email && $display_email}
<div class="contact__email">
<i class="material-icons">mail</i>
<i class="material-icons" aria-hidden="true">mail</i>
{mailto address=$contact_infos.email encode="javascript"}
</div>
{/if}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<div 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">arrow_drop_down</i>
<i class="material-icons" aria-hidden="true">arrow_drop_down</i>
</div>
<ul class="footer__block__content footer__block__content-list collapse" id="footer_account_list">
{if $customer.is_logged}
Expand Down
22 changes: 11 additions & 11 deletions modules/ps_customersignin/ps_customersignin.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -15,58 +15,58 @@
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="material-icons header-block__icon">&#xE7FD;</i>
<i class="material-icons header-block__icon" aria-hidden="true">&#xE7FD;</i>
<span class="header-block__title d-lg-inline d-none">{$customerName|truncate:22:"..":true}</span>
</a>

<div class="dropdown-menu dropdown-menu-start" aria-labelledby="userMenuButton">
<a class="dropdown-item" href="{$urls.pages.my_account}">
<i class="material-icons me-2">&#xF02E;</i>
<i class="material-icons me-2" aria-hidden="true">&#xF02E;</i>
{l s='Your account' d='Shop.Theme.Customeraccount'}
</a>
<div class="dropdown-divider"></div>
<a href="{$urls.pages.identity}" title="{l s='Information' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE853;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE853;</i>
{l s='Information' d='Shop.Theme.Customeraccount'}
</a>
{if $customer.addresses|count}
<a href="{$urls.pages.addresses}" title="{l s='Addresses' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE56A;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE56A;</i>
{l s='Addresses' d='Shop.Theme.Customeraccount'}
</a>
{else}
<a href="{$urls.pages.address}" title="{l s='Add first address' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE567;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE567;</i>
{l s='Add first address' d='Shop.Theme.Customeraccount'}
</a>
{/if}
{if !$configuration.is_catalog}
<a href="{$urls.pages.history}" title="{l s='Orders' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE916;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE916;</i>
{l s='Orders' d='Shop.Theme.Customeraccount'}
</a>
{/if}
{if !$configuration.is_catalog}
<a href="{$urls.pages.order_slip}" title="{l s='Credit slips' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE8B0;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE8B0;</i>
{l s='Credit slips' d='Shop.Theme.Customeraccount'}
</a>
{/if}
{if $configuration.voucher_enabled && !$configuration.is_catalog}
<a href="{$urls.pages.discount}" title="{l s='Vouchers' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE54E;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE54E;</i>
{l s='Vouchers' d='Shop.Theme.Customeraccount'}
</a>
{/if}
{if $configuration.return_enabled && !$configuration.is_catalog}
<a href="{$urls.pages.order_follow}" title="{l s='Merchandise returns' d='Shop.Theme.Customeraccount'}" class="dropdown-item" rel="nofollow">
<i class="material-icons me-2">&#xE860;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE860;</i>
{l s='Merchandise returns' d='Shop.Theme.Customeraccount'}
</a>
{/if}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{$logout_url}">
<i class="material-icons me-2">&#xE879;</i>
<i class="material-icons me-2" aria-hidden="true">&#xE879;</i>
{l s='Sign out' d='Shop.Theme.Actions'}
</a>
</div>
Expand All @@ -79,7 +79,7 @@
class="header-block__action-btn"
rel="nofollow"
role="button">
<i class="material-icons header-block__icon">&#xE7FD;</i>
<i class="material-icons header-block__icon" aria-hidden="true">&#xE7FD;</i>
<span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
</a>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
class="js-remove-email-alert btn btn-link {$componentName}__remove"
rel="js-id-emailalerts-{$mailAlert.id_product|intval}-{$mailAlert.id_product_attribute|intval}"
data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'remove']}">
<i class="material-icons">delete</i>
<i class="material-icons" aria-label="{l s='Delete' d='Modules.Emailalerts.Shop'}">delete</i>
</a>
</div>
2 changes: 1 addition & 1 deletion modules/ps_emailalerts/views/templates/hook/my-account.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<a class="col-md-6 col-lg-4" id="emailsalerts"
href="{url entity='module' name='ps_emailalerts' controller='account'}" title="{l s='My alerts' d='Shop.Theme.Catalog'}">
<span class="link-item">
<i class="material-icons">&#xE151;</i>
<i class="material-icons" aria-hidden="true">&#xE151;</i>
{l s='My alerts' d='Shop.Theme.Catalog'}
</span>
</a>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="featured-products-footer text-center">
<a class="all-product-link btn btn-outline-primary btn-with-icon" href="{$allProductsLink}">
{l s='All products' d='Shop.Theme.Catalog'}
<i class="material-icons rtl-flip">&#xE315;</i>
<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
</a>
</div>
</section>
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div 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">arrow_drop_down</i>
<i class="material-icons" aria-hidden="true">arrow_drop_down</i>
</div>
<ul class="footer__block__content footer__block__content-list collapse" id="footer_eu_about_us_list">
{foreach from=$cms_links item=cms_link}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<div class="footer__block__toggle d-md-none collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
<span class="footer__block__title">{$linkBlock.title}</span>
<i class="material-icons">arrow_drop_down</i>
<i class="material-icons" aria-hidden="true">arrow_drop_down</i>
</div>
<ul id="footer_sub_menu_{$linkBlock.id}" class="footer__block__content footer__block__content-list collapse">
{foreach $linkBlock.links as $link}
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_linklist/views/templates/hook/linkblock.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div 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">arrow_drop_down</i>
<i class="material-icons" aria-hidden="true">arrow_drop_down</i>
</div>

<ul id="footer_sub_menu_{$linkBlock.id}" class="footer__block__content footer__block__content-list collapse">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{include file="catalog/_partials/productlist.tpl" products=$products productClass="col-6 col-lg-4 col-xl-3"}
<div class="new-products-footer text-center">
<a class="all-product-link btn btn-outline-primary" href="{$allNewProductsLink}">
{l s='All new products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip">&#xE315;</i>
{l s='All new products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions modules/ps_shoppingcart/modal.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
<i class="material-icons me-1">&#xE5CA;</i>
<i class="material-icons me-1" aria-hidden="true">&#xE5CA;</i>
{l s='Product successfully added to your shopping cart' d='Shop.Theme.Checkout'}
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
Expand Down Expand Up @@ -98,7 +98,7 @@
<div class="modal-footer border-1">
<div class="cart-footer-actions d-flex flex-wrap align-items-center justify-content-between w-100">
<button type="button" class="btn btn-outline-primary btn-with-icon w-md-auto w-100 mb-md-0 mb-3" data-bs-dismiss="modal">
<i class="material-icons rtl-flip">&#xE5CB;</i>
<i class="material-icons rtl-flip" aria-hidden="true">&#xE5CB;</i>
{l s='Continue shopping' d='Shop.Theme.Actions'}
</button>
<a href="{$cart_url}" class="btn btn-primary w-md-auto w-100">{l s='Proceed to checkout' d='Shop.Theme.Actions'}</a>
Expand Down
2 changes: 1 addition & 1 deletion modules/ps_shoppingcart/ps_shoppingcart.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<span class="header-block__action-btn">
{/if}

<i class="material-icons header-block__icon">shopping_cart</i>
<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
<span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
<span class="header-block__badge">{$cart.products_count}</span>

Expand Down
2 changes: 1 addition & 1 deletion modules/ps_specials/views/templates/hook/ps_specials.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{include file="catalog/_partials/productlist.tpl" products=$products productClass="col-6 col-lg-4 col-xl-3"}
<div class="sale-products-footer text-center">
<a class="all-product-link btn btn-outline-primary" href="{$allSpecialProductsLink}">
{l s='All sale products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip">&#xE315;</i>
{l s='All sale products' d='Shop.Theme.Catalog'}<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
</a>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
aria-haspopup="true"
aria-expanded="false">
{l s='All suppliers' d='Shop.Theme.Catalog'}
<i class="material-icons float-end">arrow_drop_down</i>
<i class="material-icons float-end" aria-hidden="true">arrow_drop_down</i>
</button>
<div class="dropdown-menu dropdown-menu-start">
{foreach from=$suppliers item=supplier}
Expand Down
4 changes: 2 additions & 2 deletions modules/psgdpr/views/templates/front/customerPersonalData.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
<div class="mb-4">
<h2 class="fs-5">{l s='Access to my data' mod='psgdpr'}</h2>
<p>{l s='At any time, you have the right to retrieve the data you have provided to our site. Click on "Get my data" to automatically download a copy of your personal data on a pdf or csv file.' mod='psgdpr'}</p>
<a id="exportDataToCsv" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mb-2 mb-sm-0" target="_blank" href="{$psgdpr_csv_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons">download</i> {l s='GET MY DATA TO CSV' mod='psgdpr'}</a>
<a id="exportDataToPdf" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mx-sm-2" target="_blank" href="{$psgdpr_pdf_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons">download</i> {l s='GET MY DATA TO PDF' mod='psgdpr'}</a>
<a id="exportDataToCsv" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mb-2 mb-sm-0" target="_blank" href="{$psgdpr_csv_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='GET MY DATA TO CSV' mod='psgdpr'}</a>
<a id="exportDataToPdf" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mx-sm-2" target="_blank" href="{$psgdpr_pdf_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='GET MY DATA TO PDF' mod='psgdpr'}</a>
</div>

<h2 class="fs-5">{l s='Rectification & Erasure requests' mod='psgdpr'}</h2>
Expand Down
4 changes: 2 additions & 2 deletions templates/_partials/header.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
{* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
<div class="header-block">
<span class="header-block__action-btn">
<i class="material-icons header-block__icon">&#xE7FD;</i>
<i class="material-icons header-block__icon" aria-hidden="true">&#xE7FD;</i>
<span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
</span>
</div>
Expand All @@ -71,7 +71,7 @@
{* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
<div class="header-block">
<span class="header-block__action-btn">
<i class="material-icons header-block__icon">shopping_cart</i>
<i class="material-icons header-block__icon" aria-hidden="true">shopping_cart</i>
<span class="header-block__badge">{$cart.products_count}</span>
</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/_partials/pagination.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
href="{$page.url}"
class="page-link btn-with-icon {if $page.type === 'previous'}previous {elseif $page.type === 'next'}next {/if}{['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}">
{if $page.type === 'previous'}
<i class="material-icons rtl-flip">&#xE314;</i>
<i class="material-icons rtl-flip" aria-hidden="true">&#xE314;</i>
<span class="d-none d-md-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
{elseif $page.type === 'next'}
<span class="d-none d-md-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
<i class="material-icons rtl-flip">&#xE315;</i>
<i class="material-icons rtl-flip" aria-hidden="true">&#xE315;</i>
{else}
{$page.page}
{/if}
Expand Down
2 changes: 1 addition & 1 deletion templates/catalog/_partials/facets.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{if $activeFilters|count}
<div id="_desktop_search_filters_clear_all" class="d-none d-sm-block d-md-block clear-all-wrapper">
<button data-search-url="{$clear_all_link}" class="btn btn-tertiary js-search-filters-clear-all">
<i class="material-icons">&#xE14C;</i>
<i class="material-icons" aria-hidden="true">&#xE14C;</i>
{l s='Clear all' d='Shop.Theme.Actions'}
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/catalog/_partials/miniatures/product.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
{block name='quick_view'}
<div class="{$componentName}__quickview">
<button class="{$componentName}__quickview_button btn btn-link js-quickview btn-with-icon" data-link-action="quickview">
<i class="material-icons">&#xE417;</i>
<i class="material-icons" aria-hidden="true">&#xE417;</i>
{l s='Quick view' d='Shop.Theme.Actions'}
</button>
</div>
Expand Down Expand Up @@ -183,7 +183,7 @@
}
</div>
<button data-button-action="add-to-cart" class="btn btn-primary ms-3">
<i class="material-icons">&#xe854;</i>
<i class="material-icons" aria-hidden="true">&#xe854;</i>
<span class="visually-hidden">{l s='Add to cart' d='Shop.Theme.Actions'}</span>
</button>
</form>
Expand Down
Loading