Bug 283645
Summary: | AX: content of <script> elements announced by VoiceOver inside containers with display: contents | ||
---|---|---|---|
Product: | WebKit | Reporter: | Chris Swithinbank <swithinbank> |
Component: | Accessibility | Assignee: | Tyler Wilcock <tyler_w> |
Status: | RESOLVED FIXED | ||
Severity: | Major | CC: | andresg_22, aroselli, tyler_w, webkit-bug-importer |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari 18 | ||
Hardware: | All | ||
OS: | macOS 15 |
Chris Swithinbank
If an HTML<script> is placed inside a container which has the display: contents; CSS rule applied to it, VoiceOver unexpectedly announces the script's content when the page is viewed in Safari.
For example, imagine an HTML document with the following contents:
```html
<div class="contents">
<script>
// Should not be announced
console.log("Hello, world");
</script>
<p>Should be announced</p>
</div>
<style>
.contents {
display: contents;
}
</style>
```
Navigating to this page in Safari using VoiceOver will announce "slash slash should not be announced..." and so forth even though a <script> element is not intended to be exposed in this way. Other browsers correctly avoid announcing the script element.
In Safari, removing the display: contents; rule stops the script from being announced, so it seems to be related to how that rule effects child elements in the accessibility tree.
Related GitHub PR where we encountered this: https://github.com/withastro/starlight/pull/2633
Versions tested (the bug occurs in both cases):
- macOS 14.6 + Safari 17.6
- macOS 15.1 + Safari 18.1
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/140493798>
Tyler Wilcock
Thanks for the bug report! I cannot reproduce the issue with your HTML snippet (are you able to?), but can reproduce the issue on https://starlight.astro.build/getting-started if I remove the aria-hidden="true" attributes added in https://github.com/withastro/starlight/pull/2633. I'll investigate directly on https://starlight.astro.build/getting-started and see if I can figure out what's going on.
Tyler Wilcock
OK, figured it out, will put a PR up tomorrow.
Chris Swithinbank
Thank you! And sorry, I should have at least included links to something reproducible.
For the record, here are permalinks to a page exhibiting the issue just before and after we fixed it with `aria-hidden="true"`:
- Broken: https://6741e7a0340c47000832d471--astro-starlight.netlify.app/getting-started/
- Fixed: https://674433563413160008f164fc--astro-starlight.netlify.app/getting-started/
The bug is visible when moving into the navigation sidebar on the left with VoiceOver. The `<script>` element just inside the `<sl-sidebar-state-persist>` gets announced in the broken version.
Tyler Wilcock
Pull request: https://github.com/WebKit/WebKit/pull/37227
EWS
Committed 287159@main (db2c73f6239b): <https://commits.webkit.org/287159@main>
Reviewed commits have been landed. Closing PR #37227 and removing active labels.
Tyler Wilcock
> For the record, here are permalinks to a page exhibiting the issue just before and after we fixed it with `aria-hidden="true"`:
Thanks for this, and thanks again for the bug report!
Chris Swithinbank
Thank you for the quick response and PR!
EWS
Committed 283286.594@safari-7620-branch (a32d9df60636): <https://commits.webkit.org/283286.594@safari-7620-branch>
Reviewed commits have been landed. Closing PR #2398 and removing active labels.