Accessibility: Improve Welcome guide and modal component. #19261
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: