[wp-trac] [WordPress Trac] #31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php

[WordPress Trac]

#31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.8
Component:  Widgets                  |     Version:  4.1
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch semantic-      |     Focuses:  ui, accessibility,
  buttons commit                     |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-patch ui-feedback needs-refresh semantic-buttons => has-
     patch semantic-buttons commit


Comment:

 Refreshed patch. After recent changes to the `button-link` CSS class in
 [40052], [40059], and [40358] the CSS part is a bit simplified. To recap:
 - makes some links in buttons
 - uses `aria-expanded` to announce the state of the toggle buttons
 - changes two `#f00` red in `#dc3232`, see #35622
 - increases a bit the clickable area of the widget toggles
 - ensures the "circular focus" doesn't get cut-off in some browsers by
 centering the toggle arrows within the button
 - wraps a `<span>` element with an `aria-hidden` attribute around the
 toggle CSS generated icon as already done, for example, for the customizer
 menu, see comment:7
 - standardizes on `.toggle-indicator:before` rather than `:after`

 Note: testing with screen readers, seems NVDA has troubles in announcing
 the `aria-expanded` state change when a JS animation is running or a CSS
 class gets applied on an ancestor element; the order in which DOM changes,
 JS animations, and the `aria-expanded` change run, does matter and
 shouldn't be changed. Added a couple inline comments.

 In the customizer, the widgets "Remove" and "Close" controls are now
 underlined, this matches other controls and should be ok based on this
 @celloexpressions (ping!) [[ticket:35126#comment:13|comment on 35126]].
 Screenshot:
 [[Image(https://cldup.com/GwFmZ8wPny.png)]]

 There's room for further enhancements, they should go in separate tickets.
 For example, other elements in the widgets screen are still not fully
 operable with a keyboard. Also, it would be nice to have a standardized
 CSS class for the "circular focus".

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