Fix Aria label on sections (#5603)

adobe · Dec 19, 2023 · 1193073 · 1193073 · rspbot · Dec 19, 2023
1 parent 125d65c
commit 1193073
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
@@ -282,7 +282,7 @@ function ListBoxSection<T>({section, className, style}: ListBoxSectionProps<T>)
   let [headingRef, heading] = useSlot();
   let {headingProps, groupProps} = useListBoxSection({
     heading,
-    'aria-label': section['aria-label'] ?? undefined
+    'aria-label': section.props['aria-label'] ?? undefined
   });
 
   let children = useCachedChildren({

diff --git a/packages/react-aria-components/stories/index.stories.tsx b/packages/react-aria-components/stories/index.stories.tsx
@@ -72,8 +72,7 @@ export const ListBoxSections = () => (
       <MyListBoxItem>Baz</MyListBoxItem>
     </Section>
     <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
-    <Section className={styles.group}>
-      <Header style={{fontSize: '1.2em'}}>Section 1</Header>
+    <Section className={styles.group} aria-label="Section 2">
       <MyListBoxItem>Foo</MyListBoxItem>
       <MyListBoxItem>Bar</MyListBoxItem>
       <MyListBoxItem>Baz</MyListBoxItem>

diff --git a/packages/react-aria-components/test/ListBox.test.js b/packages/react-aria-components/test/ListBox.test.js
@@ -140,8 +140,7 @@ describe('ListBox', () => {
           <ListBoxItem id="tomato">Tomato</ListBoxItem>
           <ListBoxItem id="onion">Onion</ListBoxItem>
         </Section>
-        <Section data-test-prop="test-section-2">
-          <Header>Protein</Header>
+        <Section data-test-prop="test-section-2" aria-label="Protein">
           <ListBoxItem id="ham">Ham</ListBoxItem>
           <ListBoxItem id="tuna">Tuna</ListBoxItem>
           <ListBoxItem id="tofu">Tofu</ListBoxItem>
@@ -157,6 +156,7 @@ describe('ListBox', () => {
 
     expect(groups[0]).toHaveAttribute('aria-labelledby');
     expect(document.getElementById(groups[0].getAttribute('aria-labelledby'))).toHaveTextContent('Veggies');
+    expect(groups[1].getAttribute('aria-label')).toEqual('Protein');
 
     expect(groups[0]).toHaveAttribute('data-test-prop', 'test-section-1');
     expect(groups[1]).toHaveAttribute('data-test-prop', 'test-section-2');