diff --git a/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx b/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx index 3cea1cf1f0..63a74d6166 100644 --- a/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx +++ b/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx @@ -33,12 +33,13 @@ describe('Abstract switch', () => { expect(container).toValidateA11y(); }); - describe('aria-labelledby', () => { - test('should not have a labelId if a label is not provided', () => { + describe('labels and descriptions', () => { + test('should be default use `label` and `description`', () => { const wrapper = renderAbstractSwitch({ controlClassName: '', outlineClassName: '', styledControl:
, + label: 'Label goes here', controlId: 'custom-id', description: 'Description goes here', nativeControl: nativeControlProps => , @@ -46,51 +47,50 @@ describe('Abstract switch', () => { }); const nativeControl = wrapper.find('.switch-element')!.getElement(); - expect(nativeControl).not.toHaveAttribute('aria-labelledby'); - expect(wrapper.find('#custom-id-label')).toBeNull(); + + expect(nativeControl).toHaveAccessibleName('Label goes here'); + expect(nativeControl).toHaveAccessibleDescription('Description goes here'); }); - test('should be set to labelId if a label is provided', () => { + test('label can be overwritten by `ariaLabel`', () => { const wrapper = renderAbstractSwitch({ controlClassName: '', outlineClassName: '', styledControl:
, label: 'Label goes here', controlId: 'custom-id', - description: 'Description goes here', + ariaLabel: 'Custom aria label', nativeControl: nativeControlProps => , onClick: noop, }); const nativeControl = wrapper.find('.switch-element')!.getElement(); - expect(nativeControl).toHaveAttribute('aria-labelledby', 'custom-id-label'); - expect(nativeControl).toHaveAttribute('aria-describedby', 'custom-id-description'); - - expect(wrapper.find('#custom-id-label')?.getElement()).toHaveTextContent('Label goes here'); - expect(wrapper.find('#custom-id-description')?.getElement()).toHaveTextContent('Description goes here'); + expect(nativeControl).toHaveAccessibleName('Custom aria label'); }); - test('should include labelId if an ariaLabelledBy id is provided', () => { + test('can add additional labelledby and describedby references', () => { const wrapper = renderAbstractSwitch({ controlClassName: '', outlineClassName: '', - styledControl:
, + styledControl: ( +
+ Custom label + Custom description +
+ ), controlId: 'custom-id', ariaLabelledby: 'some-custom-label', ariaDescribedby: 'some-custom-description', - label: 'label', - description: 'description', + label: 'Default label', + description: 'Default description', nativeControl: nativeControlProps => , onClick: noop, }); const nativeControl = wrapper.find('.switch-element')!.getElement(); - expect(nativeControl).toHaveAttribute('aria-labelledby', 'custom-id-label some-custom-label'); - expect(nativeControl).toHaveAttribute('aria-describedby', 'some-custom-description custom-id-description'); - - expect(wrapper.find('#custom-id-label')).not.toBe(null); - expect(wrapper.find('#custom-id-description')).not.toBe(null); + expect(nativeControl).toHaveAccessibleName('Default label Custom label'); + expect(nativeControl).toHaveAccessibleDescription('Custom description Default description'); }); }); }); diff --git a/src/internal/components/abstract-switch/index.tsx b/src/internal/components/abstract-switch/index.tsx index 1c2be80489..72ad2bbba9 100644 --- a/src/internal/components/abstract-switch/index.tsx +++ b/src/internal/components/abstract-switch/index.tsx @@ -54,7 +54,7 @@ export default function AbstractSwitch({ const descriptionId = `${id}-description`; const ariaLabelledByIds = []; - if (label) { + if (label && !ariaLabel) { ariaLabelledByIds.push(labelId); } if (ariaLabelledby) {