Accessibility: add some aria-hidden, labels...

[yannicka]

Questions	Answers
Description?	Improve accessibility. Add label, add aria-hidden, add aria-label, etc.
Type?	improvement (on accessibility)
BC breaks?	no
Deprecations?	no
Fixed ticket?	N/A
Sponsor company	N/A
How to test?	N/A

[ps-jarvis]

This pull request seems to contain new translation strings. I have summarized them below to ease up review:

• Modules.Emailsubscription.Shop
  • Subscribe to our newsletter
• Shop.Theme.Catalog
  • Search products...
  • Clear search
• Shop.Theme.Global
  • Product availability:
  • Open zoomed product image gallery

(Note: this is an automated message, but answering it will reach a real human)

[yannicka]

I also have a few questions:

1. Is tabindex="0" a good practice on alerts? For example:
   

   hummingbird/templates/_partials/notifications.tpl

   Line 11 in fd25e7f

   <div class="alert alert-danger alert-dismissible" role="alert" tabindex="0">

2. Are aria-label useful on contact info? For example:
   

   hummingbird/modules/ps_contactinfo/ps_contactinfo-rich.tpl

   Line 47 in fd25e7f

   aria-label="{l s='Send us an email to: %email%' sprintf=['%email%' => $contact_infos.email] d='Shop.Theme.Global'}">

[tblivet]

Hi @yannicka, thanks for the PR! Here’s some feedback.

[tblivet]

I also have a few questions:

1. Is tabindex="0" a good practice on alerts? For example:
   

   hummingbird/templates/_partials/notifications.tpl

   Line 11 in fd25e7f

   <div class="alert alert-danger alert-dismissible" role="alert" tabindex="0">

2. Are aria-label useful on contact info? For example:
   

   hummingbird/modules/ps_contactinfo/ps_contactinfo-rich.tpl

   Line 47 in fd25e7f

   aria-label="{l s='Send us an email to: %email%' sprintf=['%email%' => $contact_infos.email] d='Shop.Theme.Global'}">

Hi @yannicka,

1. I believe tabindex="0" is appropriate in this case because the notification template may display errors or important messages. Without it, the alert wouldn’t be focusable via the Tab key, which could make it harder for keyboard and screen reader users to access.
2. Yes, this aria-label is used to clearly indicate that the link is intended to send an email.

[tblivet]

Thank you for the update! It’s okay for me, but we need to rebase here. Yesterday, I changed the target branch to 2.x

[yannicka]

Thank you for the update! It’s okay for me, but we need to rebase here. Yesterday, I changed the target branch to 2.x

Can you do that?

[ingridusta]

Hi @yannicka,

I have tested your pr. No regression on keyboard nav + voice over.

It's a QA approveeeed ✅

Thanks for your contribution.