Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Accessibility: Improve Welcome guide and modal component. #19261
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.
Types of changes