Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.7k
Description
Describe the bug
When using floating-ui to create a non-modal dialog (popover essentially), the contents of it are not accessible when using Voice Control on iOS with Safari.
To Reproduce
Reproduction:https://codesandbox.io/p/sandbox/festive-hamilton-ztmqn7
Steps to reproduce the behavior:
- Go to (iOS, Safari, Voice Control enabled)https://ztmqn7.csb.app/
- Click on "my trigger"
- Say "show names" / "show numbers" to surface accessible elements
- See that the contents of the popover do not get numbers/names assigned to it.
Expected behavior
Non-modal dialog contents should be accessible when using Voice Control.
Screenshots
Current behavior:
Expected behavior:
The expected behavior can be achieved by either:
- removing
height: 1px;
inline style and reseting the names ("hide names", then "show names" again - completely removing the
aria-owns
element
Context:
- OS: iOS 26
- Browser: Safari 26
Note: behaved the same with iOS/Safari v18
Additional context
Arguably, this is a iOS/Safari/WebKit bug, so I've also reported it there:https://bugs.webkit.org/show_bug.cgi?id=300224
However, perhaps this can also be remediated in floating-ui? Options:
- Folks in the a11y Slack were curious as to why this non-modal dialog pattern needs aria-owns at all. I could not find a specific reason as to why it was added. I get that it moves contents of the dialog in the accessibility tree to the "correct place", but I don't quite understand if it has any practical implications as well. Could we remove the aria-owns element?
- The root cause seems to come from the HIDDEN_STYLES applied on the owner span element. Given that the span never has any content of its own, perhaps applying a smaller subset of the visually hidden styles would work just as well?