search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.26k stars 4.09k forks source link

Focus not visible on Cover block background video #41989

Open extra808 opened 2 years ago

extra808 commented 2 years ago

Description

Firefox includes <video> elements in the focus order (other browsers only include video controls, if present, in the focus order). The cover block's styling removes outline style from the element, preventing the browser's default focus outline from appearing.

Removing the outline property from the CSS rule would allow the browser to use it's default focus outline. However, in some layouts an outline outside the <video> element could be obscured; adding outline-offset: -2px; would position the outline over the element.

Step-by-step reproduction instructions

  1. In Firefox, go to a published page with a Cover block set to use a video background.
  2. Use the Tab key on a keyboard to navigate through focusable elements on the page, paying attention to the page's visible focus indicators.
  3. Navigate from last focusable element before the Cover block to the first focusable element after the Cover block, notice there was a Tab press between those focusable elements where there was no visual indication of what was focused; that was when the <video> element was focused.

Screenshots, screen recording, code snippet

video in focus order, focus not visible

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

jordesign commented 11 months ago

Confirming this is still in place in WP6.3 and FF 116.0.2

colinduwe commented 8 months ago

I see the outline in WP 6.4.2 and FF 116.0.03 When the cover has focus it has the .is-selected class so the following selector works: .block-editor-block-listlayout.is-navigate-mode .block-editor-block-listblock.is-selected::after There's CSS to apply a consistent border around selected blocks.

Should this also work for :focus in the case where the editor somehow doesn't apply the class? I think maybe not.

extra808 commented 8 months ago

@colinduwe I wasn't reporting an issue with the block as presented in the Block Editor, I was reporting an issue with the block once it's published.