fix: Don't override ariaLabel when explicitly set on switch components (

#1380)
cloudscape-design · Jul 27, 2023 · 6937b44 · 6937b44
1 parent d84a8e1
commit 6937b44
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx b/src/internal/components/abstract-switch/__tests__/abstract-switch.test.tsx
@@ -33,64 +33,64 @@ 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: <div />,
+        label: 'Label goes here',
         controlId: 'custom-id',
         description: 'Description goes here',
         nativeControl: nativeControlProps => <input {...nativeControlProps} className="switch-element" type="radio" />,
         onClick: noop,
       });
 
       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: <div />,
         label: 'Label goes here',
         controlId: 'custom-id',
-        description: 'Description goes here',
+        ariaLabel: 'Custom aria label',
         nativeControl: nativeControlProps => <input {...nativeControlProps} className="switch-element" type="radio" />,
         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: <div />,
+        styledControl: (
+          <div>
+            <span id="some-custom-label">Custom label</span>
+            <span id="some-custom-description">Custom description</span>
+          </div>
+        ),
         controlId: 'custom-id',
         ariaLabelledby: 'some-custom-label',
         ariaDescribedby: 'some-custom-description',
-        label: 'label',
-        description: 'description',
+        label: 'Default label',
+        description: 'Default description',
         nativeControl: nativeControlProps => <input {...nativeControlProps} className="switch-element" type="radio" />,
         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
@@ -54,7 +54,7 @@ export default function AbstractSwitch({
   const descriptionId = `${id}-description`;
 
   const ariaLabelledByIds = [];
-  if (label) {
+  if (label && !ariaLabel) {
     ariaLabelledByIds.push(labelId);
   }
   if (ariaLabelledby) {