Privacy Policy Guide page: Improvements for the Copy button

[afercia]

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

1
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.

2
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.

3
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.

References;
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

4
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

[afercia]

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

[afercia]

Copy button visible and visually hidden text announced by screen readers

[garrett-eclipse]

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.

[afercia]

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​:

• clears the timeout when clicking the button
• minor JS coding standards
• makes the visual order match the DOM order
• improves the return-to-top link: link should never use a href attribute with only a #: that's just an incomplete URL fragment identifier, see the accessibility coding standards ​https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/#semantics-for-controls
• removes the redundant screen-reader-text
• hides the up arrow ↑ as it was unnecessarily announced by screen readers

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.

[afercia]

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

[audrasjb]

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

[afercia]

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.

[afercia]

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.

[afercia]

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.

[afercia]

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.

[afercia]

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.

[afercia]

In 48236:

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