[buddypress-trac] [BuddyPress Trac] #8270: Hello BuddyPress 6.0.0

[buddypress-trac]

#8270: Hello BuddyPress 6.0.0
----------------------------------------------------+---------------------
 Reporter:  imath                                   |       Owner:  (none)
     Type:  task                                    |      Status:  new
 Priority:  normal                                  |   Milestone:  6.0.0
Component:  Core                                    |     Version:
 Severity:  normal                                  |  Resolution:
 Keywords:  dev-feedback has-screenshots has-patch  |
----------------------------------------------------+---------------------

Comment (by mercime):

 Attached 8270.a11y-2.patch:
 - Changed `h2` heading of "BuddyPress 6.0.0" to an `h1` heading. Each
 modal is like a new document and each should have a `h1` heading so
 unsighted users via screen readers know what the new document is all
 about.
 - Ported style from `h2` style of the Plugin detail modal to our `h1`
 heading.
 - Added `role="document"` to inner modal container to facilitate `browse
 mode` for NVDA, JAWS, and other assistive technologies which have that
 mode.

 Tested 8270.a11y.patch. Thanks @imath. While it worked on TABs, it didn't
 work on SHIFT+TABs because it escaped the modal container and proceeded to
 wp-admin's footer links. One solution would be at core's
 [https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/admin
 /plugin-install.js plugin-install.js].

 Our modal's `$firstTabbable` is the close button element based on viewing
 the code. My bad, during the meeting, I didn't look at the source code but
 only went by what I saw without testing it with a11y tools :(

 Following `gif` shows tabbing and shift+tabbing through the Hello
 BuddyPress modal. As you will see, that when I continue SHIFT+TAB,
 eventually the keyboard escapes the modal area, to the footer links of the
 wp-admin screen.

 [[Image(https://cldup.com/vZaCn0GoyB.gif)]]

 Compare it with how tabbing or shift+tabbing is constrained within the
 plugin details modal below:

 [[Image(https://cldup.com/daJEP2CpdJ.gif)]]

 Below is a comparison between our modal and the plugin detail modals of
 the tabbable elements and how keyboad is rightly trapped within plugin
 modal until  user closes the modal with the close button.

 [[Image(https://cldup.com/M66NTVy0qS.jpg)]]

 Following is the a11y status of the modal at this stage:
 **OK** --- On opening the modal, set focus. Focus was set on the close
 button, which is the first tabbable element of the modal.
 **OK** --- While modal is open, TAB forward works within the modal only
 until modal is closed.
 not yet --- While modal is open, SHIFT+TAB works within the modal only
 until modal is closed.
 not yet --- When you close the modal, return focus to the last focused
 element (link that opened the modal).

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/8270#comment:20>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac