VoiceOver rotor lists `<button hidden>` as Form Control if they have a valid `aria-controls`

[romaricpascal]

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=300899
Date: 2025-10-16
Reported by: @romaricpascal
Related to: alphagov/govuk-design-system#4892

---

Overview

<button> elements with a hidden attribute should not appear in the Form Control menu in Voice Over's rotor.

However the button in the following HTML will be listed as "button" in the menu (only its role, not its accessible name, which correctly appears if the button does not have the hidden attribute).

<button hidden aria-controls="panel">A button</button>
<div id="panel">A panel with some content</div>

The issue seem to only happens if the value in aria-controls matches another element on the page. The following snippet will not have the button listed.

<button hidden aria-controls="non-existing-id">A button</button>
<div id="panel">A panel with some content</div>

A workaround is to add an explicit aria-hidden attribute. The following snippet correctly doesn't show the button in the Form Control menu in Voice Over's rotor.

<button hidden aria-controls="panel">A button</button>
<div id="panel">A panel with some content</div>

This issue was found while investigating a hidden button still being focusable with VoiceOver on iOS, so it may also affect VoiceOver on iOS.

Expected result

Despite the aria-controls a <button hidden> should not appear in VoiceOver's rotor

Actual result

The button is listed in VoiceOver's rotor

[querkmachine]

Looks like a fix for this got merged a couple of weeks ago! There hasn't been a release of Safari (or even Safari Tech Preview) since then, so will need to keep an eye out for those.