[Modals] Replace `aria-haspopup="dialog"` with `aria-describedby` #1612

LucasLacerdaUX · 2022-04-11T21:00:15Z

PR Summary:

Why are these changes introduced?
Fix misleading context on modal launcher controls.
Fixes #1446

What approach did you take?

Added a new Opens a modal window a11y translation string.
Replaced aria-haspopup="dialog" with aria-describedby

Other considerations

Testing steps/scenarios

Demo links

Store
Editor

Checklist

Added PR summary for release notes
Notified the help.shopify.com team about updates to theme settings (current contact: Kimli)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

LucasLacerdaUX

Questions for reviewers.

sections/main-password-header.liquid

snippets/card-product.liquid

sections/header.liquid

layout/theme.liquid

sections/header.liquid

sections/main-password-header.liquid

snippets/card-product.liquid

locales/en.default.json

LucasLacerdaUX · 2022-04-25T19:04:41Z

@svinkle I have updated the PR with the following:

aria-describedby="a11y-modal-window-message" is now JS-only on:
- Search (header.liquid)
- Password Page (main-password-header.liquid)
- Product Form submit buttons. Affects the Quick Add* button (card-product.liquid) and, by extension, on the Product Page and Featured Product sections.
Translation has been changed to dialog popup
Moved the a11y-refresh-page-message string from a <ul hidden> element to a <div hidden> structure, using <span> instead of <li>.

* Note that Quick Add is currently broken on NoJS. We'll work on a fix for that.

ludoboludo

Since I just merged cart drawer there is an update needed for the cart icon that you mentioned during your review :) Unless I already had changed it 🤔

Also the filter drawer is using something similar to the menu drawer so it's not announcing it as a dialog popup but I think it should. Kinda like pick up availability.

A new translation request is needed too.

Otherwise seem good 👍

ludoboludo · 2022-05-06T15:04:38Z

locales/en.default.json

@@ -69,7 +69,8 @@
    "refresh_page": "Choosing a selection results in a full page refresh.",
    "link_messages": {
      "new_window": "Opens in a new window.",
-      "external": "Opens external website."
+      "external": "Opens external website.",
+      "modal_window": "dialog popup"


I wonder we should be using a capital D instead 🤔 When using voice over in Safari it doesn't really make a difference but seem to make sense 🤷

ludoboludo · 2022-05-25T21:38:06Z

I'm wondering if it should be applied to the cart icon when it's set to be a drawer. I think it should since it's updated for the pickup availability.

ludoboludo

Looks good 👍

andrewetchen

I looked at every page/template that was updated using voiceover, everything looks good to me.

LucasLacerdaUX · 2022-05-30T15:05:34Z

@andrewetchen @ludoboludo Just had to dismiss your reviews to fix Translation Platform errors. Can you please reapprove it? Nothing but localization strings have been changed :)

andrewetchen

👍🏼

ludoboludo

👍

LucasLacerdaUX commented Apr 11, 2022

View reviewed changes

sections/main-password-header.liquid Outdated Show resolved Hide resolved

snippets/card-product.liquid Outdated Show resolved Hide resolved

sections/header.liquid Outdated Show resolved Hide resolved

LucasLacerdaUX requested a review from svinkle April 12, 2022 19:00

svinkle reviewed Apr 13, 2022

View reviewed changes

layout/theme.liquid Show resolved Hide resolved

sections/header.liquid Outdated Show resolved Hide resolved

sections/main-password-header.liquid Outdated Show resolved Hide resolved

snippets/card-product.liquid Outdated Show resolved Hide resolved

svinkle reviewed Apr 13, 2022

View reviewed changes

locales/en.default.json Outdated Show resolved Hide resolved

svinkle mentioned this pull request Apr 21, 2022

Facet filter a11y #1500

Closed

11 tasks

LucasLacerdaUX requested a review from svinkle April 25, 2022 20:32

LucasLacerdaUX mentioned this pull request Apr 26, 2022

Cart drawer #1544

Merged

19 tasks

ludoboludo self-requested a review May 6, 2022 14:38

ludoboludo reviewed May 6, 2022

View reviewed changes

andrewetchen self-requested a review May 24, 2022 16:01

LucasLacerdaUX and others added 12 commits May 25, 2022 16:22

Replace aria-haspopup with aria-describedby

ea84a33

.

05073f6

Password

8ccd434

Update 21 translation files

a307ee8

Update 2 translation files

9df704c

Update 6 translation files

0b70dc2

Update 1 translation file

95db1ef

Update with reviewer suggestions

cc56473

Update 1 translation file

154991f

Update 17 translation files

17703dd

Update 2 translation files

f9b4400

Fix missing new window message

1767a25

LucasLacerdaUX force-pushed the open-modal-a11y branch from 2d7a0ac to 1767a25 Compare May 25, 2022 20:25

Update the cart drawer icon

24a9336

ludoboludo previously approved these changes May 26, 2022

View reviewed changes

andrewetchen previously approved these changes May 26, 2022

View reviewed changes

Update 30 translation files

0dbea65

translation-platform bot dismissed andrewetchen’s stale review via 0dbea65 May 30, 2022 14:59

translation-platform bot dismissed ludoboludo’s stale review via 0dbea65 May 30, 2022 14:59

andrewetchen approved these changes May 30, 2022

View reviewed changes

ludoboludo approved these changes Jun 6, 2022

View reviewed changes

KaichenWang added the By: Team label Jul 18, 2022

svinkle removed their request for review February 14, 2023 14:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Modals] Replace `aria-haspopup="dialog"` with `aria-describedby` #1612

[Modals] Replace `aria-haspopup="dialog"` with `aria-describedby` #1612

LucasLacerdaUX commented Apr 11, 2022 •

edited

LucasLacerdaUX left a comment

LucasLacerdaUX commented Apr 25, 2022

ludoboludo left a comment •

edited

ludoboludo May 6, 2022

ludoboludo commented May 25, 2022

ludoboludo left a comment

andrewetchen left a comment

LucasLacerdaUX commented May 30, 2022

andrewetchen left a comment

ludoboludo left a comment

[Modals] Replace aria-haspopup="dialog" with aria-describedby #1612

Are you sure you want to change the base?

[Modals] Replace aria-haspopup="dialog" with aria-describedby #1612

Conversation

LucasLacerdaUX commented Apr 11, 2022 • edited

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

LucasLacerdaUX commented Apr 25, 2022

ludoboludo left a comment • edited

Choose a reason for hiding this comment

ludoboludo May 6, 2022

Choose a reason for hiding this comment

ludoboludo commented May 25, 2022

ludoboludo left a comment

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

LucasLacerdaUX commented May 30, 2022

andrewetchen left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

[Modals] Replace `aria-haspopup="dialog"` with `aria-describedby` #1612

[Modals] Replace `aria-haspopup="dialog"` with `aria-describedby` #1612

LucasLacerdaUX commented Apr 11, 2022 •

edited

ludoboludo left a comment •

edited