refactor: set aria-modal and tabindex on the confirm-dialog #9980
Conversation
206e8e7 to
beb0672
Compare
| } | ||
|
|
||
| :host, | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
|
|
||
| :host(:focus) ::part(overlay) { | ||
| outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); |
There was a problem hiding this comment.
By default this only applies to base styles, as Lumo resets both of these properties:
web-components/packages/vaadin-lumo-styles/src/props/reset.css
Lines 8 to 10 in 8b4ca33
IMO it's ok as in V24, there is no default focus indicator on the overlay part in Lumo.
There was a problem hiding this comment.
Should we then also disable aria modal controller for the components we refactor? Or do we do that afterwards? Removing it right away would make testing the PRs a bit safer.
There was a problem hiding this comment.
Yes, I think it sounds reasonable. I will update the PR.
|
Description
Related to #9759
aria-modal="true"on thevaadin-confirm-dialoghost elementdisplay: contentstodisplay: blockfor Safari VoiceOvertabindex="0"from the overlay part to the confirm-dialog itselfBoth
display: contentsandtabindexchange are needed to make sure Safari VoiceOver web rotor doesn't list elements outside the dialog, which happened especially when focus was on theoverlaypart in shadow DOM.Type of change