Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus not visible on Cover block background video #41989

Open
extra808 opened this issue Jun 27, 2022 · 3 comments
Open

Focus not visible on Cover block background video #41989

extra808 opened this issue Jun 27, 2022 · 3 comments
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image Browser Issues Issues or PRs that are related to browser specific problems Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended

Comments

@extra808
Copy link

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

  • WordPress 5.8.4

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

@Mamaduka Mamaduka added the [Block] Cover Affects the Cover Block - used to display content laid over a background image label Jun 28, 2022
@jordesign jordesign added the [Type] Bug An existing feature does not function as intended label Sep 8, 2023
@jordesign
Copy link
Contributor

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

@skorasaurus skorasaurus added Browser Issues Issues or PRs that are related to browser specific problems Good First Issue An issue that's suitable for someone looking to contribute for the first time labels Oct 5, 2023
@colinduwe
Copy link
Contributor

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-list__layout.is-navigate-mode .block-editor-block-list__block.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
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image Browser Issues Issues or PRs that are related to browser specific problems Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

5 participants