Bug 244881

Summary: AX: Heading element are not exposed in VoiceOver rotor when they are inside a button
Product: WebKit Reporter: Sylvain Gamel <code>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Major CC: andresg_22, tyler_w, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   

Description Sylvain Gamel 2022-09-07 00:14:00 PDT 
When a heading element is inside a button (for example when implementing some collapsible panel) like bellow:

<button type="button">
  <h2>Some title</h2>
</button>

Then the heading element will not be seen as an heading by VoiceOver.

- you don't see it in the list of headings exposed by the rotor
- you cannot navigate to it when using heading navigation

This is a major issue as heading structure is widely used by screenreader users to navigate in documents.

Example implementation: https://codepen.io/sylvaingml/pen/NaNMdj
Comment 1 Radar WebKit Bug Importer 2022-09-07 00:14:11 PDT 
<rdar://problem/99637511>
Comment 2 Tyler Wilcock 2022-09-12 23:05:35 PDT 
I believe this is because the children of buttons are presentational, i.e. not supposed to be exposed by the user agent.

https://www.w3.org/TR/wai-aria/#button

https://www.w3.org/TR/wai-aria/#childrenArePresentational

This behavior is implemented here:

https://github.com/WebKit/WebKit/blob/b86ae1a3bfa93a5cb1359c3370a32a3adeb5507e/Source/WebCore/accessibility/AccessibilityNodeObject.cpp#L489

Firefox matches our behavior, Chrome does not (it exposes the heading). I do understand the usecase...maybe worth starting a discussion on https://github.com/w3c/aria/issues?