Bug 283645 – AX: content of <script> elements announced by VoiceOver inside containers with display: contents

• Status: RESOLVED
• Resolution: FIXED
• Component: Accessibility

[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

[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.