Calling e.clearSelection() on success doesn't move focus back to the trigger

[afercia]

Minimal example

Fork this JSFiddle and reproduce your issue.

See https://jsfiddle.net/fsvqda6j/1/

Expected behaviour

Focus to be moved back to the trigger.

Actual behaviour

Focus stays on the input / textarea

Browsers affected

N/A

Additional context

Following the example from https://clipboardjs.com/#events seems to me clearSelection() is meant to be used on success. At that point, the text is copied and there's no need to keep the selection for further action with Ctrl / Cmd + C.

Looking at

clipboard.js/src/clipboard-action.js

Lines 133 to 142 in 26a8d63

	/**
	* Moves focus away from `target` and back to the trigger, removes current selection.
	*/
	clearSelection() {
	if (this.trigger) {
	this.trigger.focus();
	}
	document.activeElement.blur();
	window.getSelection().removeAllRanges();
	}

seems to me blurring the active element should happen first. This was added in 83824fa. At that point, the active element is actually the trigger button (if any) so what happens is:

• the trigger button is focused
• the trigger button becomes the document.activeElement
• the trigger button is blurred

For better accessibility, there should always be a focused element otherwise a focus loss happens. Focus losses are one of the most frustrating experiences for keyboard users and assistive technology users.

To my understanding, to make sure there's always a focused element, the call to blur() should be moved within the check for this.trigger and before this.trigger.focus();.

For what is worth, I'm a regular contributor (and core committer) in the WordPress.org project where we try to make things as accessible as possible. We do use ClipboardJS and we'd like to use it in more places 🙂

[afercia]

See https://core.trac.wordpress.org/ticket/50322

[afercia]

See also WordPress/gutenberg#23994

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.