From e6ee8dd55995895975cd9e04a62474d46b8e8e47 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Wed, 11 Dec 2024 22:30:28 +0530
Subject: [PATCH] fix(17525): fixes a11y violation in toggle (#18216)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 packages/react/src/components/Toggle/Toggle.stories.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js
index f1bc3b3bcbb0..ab57ea8798c1 100644
--- a/packages/react/src/components/Toggle/Toggle.stories.js
+++ b/packages/react/src/components/Toggle/Toggle.stories.js
@@ -100,16 +100,17 @@ export const WithAccessibleLabels = () => (
       <div id="toggle-6-label" style={{ marginBlockEnd: '0.5rem' }}>
         Internal aria-label toggle
       </div>
-      <Toggle aria-label="Internal aria-label toggle" id="toggle-6" hideLabel />
+      <Toggle aria-labelledby="toggle-6-label" id="toggle-6" />
     </div>
 
     <div>
       <label
+        id="toggle-7-label"
         htmlFor="toggle-7"
         style={{ display: 'block', marginBlockEnd: '0.5rem' }}>
         External toggle label
       </label>
-      <Toggle id="toggle-7" hideLabel />
+      <Toggle aria-labelledby="toggle-7-label" id="toggle-7" />
     </div>
   </VStack>
 );