Make BP 3.0 Welcome Screen accessible for keyboard-only and screen reader users

[mercime]

Our new welcome screen rendered via a modal is not immediately available nor accessible for keyboard and screen reader users.

For keyboard users: they will have to tab endlessly (while they see the focus behind the modal backdrop on the wp-adminbar and wp-menubar and flyouts, current wp-admin screen) before they see the focus on the 'Close' link, the first focusable element of the Welcome Screen modal.

For screen reader users: Since a screen reader announces content read from source code from top to bottom, they will be confused why they can hear nothing about "Hello, BuddyPress" for the longest time, i.e., if ever they will even wait to hear it as they would have expected the BP screen info to be announced right away but instead they hear the adminbar, the wp-menu, and the wp-admin screen they are currently on first.

Patch coming up.

[mercime]

Welcome screen after patch - excuse the jumpiness of recording at the beginning

[mercime]

Enhancements added in 7835.patch​

Markup

• Add dialog role and aria-labelledby modal h1 title to outer modal container for screen reader users
• Add document role to inner modal container to facilitate browse mode for NVDA, JAWS, and other assistive technologies which have that mode
• Change empty link, title attr, and string for "Close pop-up" to button element with bp-tooltip class, bp-data-tooltip attr, and "Close modal"
• Change alt value of image to 'Bp Nouveau, the new Template Pack' - only assuming what the image which will be replacing the placeholder image will be
• Replaced title attr of Twitter and BP Support Forums links by adding 'bp-tooltip class and bp-data-tooltip` attr.

CSS

• Add support for BP tooltips on the bottom left and top right side positions
• Add browser support for hello.css

JavaScript

• Set initial focus to first natively focusable element in modal - the close button (nee empty link)
• Add keyboard management within BP Hello modal to constrain tabbing within modal

7785-welcome-screen-aft.gif​ - shows how tabbing is contained in modal while it is open.

[mercime]

My bad, it's BP Nouveau, not Bp Nouveau, yikes

[DJPaul]

A problem I have with this is the design of the modal's close button is changed. It's intended to be an X, not an X with a button border around it.

[DJPaul]

The value of the changes in the attached patch is greater than the design change of the button, so I'm going to add it in.
I'll have to spend extra time in the subsequent release to correct the "x" styling.

[DJPaul]

I can't get document.querySelectorAll( '#adminmenumain, #wpcontent, #wpfooter' ).setAttribute( 'aria-hidden', true ); working locally - "Uncaught TypeError: document.querySelectorAll(...).setAttribute is not a function" - which is pretty odd. I can only assume it's being called before one of the target DOM elements are created, but 😞

[djpaul]

In 12095:

Admin, Welcome screen: accessibility improvements.

Fixes #7835

Props to mercime for the initial patch.

[djpaul]

In 12101:

Admin, Welcome screen: revert the changes to the "esc" handler in r12095.

The change was causing the modal to only close if the modal had focus.

See #7835

[djpaul]

In 12102:

Admin, Welcome screen: revert the changes to the "esc" handler in r12095.

The change was causing the modal to only close if the modal had focus.

See #7835