fix(#4036): Section headings within ListBox and Menu are not accessible on mobile screen readers (#4037)

* fix(#4036): Section headings within ListBox and Menu are not accessible on mobile screen readers

Author: Michael Jordan

packages/@react-aria/listbox/docs/useListBox.mdx

@@ -287,25 +287,20 @@ are correct.
 
 ```tsx example export=true render=false
 import {useListBoxSection} from '@react-aria/listbox';
-import {useSeparator} from '@react-aria/separator';
 
 function ListBoxSection({section, state}) {
   let {itemProps, headingProps, groupProps} = useListBoxSection({
     heading: section.rendered,
     'aria-label': section['aria-label']
   });
 
-  let {separatorProps} = useSeparator({
-    elementType: 'li'
-  });
-
-  // If the section is not the first, add a separator element.
+  // If the section is not the first, add a separator element to provide visual separation.
   // The heading is rendered inside an <li> element, which contains
   // a <ul> with the child items.
   return <>
     {section.key !== state.collection.getFirstKey() &&
       <li
-        {...separatorProps}
+        role="presentation"
         style={{
           borderTop: '1px solid gray',
           margin: '2px 5px'

packages/@react-aria/listbox/src/useListBoxSection.ts

@@ -47,10 +47,10 @@ export function useListBoxSection(props: AriaListBoxSectionProps): ListBoxSectio
     },
     headingProps: heading ? {
       // Techincally, listbox cannot contain headings according to ARIA.
-      // We hide the heading from assistive technology, and only use it
-      // as a label for the nested group.
+      // We hide the heading from assistive technology, using role="presentation",
+      // and only use it as a visual label for the nested group.
       id: headingId,
-      'aria-hidden': true
+      role: 'presentation'
     } : {},
     groupProps: {
       role: 'group',

packages/@react-aria/menu/src/useMenuSection.ts

@@ -47,10 +47,10 @@ export function useMenuSection(props: AriaMenuSectionProps): MenuSectionAria {
     },
     headingProps: heading ? {
       // Techincally, menus cannot contain headings according to ARIA.
-      // We hide the heading from assistive technology, and only use it
-      // as a label for the nested group.
+      // We hide the heading from assistive technology, using role="presentation",
+      // and only use it as a label for the nested group.
       id: headingId,
-      'aria-hidden': true
+      role: 'presentation'
     } : {},
     groupProps: {
       role: 'group',

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -3175,9 +3175,9 @@ describe('ComboBox', function () {
       expect(items).toHaveLength(6);
       expect(groups).toHaveLength(2);
       expect(groups[0]).toHaveAttribute('aria-labelledby', getByText('Section One').id);
-      expect(getByText('Section One')).toHaveAttribute('aria-hidden', 'true');
+      expect(getByText('Section One')).toHaveAttribute('role', 'presentation');
       expect(groups[1]).toHaveAttribute('aria-labelledby', getByText('Section Two').id);
-      expect(getByText('Section Two')).toHaveAttribute('aria-hidden', 'true');
+      expect(getByText('Section Two')).toHaveAttribute('role', 'presentation');
       expect(document.activeElement).toBe(combobox);
       expect(combobox).toHaveAttribute('aria-activedescendant', items[0].id);
 

packages/@react-spectrum/listbox/src/ListBoxSection.tsx

@@ -19,7 +19,6 @@ import React, {Fragment, ReactNode, useContext, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {useListBoxSection} from '@react-aria/listbox';
 import {useLocale} from '@react-aria/i18n';
-import {useSeparator} from '@react-aria/separator';
 
 interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref'> {
   headerLayoutInfo: LayoutInfo,
@@ -35,10 +34,6 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
     'aria-label': item['aria-label']
   });
 
-  let {separatorProps} = useSeparator({
-    elementType: 'li'
-  });
-
   let headerRef = useRef();
   useVirtualizerItem({
     layoutInfo: headerLayoutInfo,
@@ -54,7 +49,7 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
       <div role="presentation" ref={headerRef} style={layoutInfoToStyle(headerLayoutInfo, direction)}>
         {item.key !== state.collection.getFirstKey() &&
           <div
-            {...separatorProps}
+            role="presentation"
             className={classNames(
               styles,
               'spectrum-Menu-divider'

packages/@react-spectrum/listbox/test/ListBox.test.js

@@ -98,11 +98,15 @@ describe('ListBox', function () {
       expect(section).toHaveAttribute('aria-labelledby');
       let heading = document.getElementById(section.getAttribute('aria-labelledby'));
       expect(heading).toBeTruthy();
-      expect(heading).toHaveAttribute('aria-hidden', 'true');
-    }
+      expect(heading).toHaveAttribute('role', 'presentation');
 
-    let dividers = within(listbox).getAllByRole('separator');
-    expect(dividers.length).toBe(withSection.length - 1);
+      // Separator should render for sections after first section
+      if (section !== sections[0]) {
+        let divider = heading.previousElementSibling;
+        expect(divider).toHaveAttribute('role', 'presentation');
+        expect(divider).toHaveClass('spectrum-Menu-divider');
+      }
+    }
 
     let items = within(listbox).getAllByRole('option');
     expect(items.length).toBe(withSection.reduce((acc, curr) => (acc + curr.children.length), 0));

packages/@react-spectrum/menu/test/Menu.test.js

@@ -87,7 +87,7 @@ describe('Menu', function () {
       expect(section).toHaveAttribute('aria-labelledby');
       let heading = document.getElementById(section.getAttribute('aria-labelledby'));
       expect(heading).toBeTruthy();
-      expect(heading).toHaveAttribute('aria-hidden', 'true');
+      expect(heading).toHaveAttribute('role', 'presentation');
     }
 
     let dividers = within(menu).getAllByRole('separator');

packages/@react-spectrum/picker/test/Picker.test.js

@@ -1470,9 +1470,9 @@ describe('Picker', function () {
       expect(items[5]).toHaveAttribute('aria-labelledby', within(items[5]).getByText('Floof').id);
       expect(groups[1]).toContainElement(items[5]);
 
-      expect(getByText('Section 1')).toHaveAttribute('aria-hidden', 'true');
+      expect(getByText('Section 1')).toHaveAttribute('role', 'presentation');
       expect(groups[1]).toHaveAttribute('aria-labelledby', getByText('Section 2').id);
-      expect(getByText('Section 2')).toHaveAttribute('aria-hidden', 'true');
+      expect(getByText('Section 2')).toHaveAttribute('role', 'presentation');
 
       expect(document.activeElement).toBe(listbox);