Skip to content

Conversation

web-padawan
Copy link
Member

Description

Related to #437.

As we plan to always set focus-ring on programmatic focus, I realised that FocusTrapController behavior would be inconsistent since it doesn't enforce that for native elements, such as <button>. Modified the logic accordingly.

The change is to use focus({ focusVisible: true }) supported in Firefox and Safari 18 but not in Chrome.

Example in vaadin-rich-text-editor-popup:

Chrome Firefox
Screenshot 2025-08-19 at 12 45 18 Screenshot 2025-08-19 at 12 45 00

This is a minor change but IMO it improves the UX in Firefox and Safari a bit.

Type of change

  • Refactor

Copy link

@web-padawan web-padawan merged commit 938ebc9 into main Aug 19, 2025
9 checks passed
@web-padawan web-padawan deleted the refactor/focus-trap-focus-visible branch August 19, 2025 12:56
@vaadin-bot
Copy link
Collaborator

Hi @web-padawan and @web-padawan, when i performed cherry-pick to this commit to 24.9, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick 938ebc9
error: could not apply 938ebc9... refactor: use focusVisible: true in FocusTrapController focus (#10031)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 25.0.0-alpha7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants