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

Instant Search: improve accessibility of close button #17294

Merged
merged 6 commits into from
Oct 19, 2020
Merged

Instant Search: improve accessibility of close button #17294

merged 6 commits into from
Oct 19, 2020

Conversation

bluefuton
Copy link
Contributor

Changes proposed in this Pull Request:

  • Make sure the overlay close button is a real <button> to support the associated keyboard events.
  • Add a focus outline style for the close button.
  • Make sure the button is appropriately labelled for screen readers.
  • Make sure the SVG is not focusable.

References:

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Test the overlay in a selection of themes and check that the visual appearance of the close button has not changed.

Inspect the button with your browser's accessibility tools and ensure that you can see the correct label:

Screen Shot 2020-09-29 at 16 35 31

Proposed changelog entry for your changes:

Not required.

@bluefuton bluefuton requested a review from a team as a code owner September 29, 2020 03:37
@bluefuton bluefuton self-assigned this Sep 29, 2020
@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello bluefuton! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D50321-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

@jetpackbot
Copy link
Collaborator

jetpackbot commented Sep 29, 2020 •
edited
Loading

Scheduled Jetpack release: November 3, 2020.
Scheduled code freeze: October 27, 2020

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-17294

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Generated by 🚫 dangerJS against d41a641

@bluefuton bluefuton added the [Focus] Accessibility Improving usability for all users (a11y) label Sep 29, 2020
jsnmoon
jsnmoon reviewed Oct 6, 2020
View reviewed changes
Copy link
Contributor

@jsnmoon jsnmoon 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 overall. I left a question and a suggestion inline.

modules/search/instant-search/components/search-results.scss Outdated Show resolved Hide resolved
modules/search/instant-search/components/search-results.jsx Show resolved Hide resolved
@jeherve jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Team Review labels Oct 7, 2020
@bluefuton bluefuton added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Oct 7, 2020
jsnmoon
jsnmoon suggested changes Oct 7, 2020
View reviewed changes
Copy link
Contributor

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

aria-hidden changes look good, but I discovered another strange behavior: hoving over the close button nudges it down and to the right:

Oct-07-2020 17-17-31

It looks like we have a lot of styles being applied to .jetpack-instant-search__overlay-close from both modules/search/instant-search/components/search-results.scss and modules/search/instant-search/components/overlay.scss. Perhaps consolidating these styles will help us avoid these styling bugs?

@jsnmoon jsnmoon added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Team Review labels Oct 7, 2020
@bluefuton
Copy link
Contributor Author

hoving over the close button nudges it down and to the right:

How curious. What theme and what browser is it @jsnmoon? I'm not seeing it in TwentyTwenty on Safari, FF or Chrome.

Good call on consolidating the styles. Possibly a case for splitting close button into its own component?

@jsnmoon
Copy link
Contributor

jsnmoon commented Oct 12, 2020 •
edited
Loading

hoving over the close button nudges it down and to the right:

How curious. What theme and what browser is it @jsnmoon? I'm not seeing it in TwentyTwenty on Safari, FF or Chrome.

Strange, I'm no longer able to reproduce. I was using TwentyTwenty with Chrome 85 when I took the screencap.

Good call on consolidating the styles. Possibly a case for splitting close button into its own component?

I think consolidating the styles into search-results.scss might also make sense here, but I'll leave the decision to you :)

@jsnmoon
Copy link
Contributor

jsnmoon commented Oct 12, 2020 •
edited
Loading

Due to the changes we've introduced to the Gridicon block, we'll also need to update modules/search/instant-search/components/test/notice.test.js to include aria-hidden and focusable attributes.

Travis is failing due to this discrepancy.

@bluefuton bluefuton added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Oct 13, 2020
@bluefuton
Copy link
Contributor Author

Due to the changes we've introduced to the Gridicon block, we'll also need to update modules/search/instant-search/components/test/notice.test.js to include aria-hidden and focusable attributes

Good spot! I've updated the Jest snapshot. I used:

./node_modules/jest/bin/jest.js modules/search/instant-search --updateSnapshot

jsnmoon
jsnmoon approved these changes Oct 15, 2020
View reviewed changes
Copy link
Contributor

@jsnmoon jsnmoon left a comment

Choose a reason for hiding this comment

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

🚢

@jeherve jeherve added this to the 9.1 milestone Oct 19, 2020
@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Team Review labels Oct 19, 2020
@bluefuton bluefuton merged commit 6643aa6 into master Oct 19, 2020
@bluefuton bluefuton deleted the instant-search-close-button-a11y branch October 19, 2020 21:20
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Oct 19, 2020
jeherve added a commit that referenced this pull request Oct 27, 2020
@jeherve
Changelog: add #17294
5ebe26e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeherve jeherve jeherve approved these changes

@jsnmoon jsnmoon jsnmoon approved these changes

Assignees

@bluefuton bluefuton

Labels
[Feature] Search For all things related to Search [Focus] Accessibility Improving usability for all users (a11y) Touches WP.com Files
Projects
None yet
Milestone
9.1
Development

Successfully merging this pull request may close these issues.
5 participants
@bluefuton @matticbot @jetpackbot @jsnmoon @jeherve