Skip to content

Conversation

@barryhughes
Copy link
Member

@barryhughes barryhughes commented Apr 16, 2021

All Submissions:

Changes proposed in this Pull Request:

Improves A11Y in relation to the billing and shipping state and country fields. Closes #27317.

  • Pulls in updated SelectWoo assets, as per this changeset (which needs to be approved before we can use here).
  • Updates our template functions: if we have a label string, we will also add it to the select element as a data-label attribute.
  • Updates our frontend JS: when creating a SelectWoo dropdown it will look for and utilize the data-label string, if provided.

checkout-forms

☝️ This composite screenshot shows the change in action. Note the tooltips added by MacOS's VoiceOver util, which now is of the format <Current Value or Placeholder> <Label Text> <Other Items> whereas, previously, we were missing the <Label Text> component (such as "Country / Region").

How to test the changes in this Pull Request:

Using the VoiceOver util from MacOS (of course, feel free to use popular alternatives, too):

  1. Start with current trunk code/latest stable release.
    1. Add some items to the cart, proceed to checkout.
    2. Observe the audio feedback (or tooltip text) provided by VoiceOver when you click into our SelectWoo dropdowns (or their labels): the label text itself will not be surfaced.
  2. Checkout this code and repeat the process, noting the label text is now discovered by VoiceOver.

Other information:

  • This will be a draft PR until we've evaluated SelectWoo PR 43.
  • It looks like we previously bundled SelectWoo 1.0.6, though 1.0.8 is currently the latest tagged version (and the above PR would result in 1.0.9). Going from 1.0.6 to 1.0.9 seems like a safe change, best I can tell, but I wanted to highlight it.
  • I tried some lower lift approaches, such as simply nesting the <select> (and therefore the generated SelectWoo dropdown) within the <label> element, and some other permutations, but besides being inconsistent with how we handle other fields it did not improve things when I tested with VoiceOver.

Changelog entry

Enhancement - Improved accessibility of the country and state address fields.

@barryhughes barryhughes requested review from a team and ObliviousHarmony and removed request for a team April 16, 2021 18:50
@ObliviousHarmony ObliviousHarmony requested review from a team and jonathansadowski and removed request for a team and ObliviousHarmony April 21, 2021 16:19
@barryhughes
Copy link
Member Author

For clarity, this PR is set to draft just because it depends on SelectWoo PR 43.

@barryhughes barryhughes marked this pull request as ready for review April 27, 2021 15:27
Copy link
Contributor

@jonathansadowski jonathansadowski left a comment

Choose a reason for hiding this comment

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

As I noted in woocommerce/selectWoo#43, I think that this is a reasonable approach. Tested with VoiceOver and after this change the label for the select fields is also read. Thanks for the fix, nice work!

@jonathansadowski jonathansadowski merged commit 8e45860 into trunk Apr 27, 2021
@jonathansadowski jonathansadowski deleted the fix/27317-selectwoo-a11y branch April 27, 2021 21:23
@woocommercebot woocommercebot added release: add changelog Mark all PRs that have not had their changelog entries added. [auto] release: add testing instructions PRs that have not had testing instructions added to the wiki. [auto] labels Apr 27, 2021
@github-actions github-actions bot added this to the 5.4.0 milestone Apr 27, 2021
@ObliviousHarmony ObliviousHarmony added changelog added and removed release: add changelog Mark all PRs that have not had their changelog entries added. [auto] labels May 14, 2021
@juliaamosova juliaamosova added testing instructions added and removed release: add testing instructions PRs that have not had testing instructions added to the wiki. [auto] labels May 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

State and Country field labels are not read by screen readers

6 participants