feat(components): improve accessibility for Checkbox, Radio button an…

…d Toggle components
webex · Mar 18, 2022 · 4120fbb · 4120fbb
1 parent a6a5e2f
commit 4120fbb
Show file tree

Hide file tree

Showing 12 changed files with 483 additions and 257 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -718,7 +718,7 @@ Array [
           }
         />
         <div
-          className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
+          className="wxc wxc-label wxc wxc-radio-set wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
           style={Object {}}
         >
           <label
@@ -741,42 +741,45 @@ Array [
             className="wxc-label__control"
           >
             <div
-              aria-checked={false}
-              aria-disabled={false}
-              className="wxc wxc-radio-button wxc-radio-button--enabled"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              required={false}
-              role="radio"
-              tabIndex={0}
+              aria-labelledby="wxc-0-label"
+              role="radiogroup"
             >
               <div
-                className="wxc-radio-button__background"
-              />
-              <span
-                className="wxc-radio-button__title"
+                aria-checked={false}
+                aria-disabled={false}
+                className="wxc wxc-radio-button wxc-radio-button--enabled"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role="radio"
+                tabIndex={0}
               >
-                Yes Please! - Pick me up on arrival
-              </span>
-            </div>
-            <div
-              aria-checked={false}
-              aria-disabled={false}
-              className="wxc wxc-radio-button wxc-radio-button--enabled"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              required={false}
-              role="radio"
-              tabIndex={0}
-            >
+                <div
+                  className="wxc-radio-button__background"
+                />
+                <span
+                  className="wxc-radio-button__title"
+                >
+                  Yes Please! - Pick me up on arrival
+                </span>
+              </div>
               <div
-                className="wxc-radio-button__background"
-              />
-              <span
-                className="wxc-radio-button__title"
+                aria-checked={false}
+                aria-disabled={false}
+                className="wxc wxc-radio-button wxc-radio-button--enabled"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role="radio"
+                tabIndex={-1}
               >
-                No Thanks - I will make my own way there
-              </span>
+                <div
+                  className="wxc-radio-button__background"
+                />
+                <span
+                  className="wxc-radio-button__title"
+                >
+                  No Thanks - I will make my own way there
+                </span>
+              </div>
             </div>
           </div>
         </div>