fix(RadioButton): fix a11y issues with RadioButtonGroup (#3276)

* fix(RadioButton): fix a11y violation on Radio Button pages

* fix(ComponentDemo): update knob container code

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -233,14 +233,16 @@
 
 // custom classnames are being applied to both fieldset and label
 // https://github.com/carbon-design-system/carbon/issues/4572
-fieldset.form-group {
+fieldset.form-group,
+fieldset[class*='--radio-button-group'] {
   padding: 1rem;
   padding-top: 0;
   margin-bottom: 0;
   border-bottom: 1px solid $ui-03;
 }
 
-fieldset.form-group:last-of-type {
+fieldset.form-group:last-of-type,
+fieldset[class*='--radio-button-group']:last-of-type {
   border-bottom: 0;
 }
 

src/components/ComponentDemo/KnobContainer.js

@@ -79,8 +79,7 @@ const Component = ({
       <div
         role="group"
         aria-labelledby={componentGroupId}
-        className={componentKnobWrapper}
-      >
+        className={componentKnobWrapper}>
         {booleanKnobs.length > 0 && (
           <FormGroup className={formGroup} legendText="Modifiers">
             {booleanKnobs.map(([name, info]) => (
@@ -228,22 +227,21 @@ const Knob = ({
     }
 
     return (
-      <FormGroup className={formGroup} legendText={name}>
-        <RadioButtonGroup
-          onChange={(val) => updateKnob(val)}
-          defaultSelected={defaultSelected}
-          name={name}
-          orientation="vertical"
-        >
-          {values.map(({ value }) => (
-            <RadioButton
-              key={`${inputId}-${value}`}
-              value={value}
-              labelText={value.replace(/'/g, '')}
-            />
-          ))}
-        </RadioButtonGroup>
-      </FormGroup>
+      <RadioButtonGroup
+        className={formGroup}
+        legendText={name}
+        onChange={(val) => updateKnob(val)}
+        defaultSelected={defaultSelected}
+        name={name}
+        orientation="vertical">
+        {values.map(({ value }) => (
+          <RadioButton
+            key={`${inputId}-${value}`}
+            value={value}
+            labelText={value.replace(/'/g, '')}
+          />
+        ))}
+      </RadioButtonGroup>
     );
   }
   return '';
@@ -291,15 +289,13 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => {
     <Form
       className={cx(knobContainer, {
         [knobContainerCollapsed]: isMobile && isKnobContainerCollapsed,
-      })}
-    >
+      })}>
       {isMobile && (
         <div className={iconButtonRow}>
           <button
             className={iconButton}
             type="button"
-            onClick={() => setIsKnobContainerCollapsed(true)}
-          >
+            onClick={() => setIsKnobContainerCollapsed(true)}>
             <Close size={20} />
           </button>
         </div>

src/pages/components/radio-button/code.mdx

@@ -84,12 +84,9 @@ usage documentation, see the Storybooks for each framework below.
     }}
   >
     {`
-  <FormGroup
-  legendText="Radio button heading"
->
   <RadioButtonGroup
     defaultSelected="default-selected"
-    legend="Group Legend"
+    legendText="Radio button heading"
     name="radio-button-group"
     valueSelected="default-selected"
   >
@@ -109,7 +106,6 @@ usage documentation, see the Storybooks for each framework below.
       value="disabled"
     />
   </RadioButtonGroup>
-</FormGroup>
   `}
   </ComponentVariant>
 </ComponentDemo>

src/pages/components/radio-button/usage.mdx

@@ -97,12 +97,9 @@ checkboxes allow the user to select multiple items.
     }}
   >
     {`
-  <FormGroup
-  legendText="Radio button heading"
->
   <RadioButtonGroup
     defaultSelected="default-selected"
-    legend="Group Legend"
+    legendText="Radio button heading"
     name="radio-button-group"
     valueSelected="default-selected"
   >
@@ -122,7 +119,6 @@ checkboxes allow the user to select multiple items.
       value="disabled"
     />
   </RadioButtonGroup>
-</FormGroup>
   `}
   </ComponentVariant>
 </ComponentDemo>