Skip to:
Content

BuddyPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#7835 closed defect (bug) (fixed)

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

Reported by: mercime's profile mercime Owned by: djpaul's profile djpaul
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: Core Keywords: has-patch has-screenshots
Cc:

Description (last modified by 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.

Attachments (3)

7835.patch (19.0 KB) - added by mercime 6 years ago.
7785-welcome-screen-aft.gif (246.2 KB) - added by mercime 6 years ago.
Welcome screen after patch - excuse the jumpiness of recording at the beginning
7835.2.patch (19.0 KB) - added by mercime 6 years ago.
My bad, it's BP Nouveau, not Bp Nouveau, yikes

Download all attachments as: .zip

Change History (11)

@mercime
6 years ago

@mercime
6 years ago

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

#1 @mercime
6 years ago

  • Keywords has-patch has-screenshots added

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.

Last edited 6 years ago by mercime (previous) (diff)

#2 @mercime
6 years ago

  • Description modified (diff)

@mercime
6 years ago

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

#3 @DJPaul
6 years ago

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.

#4 @DJPaul
6 years ago

  • Milestone changed from Awaiting Review to 3.0

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.

#5 @DJPaul
6 years ago

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 😞

#6 @djpaul
6 years ago

  • Owner set to djpaul
  • Resolution set to fixed
  • Status changed from new to closed

In 12095:

Admin, Welcome screen: accessibility improvements.

Fixes #7835

Props to mercime for the initial patch.

#7 @djpaul
6 years ago

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

#8 @djpaul
6 years ago

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

Note: See TracTickets for help on using tickets.