Fix Copy block button focus loss and try to remove the visually hidden textarea #24022
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
afercia
added
the
[Focus] Accessibility (a11y)
|
Fixes #23994 |
|
Size Change: +12 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
ZebulanStanphill
added
[a11y] Keyboard & Focus
[Type] Bug
|
To clarify: I did try to call |
|
Question: Now that the implementation is based on Pinging @ellatrix and @gziolo as I saw you worked on this bit of code. |
youknowriad
added
the
Backport to WP 6.7 Beta/RC
youknowriad
approved these changes
Jul 20, 2020
|
@afercia Could you open a separate issue with the remaining problems? The clipboard is removed after unmount, yes. |
|
I can open a separate issue, but that requires time. My time is very, very, limited. I'd appreciate if next time an issue gets closed when all the problems reported are actually fixed... |
6 tasks
|
@afercia So is everyone's... |
ellatrix
pushed a commit
that referenced
this pull request
Jul 20, 2020
|
I just wanted to note that closing issues and merging PRs that don't fully solve the reported bugs don't help in spending our time in the best way. |
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #23994
Description
This PR seeks to solve two issues with the Clipboard.js-powered "Copy" block button.
For more details, please see the related issue #23994
Notes
These behaviors are Clipboard.js bugs (or "features") that produce a sub-optimal experience for keyboard users and assistive technology users.
While working on recent changes in WordPress core I stumbled upon the same issues. See:
https://core.trac.wordpress.org/changeset/48233
https://core.trac.wordpress.org/changeset/48232
I also reported these two issues upstream:
zenorocha/clipboard.js#680
zenorocha/clipboard.js#684
In the meantime, I guess they can be fixed in our implementation.
1
The focus loss is fixed by explicitly setting the focus back on the button. See also similar fixes used in the core changesets linked above.
2
I'd greatly appreciate some help to fix the second issue.
Ideally, the visually hidden textarea should be removed on the copy action
success. This is why I fixed it in core. Worth noting Clipboard.js re-adds the textarea at any click so removing it on success looks safe.However, I couldn't find a nice way to use the fix used in core also in
useCopyOnClick.As far as I see,
clipboard.current.destroy();is used in theuseEffectcleanup but that's not enough.It should be called on success. I couldn't find a way to make it work other than adding one more timeout which I guess isn't ideal. Any help would be greatly appreciated.