Focus loss when setting featured image #14414
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Type] Bug
An existing feature does not function as intended
When setting a Featured Image, the Media Modal opens. The Media Modal takes care of moving focus back to the "opener" element when it closes. This is the button that opened the modal.
However, the "Set featured image" button gets removed from the DOM
gutenberg/packages/editor/src/components/post-featured-image/index.js
Lines 88 to 104 in d7a4dfa
There's no reference any longer to the opener element and the Media Modal can't move focus back to it.
As accessibility team, we've warned many times special care should be taken when removing, hiding, or disabling "focus-candidate" elements from the DOM. In the case of modals, focus should always be moved back to a proper place in the "invoking context".
Focus losses need to be avoided because they're a terrible experience for keyboard and screen reader users. Even though modern browsers have implemented a sort of sequential focus navigation starting point that just tries to keep focus "in place" and, technically, there's no focused element. Also, it's not guaranteed to work, especially when using assistive technologies.
We've seen other cases in Gutenberg where a mechanism to determine a fallback where focus should be moved back would be useful. Not sure how to implement it.
In this specific case, worth noting the image preview is a button: specifically, a
MediaUploadCheck
component that renders also a button. I guess using the sameMediaUploadCheck
for both the "Set featured image" button and the image preview button could solve the issue.The text was updated successfully, but these errors were encountered: