Make WordPress Core

Opened 18 months ago

Closed 17 months ago

Last modified 17 months ago

#50335 closed defect (bug) (fixed)

Privacy Policy Guide page: Improvements for the Copy button

Reported by: afercia Owned by: afercia
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.5
Component: Privacy Keywords: has-screenshots has-patch commit
Focuses: accessibility, javascript Cc:


I'd like to propose a few improvements for the "Copy" button in the Privacy Policy Guide page:

  1. The timeout used to make the "Copied!" text isn't cleared
  2. The Copy button visible text and screen-reader-text are a bit too verbose
  3. The Copy button and the "Return to Top" visual order and DOM order don't match
  4. Maybe consider to use ClipboardJS rather than a custom implementation

When clicking the Copy button, a "Copied!" text appears to provide a visual confirmation. A setTimeout() is used to make this text disappear after 3 seconds. However, the timeout isn't cleared. When users click the Copy button multiple times within the 3 seconds interval, the text appearing / disappearing behavior becomes... interesting because a new timeout is set at each click. See first animated GIF attached below.

While this is an edge case, it's also easy to fix. Also, as a best practice setTimeout() should be used with care and in most cases needs to be cleared.

I do realize the good intent by providing some screen-reader-text for the button. However, the whole text string made of the visible and hidden text is too verbose and a bit redundant. Each time screen reader users will land on this button and each time they activate it they will hear the whole text being announced:

Copy this section to clipboard Copy suggested policy text from WordPress.

See second animated GIF attached below.

I'd just simplify and remove the screen-reader-text.

According to the W3C Web Content Accessibility Guidelines, visual order and DOM order must always match when the sequence "affects meaning or operation".

In this page, the "Return to Top" link is visually presented after the Copy button but in the source it's before the button. Thus, keyboard navigation can be confusing for users. I don't see a special reason why "Return to Top" should come first in the source so I'm guessing it's just a matter of moving it in a more correct order. Also, I'd tend to think a "Return to Top" link should always come after any other control related to a specific page.

1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG21/#meaningful-sequence
2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG21/#focus-order

Lastly, I'd like to propose to consider to use ClipboardJS rather than a custom implementation. ClipboardJS would allow for a simpler implementation even if it needs a couple fixes for better accessibility. See #50322 and ticket:48463#comment:38

Attachments (5)

privacy guide copy multiple clicks.gif (190.2 KB) - added by afercia 18 months ago.
Clicking the Copy button multiple times: observe the "Copied!" text behavior
privacy guide copy message.gif (166.0 KB) - added by afercia 18 months ago.
Copy button visible and visually hidden text announced by screen readers
50335.diff (8.2 KB) - added by afercia 18 months ago.
50335.2.diff (8.2 KB) - added by afercia 18 months ago.
50335.3.diff (8.2 KB) - added by afercia 17 months ago.

Download all attachments as: .zip

Change History (19)

18 months ago

Clicking the Copy button multiple times: observe the "Copied!" text behavior

18 months ago

Copy button visible and visually hidden text announced by screen readers

#1 @garrett-eclipse
18 months ago

Thanks @afercia I'll look through when I can. Just sharing some related tickets for background;
#44588 - We attempted ClipboardJS but reverted back in order to preserve formatting and not require another element or attribute to contain a stripped down version of the content.
#44677 - We changed the button text to 'Copy this section to clipboard' to be explicit.
#49540 - Fixed a quick regression after the above tickets were merged.

18 months ago

#2 @afercia
18 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Version set to trunk

Thanks @garrett-eclipse, I went through #44588 and now have a better understanding of all the bits around this functionality.

I'd say to start simple :) 50335.diff:

Regarding keeping the formatting in the copied text: I do think ClipboardJS can do that when set up correctly. I saw on #44588 that data-clipboard-target was already tried. There's also the option to pass a DOM element, see https://github.com/zenorocha/clipboard.js#advanced-options. Also, ClipboardJS has an internal method to clear the selection that can be used after a successful copy action so the "highlighted" text can be de-selected.

I'd still lean towards trying ClipboardJS. Internally, it uses the same methods used in this custom implementation so I don't see a reason to not use it :) The advantage is that it does that in a more standardized way. Also to evaluate: a WP wrapper method around ClipboardJS as mentioned in #50322. Noting that also @xkon mentioned moving to ClipboardJS should still be a goal and at that time it was postponed to a future ticket yet to come. I'd reserve this attempt to a next iteration on this ticket.

Aside: any reason why the privacy CSS is in the edit.css file? common.css seems more appropriate to me.

#3 @afercia
18 months ago

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

#4 @afercia
18 months ago

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

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

18 months ago

#6 @audrasjb
18 months ago

  • Keywords needs-refresh needs-testing added

Marking for refresh as the patch doesn't apply cleanly anymore.

18 months ago

#7 @afercia
18 months ago

  • Keywords needs-refresh removed

The patch still applied for me, using grunt patch with only 1 line offset in edit.css. Usually, this kind of issues aren't a big concern and can be checked during commit, if needed. I refreshed the patch anyways.

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

18 months ago

#9 @afercia
18 months ago

  • Keywords commit added; needs-testing removed

#10 @afercia
17 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.

#11 @afercia
17 months ago

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.

17 months ago

#12 @afercia
17 months ago

50335.3.diff refreshes the patch. Keeps the custom implementation. I'd still think this button should use ClipboardJS for a consistent implementation in core, but that can be explored in future iterations.

#13 @afercia
17 months ago

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

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.

#14 @afercia
17 months ago

In 48236:

Fix Privacy tests after [48234].
See #50335.

Note: See TracTickets for help on using tickets.