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

[afercia]

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.

[afercia]

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)

[audrasjb]

Before: focus loss

[audrasjb]

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

[audrasjb]

Patch works great, see video screens above.

[afercia]

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]

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.

[afercia]

Previously: #46647.

[afercia]

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.

[afercia]

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

[Clorith]

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.

[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]

Thanks @Clorith 👍

[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]

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.