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: ( +