Section headings within ListBox and Menu are not accessible on mobile screen readers

[majornista]

🐛 Bug Report

• Section headings within ListBox and Menu are not accessible on mobile screen readers.
• axe-core throws Certain ARIA roles must contain particular children error for the Section heading span element for both ListBox and Menu, and also for the span element with role="separator" within a ListBox.

🤔 Expected Behavior

• Section headings within ListBox and Menu should be navigable using explore by touch with mobile screen readers.
• axe-core should not throw Certain ARIA roles must contain particular children error for the Section heading span element for both ListBox and Menu, or for the span element with role="separator" within a ListBox.

😯 Current Behavior

• Section headings within ListBox and Menu are not accessible on mobile screen readers.
• axe-core throws Certain ARIA roles must contain particular children error for the Section heading span element for both ListBox and Menu, and also for the span element with role="separator" within a ListBox.

💁 Possible Solution

Return role="presentation" instead of aria-hidden="true" for headingProps in useListBoxSection and useMenuSection.

Override role="separator" with role="presentation" for useListBoxSection.

🔦 Context

Accessibility Audit

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum	@adobe/react-spectrum@3.24.1
Browser	Safari iOS / Chrome Android
Operating System	iOS / Android

🧢 Your Company/Team

Adobe/Accessibility

🕷 Tracking Issue (optional)

A11Y-5799