diff --git a/packages/@react-aria/select/src/useSelect.ts b/packages/@react-aria/select/src/useSelect.ts index 624466f1669..5f1399fc9f9 100644 --- a/packages/@react-aria/select/src/useSelect.ts +++ b/packages/@react-aria/select/src/useSelect.ts @@ -140,12 +140,10 @@ export function useSelect(props: AriaSelectOptions, state: SelectState, isDisabled, onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown), onKeyUp: props.onKeyUp, - 'aria-label': `, ${props['aria-label'] ?? ''}`, 'aria-labelledby': [ valueId, - !(props['aria-labelledby'] && props['aria-label']) && triggerProps.id, - !(props['aria-labelledby'] || props['aria-label']) && labelProps.id, - props['aria-labelledby'] + triggerProps['aria-labelledby'], + triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null ].filter(Boolean).join(' '), onFocus(e: FocusEvent) { if (state.isFocused) { diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx index e6db0471afd..88b2d8762ca 100644 --- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx +++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx @@ -253,8 +253,8 @@ export const LabelledBy: LabelledByStory = { }, render: (args) => ( <> -
Test label
- +
Test label
+ {(item: any) => {item.name}} diff --git a/packages/@react-spectrum/picker/test/Picker.test.js b/packages/@react-spectrum/picker/test/Picker.test.js index 4b91f9bb95a..00303fd6b2a 100644 --- a/packages/@react-spectrum/picker/test/Picker.test.js +++ b/packages/@react-spectrum/picker/test/Picker.test.js @@ -808,7 +808,7 @@ describe('Picker', function () { let value = getByText('Select an option…'); expect(label).toHaveAttribute('id'); expect(value).toHaveAttribute('id'); - expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${picker.id} ${label.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${label.id}`); triggerPress(picker); act(() => jest.runAllTimers()); @@ -833,7 +833,7 @@ describe('Picker', function () { let value = getByText('Select an option…'); expect(picker).toHaveAttribute('id'); expect(value).toHaveAttribute('id'); - expect(picker).toHaveAttribute('aria-label', ', Test'); + expect(picker).toHaveAttribute('aria-label', 'Test'); expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${picker.id}`); triggerPress(picker); @@ -859,7 +859,7 @@ describe('Picker', function () { let value = getByText('Select an option…'); expect(picker).toHaveAttribute('id'); expect(value).toHaveAttribute('id'); - expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${picker.id} foo`); + expect(picker).toHaveAttribute('aria-labelledby', `${value.id} foo`); triggerPress(picker); act(() => jest.runAllTimers()); @@ -884,8 +884,8 @@ describe('Picker', function () { let value = getByText('Select an option…'); expect(picker).toHaveAttribute('id'); expect(value).toHaveAttribute('id'); - expect(picker).toHaveAttribute('aria-label', ', Test'); - expect(picker).toHaveAttribute('aria-labelledby', `${value.id} foo`); + expect(picker).toHaveAttribute('aria-label', 'Test'); + expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${picker.id} foo`); triggerPress(picker); act(() => jest.runAllTimers()); @@ -918,7 +918,7 @@ describe('Picker', function () { let value = getByText('Select an option…'); expect(label).toHaveAttribute('id'); expect(value).toHaveAttribute('id'); - expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${picker.id} ${label.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${label.id}`); triggerPress(picker); act(() => jest.runAllTimers()); diff --git a/packages/@react-spectrum/searchwithin/test/SearchWithin.test.js b/packages/@react-spectrum/searchwithin/test/SearchWithin.test.js index a64f4d9180c..81542c44826 100644 --- a/packages/@react-spectrum/searchwithin/test/SearchWithin.test.js +++ b/packages/@react-spectrum/searchwithin/test/SearchWithin.test.js @@ -187,7 +187,7 @@ describe('SearchWithin labeling', function () { expect(group).not.toHaveAttribute('aria-labelledby'); expect(searchfield).toHaveAttribute('aria-labelledby', `${hiddenLabel.id} ${picker.id}`); - expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${picker.id} ${hiddenLabel.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${hiddenLabel.id}`); }); it('label = foo', function () { @@ -203,7 +203,7 @@ describe('SearchWithin labeling', function () { expect(group).toHaveAttribute('aria-labelledby', label.id); expect(searchfield).toHaveAttribute('aria-labelledby', `${label.id} ${hiddenLabel.id} ${picker.id}`); - expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${picker.id} ${label.id} ${hiddenLabel.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${label.id} ${hiddenLabel.id}`); expect(label).toHaveAttribute('for', searchfield.id); }); @@ -220,7 +220,7 @@ describe('SearchWithin labeling', function () { expect(group).not.toHaveAttribute('aria-labelledby'); expect(searchfield).toHaveAttribute('aria-labelledby', `${group.id} ${hiddenLabel.id} ${picker.id}`); - expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${picker.id} ${group.id} ${hiddenLabel.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${group.id} ${hiddenLabel.id}`); }); it('aria-labelledby = {id}', function () { @@ -251,6 +251,6 @@ describe('SearchWithin labeling', function () { expect(group).toHaveAttribute('aria-labelledby', 'id-foo-label'); expect(searchfield).toHaveAttribute('aria-labelledby', `id-foo-label ${hiddenLabel.id} ${picker.id}`); expect(searchfield).toHaveAttribute('id', 'id-searchfield'); - expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} ${picker.id} id-foo-label ${hiddenLabel.id}`); + expect(picker).toHaveAttribute('aria-labelledby', `${picker.childNodes[0].id} id-foo-label ${hiddenLabel.id}`); }); }); diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js index b7497481bcb..052c1e5b6c8 100644 --- a/packages/@react-spectrum/tabs/test/Tabs.test.js +++ b/packages/@react-spectrum/tabs/test/Tabs.test.js @@ -398,8 +398,8 @@ describe('Tabs', function () { let picker = getByRole('button'); let pickerLabel = within(picker).getByText('Tab 1'); - expect(picker).toHaveAttribute('aria-label', ', Test Tabs'); - expect(picker).toHaveAttribute('aria-labelledby', `${pickerLabel.id} external label`); + expect(picker).toHaveAttribute('aria-label', 'Test Tabs'); + expect(picker).toHaveAttribute('aria-labelledby', `${pickerLabel.id} ${picker.id} external label`); triggerPress(picker); act(() => jest.runAllTimers()); diff --git a/packages/react-aria-components/test/Select.test.js b/packages/react-aria-components/test/Select.test.js index c37b1d3a337..18c92f8ba2a 100644 --- a/packages/react-aria-components/test/Select.test.js +++ b/packages/react-aria-components/test/Select.test.js @@ -35,7 +35,7 @@ let TestSelect = (props) => ( describe('Select', () => { it('provides slots', () => { - let {getByRole, getByText} = render(); + let {getByRole} = render(); let button = getByRole('button'); expect(button).toHaveTextContent('Select an item'); @@ -45,8 +45,9 @@ describe('Select', () => { expect(select).toHaveAttribute('data-foo', 'bar'); expect(button).toHaveAttribute('aria-labelledby'); - let label = getByText('Favorite Animal'); + let label = document.getElementById(button.getAttribute('aria-labelledby').split(' ')[1]); expect(label).toHaveAttribute('class', 'react-aria-Label'); + expect(label).toHaveTextContent('Favorite Animal'); let valueOrPlaceholder = document.getElementById(button.getAttribute('aria-labelledby').split(' ')[0]); expect(valueOrPlaceholder).toHaveAttribute('class', 'react-aria-SelectValue'); @@ -79,7 +80,7 @@ describe('Select', () => { let button = getByRole('button'); expect(button.closest('.react-aria-Select')).toHaveAttribute('slot', 'test'); - expect(button).toHaveAttribute('aria-label', ', test'); + expect(button).toHaveAttribute('aria-label', 'test'); }); it('supports items with render props', () => {