refactor(ui): update radiogroupfield to use fieldset instead of view …

…as fieldset, update references and docs

docs/package.json

@@ -23,7 +23,7 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "5.3.0",
+    "@aws-amplify/ui-react": "^5.3.0",
     "@aws-amplify/ui-react-storage": "2.3.0",
     "@cucumber/gherkin": "^19.0.3",
     "@cucumber/messages": "^16.0.1",

docs/src/components/home/ThemeSwitcher.tsx

@@ -115,11 +115,11 @@ const Preview = ({ platform }) => {
               />
               <CheckboxField label="Frosting" value="Frosting" name="topping" />
               <RadioGroupField
-                label="Language"
+                legend="Language"
                 name="theme-language"
                 defaultValue="css"
                 gap="small"
-                labelHidden
+                legendHidden
               >
                 <Radio value="html">HTML</Radio>
                 <Radio value="css">CSS</Radio>

docs/src/components/home/sections/PrimitiveSection.tsx

@@ -126,12 +126,12 @@ const Preview = () => {
         <Card variation="elevated" flex="1">
           <Center>
             <RadioGroupField
-              label="Language"
+              legend="Language"
               name="primitive-language"
               defaultValue="css"
               direction="row"
               gap="small"
-              labelHidden
+              legendHidden
             >
               <Radio value="html">HTML</Radio>
               <Radio value="css">CSS</Radio>

docs/src/pages/[platform]/components/fieldset/examples/DisabledFieldsetTest.tsx

@@ -108,7 +108,7 @@ export const DisabledFieldsetTest = () => {
             rows={3}
             isDisabled={false}
           />
-          <RadioGroupField label="Language" name="language" isDisabled={false}>
+          <RadioGroupField legend="Language" name="language" isDisabled={false}>
             <Radio value="HTML">HTML</Radio>
             <Radio value="CSS">CSS</Radio>
             <Radio value="JavaScript">JavaScript</Radio>

docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx

@@ -14,8 +14,11 @@ export interface RadioGroupFieldPropControlsProps extends RadioGroupFieldProps {
   setIsDisabled: (
     value: React.SetStateAction<RadioGroupFieldProps['isDisabled']>
   ) => void;
-  setLabel: (
-    value: React.SetStateAction<RadioGroupFieldProps['label']>
+  setVariation: (
+    value: React.SetStateAction<RadioGroupFieldProps['variation']>
+  ) => void;
+  setLegend: (
+    value: React.SetStateAction<RadioGroupFieldProps['legend']>
   ) => void;
   setSize: (value: React.SetStateAction<RadioGroupFieldProps['size']>) => void;
   setLabelPosition: (
@@ -31,22 +34,24 @@ export const RadioGroupFieldPropControls: RadioGroupFieldPropControlsInterface =
   ({
     setDirection,
     setIsDisabled,
-    label,
-    setLabel,
+    setLegend,
     setSize,
-    labelPosition,
-    isDisabled,
     setLabelPosition,
+    setVariation,
+    isDisabled,
+    legend,
+    labelPosition,
+    variation,
   }) => {
     return (
       <Flex direction="column">
         <TextField
-          id="label"
-          name="label"
-          label="label"
-          value={label as string}
+          id="legend"
+          name="legend"
+          label="legend"
+          value={legend as string}
           onChange={(event) => {
-            setLabel(event.target.value as RadioGroupFieldProps['label']);
+            setLegend(event.target.value as RadioGroupFieldProps['legend']);
           }}
         />
 
@@ -68,6 +73,20 @@ export const RadioGroupFieldPropControls: RadioGroupFieldPropControlsInterface =
           <option value="bottom">bottom</option>
         </SelectField>
 
+        <SelectField
+          label="variation"
+          name="variation"
+          value={variation}
+          onChange={(event) =>
+            setVariation(
+              event.target.value as RadioGroupFieldProps['variation']
+            )
+          }
+        >
+          <option value="plain">plain (default)</option>
+          <option value="outlined">outlined</option>
+        </SelectField>
+
         <SelectField
           label="direction"
           name="direction"

docs/src/pages/[platform]/components/radiogroupfield/demo.tsx

@@ -12,18 +12,20 @@ import { demoState } from '@/utils/demoState';
 import { getPropString } from '../utils/getPropString';
 
 const propsToCode = ({
-  label,
+  legend,
   labelPosition,
+  variation,
   size,
   direction,
   name,
   isDisabled,
 }: RadioGroupFieldProps) => {
   return (
     `<RadioGroupField` +
-    getPropString(label, 'label') +
+    getPropString(legend, 'legend') +
     getPropString(name, 'name') +
     getPropString(labelPosition, 'labelPosition') +
+    getPropString(variation, 'variation') +
     (direction === 'row' ? `\n  direction=${JSON.stringify(direction)}` : '') +
     getPropString(size, 'size') +
     (isDisabled ? `\n  isDisabled={${isDisabled}}` : '') +
@@ -54,8 +56,9 @@ export const RadioGroupFieldDemo = () => {
     >
       <RadioGroupField
         name={props.name}
-        label={props.label}
+        legend={props.legend}
         defaultValue={props.defaultValue}
+        variation={props.variation}
         labelPosition={props.labelPosition}
         isDisabled={props.isDisabled}
         direction={props.direction}

docs/src/pages/[platform]/components/radiogroupfield/examples/BasicExample.tsx

@@ -1,7 +1,7 @@
 import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
 export const BasicExample = () => (
-  <RadioGroupField label="Animal" name="animal" defaultValue="Dog">
+  <RadioGroupField legend="Animal" name="animal" defaultValue="Dog">
     <Radio value="Dog">Dog</Radio>
     <Radio value="Cat">Cat</Radio>
     <Radio value="Bird">Bird</Radio>

docs/src/pages/[platform]/components/radiogroupfield/examples/ControlledExample.tsx

@@ -6,7 +6,7 @@ export const ControlledExample = () => {
 
   return (
     <RadioGroupField
-      label="Fruit"
+      legend="Fruit"
       name="fruit"
       value={value}
       onChange={(e) => setValue(e.target.value)}

docs/src/pages/[platform]/components/radiogroupfield/examples/DirectionExample.tsx

@@ -2,12 +2,12 @@ import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
 export const DirectionExample = () => (
   <>
-    <RadioGroupField label="Column" name="column">
+    <RadioGroupField legend="Column" name="column">
       <Radio value="top">Top</Radio>
       <Radio value="to-column">To</Radio>
       <Radio value="bottom">Bottom</Radio>
     </RadioGroupField>
-    <RadioGroupField label="Row" name="row" direction="row">
+    <RadioGroupField legend="Row" name="row" direction="row">
       <Radio value="left">Left</Radio>
       <Radio value="to-row">To</Radio>
       <Radio value="right">Right</Radio>

docs/src/pages/[platform]/components/radiogroupfield/examples/DisabledExample.tsx

@@ -2,7 +2,7 @@ import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
 export const DisabledExample = () => (
   <>
-    <RadioGroupField label="Disabled Radio" name="disabled-radio">
+    <RadioGroupField legend="Disabled Radio" name="disabled-radio">
       <Radio value="option-1">Option 1</Radio>
       <Radio value="option-2" isDisabled>
         Option 2 is disabled
@@ -11,7 +11,7 @@ export const DisabledExample = () => (
     </RadioGroupField>
 
     <RadioGroupField
-      label="Disabled RadioGroupField"
+      legend="Disabled RadioGroupField"
       name="disabled-field"
       isDisabled
     >

docs/src/pages/[platform]/components/radiogroupfield/examples/ErrorExample.tsx

@@ -8,12 +8,12 @@ export const ErrorExample = () => {
 
   return (
     <RadioGroupField
-      label="Language"
+      legend="Language"
       name="example-12"
       onChange={(e) => setLanguage(e.target.value)}
       errorMessage="This is a required field. Please select an option."
       hasError={!language}
-      labelHidden
+      legendHidden
     >
       {options.map((option) => (
         <Radio key={option} value={option}>

docs/src/pages/[platform]/components/radiogroupfield/examples/LabelPositionExample.tsx

@@ -2,28 +2,28 @@ import { Radio, RadioGroupField, Flex } from '@aws-amplify/ui-react';
 
 export const LabelPositionExample = () => (
   <Flex>
-    <RadioGroupField label="Default" name="default" labelHidden>
+    <RadioGroupField legend="Default" name="default" legendHidden>
       <Radio value="default">Default</Radio>
     </RadioGroupField>
 
     <RadioGroupField
-      label="Start"
+      legend="Start"
       name="start"
       labelPosition="start"
-      labelHidden
+      legendHidden
     >
       <Radio value="start">Start</Radio>
     </RadioGroupField>
 
-    <RadioGroupField label="Top" name="top" labelPosition="top" labelHidden>
+    <RadioGroupField legend="Top" name="top" labelPosition="top" legendHidden>
       <Radio value="top">Top</Radio>
     </RadioGroupField>
 
     <RadioGroupField
-      label="Bottom"
+      legend="Bottom"
       name="bottom"
       labelPosition="bottom"
-      labelHidden
+      legendHidden
     >
       <Radio value="bottom">Bottom</Radio>
     </RadioGroupField>

docs/src/pages/[platform]/components/radiogroupfield/examples/RadioGroupFieldThemeExample.tsx

@@ -5,9 +5,6 @@ const theme = {
   tokens: {
     components: {
       radiogroup: {
-        label: {
-          color: { value: '{colors.blue.80}' },
-        },
         radio: {
           borderWidth: { value: '{borderWidths.small}' },
           borderColor: { value: '{colors.blue.60}' },
@@ -26,7 +23,7 @@ const theme = {
 
 export const RadioGroupFieldThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
-    <RadioGroupField label="Themed example" name="themed" defaultValue="blue">
+    <RadioGroupField legend="Themed example" name="themed" defaultValue="blue">
       <Radio value="blue">Blue</Radio>
       <Radio value="navy">Navy</Radio>
       <Radio value="cerulean">Cerulean</Radio>

docs/src/pages/[platform]/components/radiogroupfield/examples/ReadOnlyExample.tsx

@@ -2,7 +2,7 @@ import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
 export const ReadOnlyExample = () => (
   <RadioGroupField
-    label="Read-only"
+    legend="Read-only"
     name="read-only"
     defaultValue="love"
     isReadOnly

docs/src/pages/[platform]/components/radiogroupfield/examples/SizeExample.tsx

@@ -2,13 +2,13 @@ import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
 export const SizeExample = () => (
   <>
-    <RadioGroupField label="small" name="small" size="small" labelHidden>
+    <RadioGroupField legend="small" name="small" size="small" legendHidden>
       <Radio value="small">Small</Radio>
     </RadioGroupField>
-    <RadioGroupField label="default" name="default" labelHidden>
+    <RadioGroupField legend="default" name="default" legendHidden>
       <Radio value="default">Default</Radio>
     </RadioGroupField>
-    <RadioGroupField label="large" name="large" size="large" labelHidden>
+    <RadioGroupField legend="large" name="large" size="large" legendHidden>
       <Radio value="large">Large</Radio>
     </RadioGroupField>
   </>

docs/src/pages/[platform]/components/radiogroupfield/react.mdx

@@ -26,7 +26,7 @@ import {
 
 Import the Radio and RadioGroupField components, and nest the Radio options inside the RadioGroupField. 
 
-RadioGroupField requires both `label` and `name` for accessibility and form submission, respectively. Radio only requires the `value` prop, which will be submitted with form data. 
+RadioGroupField requires both `legend` and `name` for accessibility and form submission, respectively. Radio only requires the `value` prop, which will be submitted with form data. 
 
 You also have the option to set a Radio as pre-selected by passing its `value` to the `defaultValue` prop on the RadioGroupField. 
 
@@ -86,9 +86,9 @@ Use the `direction` prop to change the RadioGroupField direction. Available opti
   </ExampleCode>
 </Example>
 
-### Label position
+### Legend position
 
-Use the `labelPosition` prop to control where the label is in relation to the Radio. You may pass `labelPosition` to either the RadioGroupField or individual Radios.
+Use the `labelPosition` prop to control where the legend is in relation to the RadioGroupField. You may pass `labelPosition` to either the RadioGroupField or individual Radios.
 
 <Example>
   <LabelPositionExample />
@@ -146,9 +146,16 @@ Use the `hasError` and `errorMessage` props to mark a RadioGroupField as having
   </ExampleCode>
 </Example>
 
-### Accessibility / Label behavior
+### Accessibility / Legend behavior
 
-<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>
+The form primitives are accessible by default. A matching `legend` HTML element will be connected to the form control -- simply provide a `legend` prop with a `string` or `ReactNode`. If no `id` is provided, one will be automatically generated and connected to both `legend` and form control elements.
+
+#### How can I visually hide the legend while maintaining accessibility?
+
+In some applications it may be desirable to hide the legend when the field purpose is visually apparent such as a search field with button.
+The `legendHidden` prop can be used to visually hide the legend while still keeping it visible for screenreaders.
+
+UX Tip: refrain hiding legend if doing so hides important information needed by the user to fill out the field.
 
 ## CSS Styling
 
@@ -175,10 +182,10 @@ Use the `hasError` and `errorMessage` props to mark a RadioGroupField as having
 To override styling on all Radio buttons, you can set the Amplify CSS variables or use the built-in `.amplify-radio__button` class.
 
 <RadioGroupField
-  label="Colors"
+  legend="Colors"
   name="colors"
   defaultValue="a"
-  labelHidden
+  legendHidden
   className="global-radio-styling"
 >
   <Radio value="a">
@@ -222,10 +229,10 @@ _Using a class selector:_
 
 <Example>
   <RadioGroupField
-    label="Colors"
+    legend="Colors"
     name="colors"
     defaultValue="red"
-    labelHidden
+    legendHidden
   >
     <Radio value="red" className="custom-radio">
       Red
@@ -252,7 +259,7 @@ _Using a class selector:_
 ```jsx
 import { Radio, RadioGroupField } from '@aws-amplify/ui-react';
 
-<RadioGroupField label="Language" name="language" defaultValue="html">
+<RadioGroupField legend="Language" name="language" defaultValue="html">
   <Radio value="html" className="custom-radio">
     html
   </Radio>