[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:  needs-patch wpcampus-report has-     |     Focuses:
  screenshots semantic-buttons                   |  accessibility
-------------------------------------------------+-------------------------
Changes (by afercia):

 * owner:  audrasjb => afercia
 * status:  accepted => assigned


Comment:

 I'm looking into this and working on a patch. In the media views, the
 `Menu` view generates both the menu on the left sidebar and the horizontal
 menu (called `media-router`, not sure why):

 [[Image(http://cldup.com/jR381xmXaL.png)]]

 The left menu should be a vertical ARIA tabbed interface as well, so it
 makes sense to change both menus. Worth reminding it's not just a matter
 of adding some ARIA roles. ARIA tabs need to implement a specific keyboard
 interaction pattern, see details in the [https://www.w3.org/TR/wai-aria-
 practices-1.1/#tabpanel ARIA Authoring Practices].

 I'm almost done with the interaction part. The main problem now is to add
 the required roles and attributes

 Both the menus and the content update "on the fly" and this makes
 difficult to add IDs referencing the correct views. I'd tend to think this
 part would need a workaround.

 These are the parts that are a bit tricky to implement:
 - Each element with role `tab` has the property `aria-controls` referring
 to its associated `tabpanel` element.
 - Each element that contains the content panel for a `tab` has role
 `tabpanel`.
 - Each element with role `tabpanel` has the property `aria-labelledby`
 referring to its associated `tab` element.

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