docs(react): update form story to fix or remove accessibility violati…

…ons (#11486) * fix(react): update story to fix or remove accessibility violations * chore(react): add back hasMargin Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 31, 2022 · d20b95d · d20b95d
1 parent 1f1b70a
commit d20b95d
Showing 1 changed file with 32 additions and 54 deletions.
diff --git a/packages/react/src/components/Form/next/Form.stories.js b/packages/react/src/components/Form/next/Form.stories.js
@@ -19,7 +19,6 @@ import Select from '../../Select';
 import SelectItem from '../../SelectItem';
 import TextArea from '../../TextArea';
 import TextInput from '../../TextInput';
-import Toggle from '../../Toggle';
 import { Stack } from '../../Stack';
 
 const checkboxEvents = {
@@ -40,16 +39,7 @@ const numberInputProps = {
   max: 100,
   value: 50,
   step: 10,
-};
-
-const toggleProps = {
-  className: 'some-class',
-  hideLabel: true,
-};
-
-const fieldsetToggleProps = {
-  className: 'some-class',
-  legendText: 'Toggle heading',
+  iconDescription: 'Add/decrement number',
 };
 
 const fileUploaderEvents = {
@@ -66,11 +56,6 @@ const radioProps = {
   className: 'some-class',
 };
 
-const fieldsetRadioProps = {
-  className: 'some-class',
-  legendText: 'Radio Button heading',
-};
-
 const searchProps = {
   className: 'some-class',
   size: 'md',
@@ -136,52 +121,45 @@ export const Default = () => (
 
       <NumberInput {...numberInputProps} />
 
-      <FormGroup {...fieldsetToggleProps}>
-        <Stack gap={3}>
-          <Toggle {...toggleProps} id="toggle-1" />
-          <Toggle disabled {...toggleProps} id="toggle-2" />
-        </Stack>
-      </FormGroup>
-
       <FormGroup {...fieldsetFileUploaderProps}>
         <FileUploader
           {...fileUploaderEvents}
           id="file-1"
           labelDescription="Choose Files..."
+          iconDescription="Dismiss file"
         />
       </FormGroup>
 
-      <FormGroup {...fieldsetRadioProps}>
-        <RadioButtonGroup
-          name="radio-button-group"
-          defaultSelected="default-selected">
-          <RadioButton
-            value="standard"
-            id="radio-1"
-            labelText="Standard Radio Button"
-            {...radioProps}
-          />
-          <RadioButton
-            value="default-selected"
-            labelText="Default Selected Radio Button"
-            id="radio-2"
-            {...radioProps}
-          />
-          <RadioButton
-            value="blue"
-            labelText="Standard Radio Button"
-            id="radio-3"
-            {...radioProps}
-          />
-          <RadioButton
-            value="disabled"
-            labelText="Disabled Radio Button"
-            id="radio-4"
-            disabled
-            {...radioProps}
-          />
-        </RadioButtonGroup>
-      </FormGroup>
+      <RadioButtonGroup
+        name="radio-button-group"
+        defaultSelected="default-selected"
+        legendText="Radio Button heading">
+        <RadioButton
+          value="standard"
+          id="radio-1"
+          labelText="Standard Radio Button"
+          {...radioProps}
+        />
+        <RadioButton
+          value="default-selected"
+          labelText="Default Selected Radio Button"
+          id="radio-2"
+          {...radioProps}
+        />
+        <RadioButton
+          value="blue"
+          labelText="Standard Radio Button"
+          id="radio-3"
+          {...radioProps}
+        />
+        <RadioButton
+          value="disabled"
+          labelText="Disabled Radio Button"
+          id="radio-4"
+          disabled
+          {...radioProps}
+        />
+      </RadioButtonGroup>
 
       <FormGroup {...fieldsetSearchProps}>
         <Search