[wp-trac] [WordPress Trac] #50322: Site Health "copy info" button: fix focus loss and other improvements

[WordPress Trac]

#50322: Site Health "copy info" button: fix focus loss and other improvements
---------------------------+-------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  5.5
Component:  Site Health    |    Version:  5.2
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:  accessibility  |
---------------------------+-------------------------
 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.

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