[wp-trac] [WordPress Trac] #47149: Tab structure does not use tab semantics

[WordPress Trac]

#47149: Tab structure does not use tab semantics
-------------------------------------+-------------------------------------
 Reporter:  anevins                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  wpcampus-report has-     |     Focuses:  accessibility,
  screenshots semantic-buttons       |  javascript
  needs-design-feedback has-patch    |
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:
     wpcampus-report has-screenshots semantic-buttons needs-patch needs-
     design-feedback
     =>
     wpcampus-report has-screenshots semantic-buttons needs-design-feedback
     has-patch


Comment:

 Pending design feedback on the menu in the responsive view,
 [attachment:"47149.5.diff"] is a functional patch that implements the ARIA
 tabs pattern on both the left menu and the Upload/Library menu (called the
 "router" according to the Media Views conventions).

 The patch looks good to me and I'd greatly appreciate some accessibility
 testing. Some bits in the patch necessarily target DOM elements: maybe it
 could be improved in a bit more "backbonish" way. If anyone is willing to
 introduce improvements, that'd be very welcome. I tried to keep the DOM-
 related methods as much isolated as possible.

 This patch is also a good step forward in making the `FocusManager` a more
 general and powerful tool to handle focus management in the media views.

 To test, you may want to activate the Classic Editor plugin to easily
 access all the media modal views.

 Please test desktop and mobile views on ''at least'' these cases:

 **The "Post" modal dialog:**
 - one of the main modal views e.g. "Add Media", "Create Gallery", "Create
 Audio Playlist", "Featured Image"
 - on these views, test also switching the inner tabs "Upload Files" and
 "Media Library"
 - test one or more of the sub-views e.g. "Edit Gallery", "Add to Gallery"
 - the "Insert from URL" view is a special case because the "Upload Files"
 and "Media Library" tabs are hidden there thus the inner tabpanel
 shouldn't be present, please check

 **The "Set featured image" modal dialog:**
 - on this modal the main tabs are hidden so the main tabpanel shouldn't be
 present

 **The modal dialogs that open from the Customizer:**
 - e.g. Site Icon or Header Media (depending on the active theme)

 **The modal dialogs that open from Gutenberg:**
 - e.g. the Image block and the Gallery block
 - for example, in the modal that opens from the Gallery block the main
 tabs have only one tab: this is specific to the Gutenberg implementation
 and can't be changed. The ARIA pattern works correctly even if it doesn't
 make much sense for just one tab.

 Optionally: any other media modal dialog using a different "frame".

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47149#comment:34>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform