Bug 285047 – AX: combobox button value text clipped

• Status: NEW
• Component: Accessibility

[James Craig]

Filing on behalf of Marcy Sutton:

Has anyone run into this ARIA Combobox issue in Safari where VoiceOver cuts off the value text and adds a random comma at the beginning? It occurs when you put role="combobox" on a button element but not on a DIV. The APG combobox pattern uses all DIVs, and it works properly. It's specifically a button element that causes this issue in Safari/VO.

I've tried resetting relevant CSS properties to override the User Agent stylesheet in Safari and I haven't found a fix yet. I understand the rules of ARIA and not overriding semantics but it's still unfortunate to have to use a DIV for this when a button has baseline interactivity (and requires less code to implement). Buttons are allowed in the spec, but this is buggy! Here is my low-fi reproduction (note, it's not fully wired up for the keyboard...I'm just using it to validate semantics for this issue) https://codepen.io/marcysutton/pen/ByBWXVP

Screenshots from VoiceOver and Safari show Example 2 with cut off text, and Example 1 that works:

[Radar WebKit Bug Importer]

<rdar://problem/141846329>

[James Craig]

Adrian Roselli says, “Can reproduce using Safari 18.2 / macOS 15.2.”

[Joe Watkins]

Yeps - can reproduce 18.1 / MacOS 14.7