[wp-trac] [WordPress Trac] #34867: Introduce a CSS class which identifies elements that are either links or buttons depending on JS presence

WordPress Trac noreply at wordpress.org
Mon Dec 14 22:19:22 UTC 2015


#34867: Introduce a CSS class which identifies elements that are either links or
buttons depending on JS presence
-------------------------------------+-------------------------------------
 Reporter:  mcapybara                |       Owner:  afercia
     Type:  enhancement              |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.5
Component:  Administration           |     Version:  4.4
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots                        |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * status:  new => assigned
 * focuses:  ui, accessibility, javascript, administration => ui,
     accessibility, javascript
 * owner:   => afercia
 * version:  trunk => 4.4
 * milestone:  Awaiting Review => 4.5
 * keywords:  has-patch => has-patch has-screenshots


Comment:

 I'd strongly recommend this improvement: it's simple and effective. Just
 one line of JavaScript which provides a reusable solution that can be used
 in all similar cases across the admin.
 For a detailed description of the issue, please refer to the mentioned
 comment and ticket:
 https://core.trac.wordpress.org/ticket/26504#comment:28

 Looking back at this after WordCamp US 2015 the only thing I'd consider to
 improve is changing the CSS class name from `button-if-js` to  `aria-
 button-if-js` because that's what it does. :)

 The patch introduces also a first implementation on the Categories and
 Tags screens. Tested with Firefox+NVDA, the "Quick Edit" and "Delete"
 links (they act as buttons when JavaScript is on) are no more reported as
 links but as... buttons! See in the screenshot below, before and after the
 patch:

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

 When navigating through elements, NVDA reads out:
 {{{
 before:

 Edit link
 Quick Edit link
 Delete link
 View link

 after:

 Edit link
 Quick Edit button
 Delete button
 View link
 }}}

 I'd like to outline that this is not just about abstract semantics. "Edit"
 and "View" being announced as links let users understand they will land on
 a new page while "Quick Edit" and "Delete" being announced as buttons will
 let them understand they "do" something.

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


More information about the wp-trac mailing list