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