Fixed Toggle aria-labelledby (#16151)

* fix: added logic to set the value to empty * fix: fixed stories without a label * docs: changed label name * fix: removed commnets * fix: replace empty string with undefined --------- Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · May 14, 2024 · fd0f464 · fd0f464
1 parent f0d89db
commit fd0f464
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -91,9 +91,9 @@ export const WithAccessibleLabels = () => (
 
     <div>
       <div id="toggle-6-label" style={{ marginBlockEnd: '0.5rem' }}>
-        External toggle label
+        Internal aria-label toggle
       </div>
-      <Toggle id="toggle-6" hideLabel />
+      <Toggle aria-label="Internal aria-label toggle" id="toggle-6" hideLabel />
     </div>
 
     <div>

diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx
@@ -191,7 +191,7 @@ export function Toggle({
         role="switch"
         type="button"
         aria-checked={checked}
-        aria-labelledby={ariaLabelledby ?? labelId}
+        aria-labelledby={ariaLabelledby ?? (labelText ? labelId : undefined)}
         disabled={disabled}
         onClick={handleClick}
       />