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.

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

Accessibility: Improve Welcome guide and modal component. #19261

Merged
merged 1 commit into from Dec 20, 2019

Conversation

@MarcoZehe
Copy link
Contributor

MarcoZehe commented Dec 19, 2019

Description

Improved the welcome guide so that it labels the modal it creates through the guide component via an unobtrusive aria-label, using the contentLabel property defined in modal. The Guide component now accepts and passes on that contentLabel prop. Normally, it should visually label the modal via title, as title is the required attribute for Modal. But to be unobtrusive, I chose to use the not required contentLabel instead, but make that required for Guide so the modal dialog at least always gets an accessibility label.

I also adjusted the page control to indicate via aria-current which of the pages is the currently active one.

Furthermore, the modal's content block is now a role "document" so screen readers can view it like web content. This makes it easier to review text inside.

Adjusted documentation and story.

Fixes #19078 .

How has this been tested?

Tested in Story Book to make sure the contentLabel gets added to the modal. Tested the page control so it exposes the current page via aria-current. Also tested that the contents is rendered as a virtual document for screen reader users.

Screenshots

Types of changes

Bug fix.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Dec 20, 2019

Looks good to me

@ellatrix ellatrix merged commit 4108636 into WordPress:master Dec 20, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@MarcoZehe MarcoZehe deleted the MarcoZehe:fix/19078 branch Dec 21, 2019
@youknowriad youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.