WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#50322 closed defect (bug) (fixed)

Site Health "copy info" button: fix focus loss and other improvements

Reported by: afercia Owned by: afercia
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-patch commit has-screenshots
Focuses: accessibility Cc:

Description

While reviewing #48463 I looked into this implementation of ClipboardJS and noticed a few things to fix or improve:

  • go to the Site Health > Info page
  • use the Tab key and navigate to the "Copy site info to clipboard" button
  • press Enter
  • observe focus isn't on the button any longer
  • actually, focus moved to the visually hidden textarea used by ClipboardJS
  • ClipboardJS provides events to implement custom behaviors, see https://clipboardjs.com/#events for an example
  • the built-in clearSelection() function is meant to clear the selection and move focus back to the button that triggered the copy action
  • this method should have been used since the beginning...
  • ...if it only worked... actually it's buggy and I created a new issue upstream, see https://github.com/zenorocha/clipboard.js/issues/680
  • for now, the buggy behavior can be remediated by moving focus back in the site health implementation

Additionally:

  • the "Copied!" text used for visual feedback stays there indefinitely
  • if users click a second or third time or more, actually there's no _new_ feedback because the previous text is still there
  • I'd like to propose to make this text disappear atter a few seconds since last successful copy action
  • the CSS could be slightly simplified

I'd like to propose to fix this for 5.5 so that there's a good implementation example that can be used in other places in core. For now, there will be 2 maybe 3 cases where a "Copy" button is going to be used so I don't think it's really necessary to abstract this into some reusable code. If more use cases will arise in the future, some abstraction would be welcome.

Attachments (5)

50322.diff (3.4 KB) - added by afercia 5 months ago.
final_5eda48aeaa3041001560ecca_569889.mp4 (137.7 KB) - added by audrasjb 5 months ago.
Before: focus loss
61e49f369ee07daac7a909ad0d5a9594.mp4 (666.3 KB) - added by audrasjb 5 months ago.
After: focus kept, so we can continue to the next selectable DOM element
50322 tabbing to the textarea.png (120.9 KB) - added by afercia 5 months ago.
50322.2.diff (3.6 KB) - added by afercia 5 months ago.

Download all attachments as: .zip

Change History (21)

@afercia
5 months ago

#1 @afercia
5 months ago

  • Keywords has-patch commit added; needs-patch removed

50322.diff:

  • uses the clearSelection() function from ClipboardJS
  • moves focus back to the trigger button to remediate https://github.com/zenorocha/clipboard.js/issues/680
  • uses setTimeout / clearTimeout to hide the "Copied!" visual feedback after 3 seconds since last successful copy action
  • minor JS coding standards
  • simplifies the CSS

To Test:

  • patch and build
  • repeat the steps in the ticket description
  • observe focus is moved back to the Copy button (actually it's so fast that it can't be perceived visually)

#2 @afercia
5 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@audrasjb
5 months ago

Before: focus loss

@audrasjb
5 months ago

After: focus kept, so we can continue to the next selectable DOM element

#3 @audrasjb
5 months ago

Patch works great, see video screens above.

#4 @audrasjb
5 months ago

  • Keywords has-screenshots added

#5 @afercia
5 months ago

One more problem with ClipboardJS is that is that the visually hidden textarea used to actually select and copy the text stays there in the DOM right before the closing </body> tag.

This way it's still focusable, can be navigated to via keyboard, and it's perceived and announced by screen readers when arrowing or when using other shortcuts to jump to form elements. See screenshot below.

To reproduce using the keyboard:

  • press the Tab key to go to the "Copy site info..." button
  • press Enter
  • focus is moved to the visually hidden textarea
  • press Shift + Tab to navigate back to the "stay updated" link in the admin footer
  • press Tab: you just navigated to the visually hidden textarea
  • press Tab again: keyboard navigation start from scratch (browser chrome then the document)

@afercia
5 months ago

#6 @afercia
5 months ago

50322.2.diff uses internal ClipboardJS methods to remove the visually hidden textarea after 3 seconds since the last successful copy action.

ClipboardJS takes care to re-add the textarea back each time the Copy button is clicked to the functionality works as expected.

Ideally, this should be reported upstream. Will do as soon as I have some time.

#7 @afercia
5 months ago

Previously: #46647.

#8 @afercia
4 months ago

For the records: I created this upstream issue: https://github.com/zenorocha/clipboard.js/issues/684 to propose to remove the visually hidden textarea that lingers in the DOM after a successful copy action.

#9 @afercia
4 months ago

Some testing would be nice :) Pinging @SergeyBiryukov as 5.5 release squad Core Tech
See also #48463 and #50335.

This ticket was mentioned in Slack in #core-site-health by afragen. View the logs.


4 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

#12 @Clorith
4 months ago

This looks good, no breakage and I agree with the sentiment on the copied text being hidden again after a short while to make sure the indication exists for future requests as well, I'm happy for this to go in.

#13 @afercia
4 months ago

In 48232:

Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.

For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time.
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.

Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.

#14 @afercia
4 months ago

Thanks @Clorith 👍

#15 @afercia
4 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 48233:

Accessibility: Site Health: Improve the "Copy site info" button accessibility.

  • avoids a focus loss when clicking the "Copy site info" button
  • uses setTimeout() and clearTimeout() to properly handle the "Copied!" text
  • minor JavaScript coding standards

Props audrasjb, Clorith, afercia.
See #48463, #50335.
Fixes #50322.

#16 @afercia
4 months ago

In 48234:

Accessibility: Privacy: Accessibility improvements for the Privacy Policy Guide page.

Improves accessibility of the "Copy this section" button and "Return to Top" link:

  • uses setTimeout() and clearTimeout() to properly handle the "Copied!" text
  • simplifies the button text by removing the redundant visually hidden text
  • fixes the mismatching visual and DOM order of the Copy button and the "Return to Top" link
  • improves the "Return to Top" links by providing real page fragment identifiers, when possible
  • hides the "Return to Top" up arrow from assistive technologies
  • minor coding standards

Props afercia, garrett-eclipse.
See #48463, #50322.
Fixes #50335.

Note: See TracTickets for help on using tickets.