Skip to content

Conversation

web-padawan
Copy link
Member

@web-padawan web-padawan commented Aug 18, 2025

Description

Related to #9759

Same as #9980 but for vaadin-popover.

  • Added aria-modal="true" on the vaadin-popover element when modal
  • Changed from display: contents to display: block for Safari VoiceOver
  • Moved tabindex="0" from the overlay part to the popover element itself
  • Modified focusin and focusout event listeners to be set on the popover

Type of change

  • Refactor

}

:host(:focus) ::part(overlay) {
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something is wrong with the outline styles. In Chrome I don't see any outline. In Firefox it shows a dot:

Popover:

Bildschirmfoto 2025-08-18 um 15 21 55

Confirm dialog:

Bildschirmfoto 2025-08-18 um 15 22 32

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no outline on the overlay in Lumo so this is kind of expected. The dot was coming from the default focus outline, added outline: none to fix that. Created #10025 to fix this in other components.

Copy link

@web-padawan web-padawan merged commit 7ed2da4 into main Aug 18, 2025
9 checks passed
@web-padawan web-padawan deleted the refactor/popover-aria-modal branch August 18, 2025 14:31
@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