[wp-trac] [WordPress Trac] #28873: JavaScript code for adding bookmarklet Press This is hard to access with keyboard only

[WordPress Trac]

#28873: JavaScript code for adding bookmarklet Press This is hard to access with
keyboard only
------------------------------------+------------------------------
 Reporter:  rianrietveld            |       Owner:
     Type:  defect (bug)            |      Status:  new
 Priority:  normal                  |   Milestone:  Awaiting Review
Component:  Press This              |     Version:  3.8
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch dev-feedback  |     Focuses:  accessibility
------------------------------------+------------------------------

Comment (by afercia):

 Tested patch .3 with Firefox + NVDA and IE 8 + JAWS 15, works and we can
 make it even better. I would propose a few changes. The main issue is
 about focus when closing the revealed panel:
 - in Firefox: close the panel, focus stays in place, tab again and focus
 goes to the "Categories and Tags Converter" link. That's fine.
 - in Chrome: close the panel, focus is lost, tab again and the tab
 sequence starts over from the body

 I think that's because focus is moved to the sliding panel even when the
 animation slides up: when the animation is complete, the element is hidden
 and there's no element to focus anymore. Browser's behavior differs here
 and we know Firefox handles focus better than Chrome. The updated patch
 moves focus just when sliding down.

 Added also aria states and properties, screen readers will now announce
 the expanded/collapsed status and the instructions provided. Used `aria-
 labelledby` instead of `aria-describedby` to make JAWS read out the
 instructions *before* the 3286 characters of code :) `aria-describedby`
 gets read out *after*.

 Added 1 sec. timeout before moving focus to give screen readers the time
 to announce "expanded".

 The following example is what NVDA reads out now:

 > Copy Press This code
 > button  collapsed
 [press Enter]
 > expanded
 > Press This code  edit  read only  multi line
 > Copy the selected code below, open your Bookmarks manager, create new
 bookmark, type Press This into the name field and paste the code into the
 URL field.
 > selected 3286 characters

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