[wp-trac] [WordPress Trac] #50335: Privacy Policy Guide page: Improvements for the Copy button

[WordPress Trac]

#50335: Privacy Policy Guide page: Improvements for the Copy button
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:  (none)
     Type:  defect (bug)               |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Privacy                    |    Version:
 Severity:  normal                     |   Keywords:  has-screenshots
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/50335>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform