[wp-trac] [WordPress Trac] #34484: WP oEmbed: Sharing dialog accessibility improvements

[WordPress Trac]

#34484: WP oEmbed: Sharing dialog accessibility improvements
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Embeds                         |    Version:  trunk
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 When a [https://make.wordpress.org/core/2015/10/28/new-embeds-feature-in-
 wordpress-4-4/ WordPress oEmbed] gets rendered in a page, it has a button
 to open a "Sharing dialog" with options to share the embedded post. The
 dialog's content is split in two "tabs", happy to see this because it's
 maybe the first working example of an [http://www.w3.org/TR/wai-aria-
 practices/#tabpanel ARIA tabpanel widget] in WordPress.

 The dialog itself and a couple of things about the tabs can be further
 improved for accessibility. First thing I've noticed, the tab panels are
 "labelled" by the tabs but one of the `aria-labelledby` has a value that
 refers to a non-existing ID:

 [[Image(https://cldup.com/67bIa5ubaj.png)]]

 Not a big deal, just needs to be changed and use the right value but
 testing with Firefox + NVDA I've noticed a weird thing: the tabs are
 always announced as "1 of 1" and I really have no idea where that
 "property page" being announced comes from:

 [[Image(https://cldup.com/TtZCJHu0q9.png)]]

 Honestly, I have no idea why Firefox/NVDA fail here. Since the tab panels
 content is made by a form input and a textarea, users land directly inside
 them and there isn't the need to "label" the panels. I'd propose to remove
 the IDs and the `aria-labelledby` attributes. Looks like this fixes the
 weird Firefox/NVDA behavior.

 Additional improvements to consider:
 - add `role="dialog"` and an `aria-label` attribute to the dialog
 - associate input/textarea fields with their descriptions using `aria-
 describedby`
 - give initial focus to the current Tab, this may need some JavaScript
 optimization but the issue here is the current Tab needs to be checked
 each time
 - buttons with a `type="button"` don't need `preventDefault()` because
 there's no default action to prevent
 - constrain tabbing within the modal dialog

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34484>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform