The new "copy block" action triggers a focus loss

[afercia]

Describe the bug

In WordPress 5.5, the block editor has a new feature to copy the block content. When using a keyboard, activating the "Copy" button triggers a focus loss: focus is lost and the tab sequence starts over from the document root.

Focus losses are one of the worst experiences for keyboard users and assistive technologies users, as any previous context is lost and users are forced to navigate again though great part of the UI to get back to the previous position.

To reproduce

• in WordPress 5.5 Beta 2
• edit a post
• edit a paragraph
• using the keyboard, navigate to the block toolbar:
  • either by pressing Shift-Tab
  • or by pressing Alt+F10
• focus is now on the toolbar
• use the left/right arrow keys to move to the "More options" button in the toolbar
• press Enter or Spacebar to open the More options menu
• use the down/up arrow keys to navigate to the "Copy" button
• activate the "Copy" button either with Enter key or Spacebar key
• the block content is copied, a "snackbar" notification appears
• now press the Tab key
• observe the tab sequence start over from the document root: the first focused element is the skip link

Animated GIF to illustrate the behavior:

Noting that:

• the focus loss doesn't happen when using the keyboard shortcuts Cmd (Ctrl) + C
• doesn't happen when cutting a block with Cmd (Ctrl) + X

Since this is a new feature in WordPress 5.5, I'm setting the priority to "high" as any new released feature should be as accessible as possible (certainly should avoid focus losses).

[afercia]

Additionally: after a successful copy action, there's one more tab stop between the "Copy" button and the "Duplicate" button.

This is because Clipboard.js add its visually hidden textarea within the button. Teh textarea is focusable, so it is a tab stop. It is also announced by screen readers.

Similar issues have surfaced during recent work in core for other Clipboard.js Copy buttons. There are ways to fix it. PR incoming.

Screenshot: textarea within the Copy button:

Screenshot: visually hidden textarea after the "Copy" button announced by screen readers: