JavaScript code for adding bookmarklet Press This is hard to access with keyboard only

[rianrietveld]

In Tools ( /wp-admin/tools.php ) you have to click right on "Press this" to see the Javascript for adding the bookmarklet Press This if you can’t drag-drop.
Right click is complicated when you use only a keyboard on a Mac without using Voice Over.
Why not show the code by default or provide an easier way to hide/display the textarea.

[joedolson]

The code is already present in a hidden textarea; but assigning display none makes it unavailable. All this patch does is remove the style attribute so that the field is available by default.

It's also an option to attach some basic show/hide toggling to this, but the page is hardly crowded, so it's not a priority. However, showing the code is on the ugly side!

[joedolson]

Show press this button code

[afercia]

What about a dedicated button?

[afercia]

With "Copy" button.

[azaozz]

Having a button that reveals the hidden textarea containing the bookmarklet code seems good for both touchscreen/mobile and keyboard accessibility.

In 28873.3.patch: cleaned up a bit 28873.2.patch, made it to slideToggle so it doesn't jump, and "closable" when the button is clicked again.

[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

[azaozz]

28873.4.patch looks good. Couple of things:

• If we need IDs for aria, we can remove the classes (don't see the pressthis-code-wrap ID used anywhere).
• If the animation (slideToggle) is "messing up" with the keyboard navigation/accessibility, we can remove it. Usually "jumpy" UI is worse UX, but...

These changes also need to be added to options-writing.php. The Press This button/link is shown in two places :)

[afercia]

Replying to azaozz:

• If we need IDs for aria, we can remove the classes

I've considered that but didn't want to change your code too much :) will do

• If the animation (slideToggle) is "messing up" with the keyboard navigation/accessibility, we can remove it.

No issues with keyboard accessibility, just a little "jumpy" should be fixed now see CSS

These changes also need to be added to options-writing.php. The Press This button/link is shown in two places :)

Will do.

[afercia]

Updated patch to address @azaozz considerations.
Additionally:

• didn't touch the button styles, there's ongoing discussion about this
• don't see a good reason to move focus on the textarea, it causes more problems than it helps solve
• the bookmarklet code now gets selected on focus and on click
• the aria-expanded attribute needs to be changed immediately, not after animation completes (noticed ChromeVox won't get the attribute value changed otherwise)

Edit:
we can't change the "Press This" link text because it will be used as bookmark name.

[stephdau]

How are we doing, now that #31373 (revamped Press This) has been merged? We've taken this ticket in consideration when developing the new version and screens.

[afercia]

Hi @stephdau thanks. In the revamped tools page I'd just change two very small details to make text more clear when read out of context and address the "apostrophe" issue in translatable string, e.g. device’s bookmarks instead of device\'s bookmarks. See attached new patch. Then I'd say this could be closed and new issues reported in the main ticket: #31373 or new tickets if there are no objections.

[afercia]

minor text improvements and apostrophe

[afercia]

Updated patch, fixing English grammar.

[stephdau]

Thanks afercia. :)

[helen]

@afercia Patch seems to need a refresh, also take a look at the double quotes while you're in there :) “press”.

[afercia]

Refreshed :)

[helen]

Should Copy Press This Bookmarklet's code be Copy Press This Bookmarklet Code? Doesn't really need the possessive, and the mixed capitalization feels weird.

[marcelomazza]

Replying to helen:

Should Copy Press This Bookmarklet's code be Copy Press This Bookmarklet Code? Doesn't really need the possessive, and the mixed capitalization feels weird.

Speaking about that, someone sometime mentioned quoting both Press This words, to avoid reading the phrase as "Copy Press, This Bookmarklet Code". I think the suggestion was:

Copy "Press This" Bookmarklet Code

[stephdau]

Replying to marcelomazza:

"Copy Press, This Bookmarklet Code"

That was me, and I find the quoted version better.

[afercia]

Yup capitalization is mixed, sorry for that. Thinking maybe there's a bit too much capitalization in WordPress :) and maybe I'm not alone with this feeling. For example, things like this:

Log Out of All Other Sessions

are a bit too much for me :) Anyway, please let me know about quotes, I would do it this way:

copy "Press This" bookmarklet code

[afercia]

Refreshed :) Worth nothing that string is now used as a screen-reader-text so is not visible.

[azaozz]

In 31768:

PressThis: improve translatable strings on the Tools screen.
Props: afercia. See #28873.

[azaozz]

I believe this is fixed now. Feel free to reopen if revealing the bookmarklet JS is still a problem.