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.

Sign up for GitHub

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

Jump to bottom

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

Closed
wants to merge 14 commits into from
Closed

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

wants to merge 14 commits into from

Conversation

LucasLacerdaUX
Copy link
Contributor

@LucasLacerdaUX LucasLacerdaUX commented Apr 11, 2022 •
edited
Loading

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

Checklist

LucasLacerdaUX
LucasLacerdaUX commented Apr 11, 2022
View reviewed changes
Copy link
Contributor Author

@LucasLacerdaUX LucasLacerdaUX left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Questions for reviewers.

@LucasLacerdaUX LucasLacerdaUX requested a review from svinkle April 12, 2022 19:00
svinkle
svinkle reviewed Apr 13, 2022
View reviewed changes
svinkle
svinkle reviewed Apr 13, 2022
View reviewed changes
@svinkle svinkle mentioned this pull request Apr 21, 2022
Closed
11 tasks
@LucasLacerdaUX
Copy link
Contributor Author

@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.

@LucasLacerdaUX LucasLacerdaUX requested a review from svinkle April 25, 2022 20:32
@LucasLacerdaUX LucasLacerdaUX mentioned this pull request Apr 26, 2022
Merged
19 tasks
@ludoboludo ludoboludo self-requested a review May 6, 2022 14:38
ludoboludo
ludoboludo reviewed May 6, 2022
View reviewed changes
Copy link
Contributor

@ludoboludo ludoboludo left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 👍

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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 🤷

@andrewetchen andrewetchen self-requested a review May 24, 2022 16:01
@ludoboludo
Copy link
Contributor

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
ludoboludo previously approved these changes May 26, 2022
View reviewed changes
Copy link
Contributor

@ludoboludo ludoboludo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

andrewetchen
andrewetchen previously approved these changes May 26, 2022
View reviewed changes
Copy link
Contributor

@andrewetchen andrewetchen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@LucasLacerdaUX
Copy link
Contributor Author

@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
andrewetchen approved these changes May 30, 2022
View reviewed changes
Copy link
Contributor

@andrewetchen andrewetchen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏼

ludoboludo
ludoboludo approved these changes Jun 6, 2022
View reviewed changes
Copy link
Contributor

@ludoboludo ludoboludo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@svinkle svinkle removed their request for review February 14, 2023 14:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@svinkle svinkle svinkle left review comments

@andrewetchen andrewetchen andrewetchen approved these changes

@ludoboludo ludoboludo ludoboludo approved these changes

Assignees
No one assigned
Labels
By: Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Global] Misleading context applied to modal launcher controls
5 participants
@LucasLacerdaUX @ludoboludo @svinkle @andrewetchen @KaichenWang