feat: Add ariaControls prop to RadioGroup

pages/radio-group/progressive-disclosure.page.tsx

@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import Box from '~components/box';
+import FormField from '~components/form-field';
+import RadioGroup from '~components/radio-group';
+import Select, { SelectProps } from '~components/select';
+
+const langOptions: Array<SelectProps.Option> = [
+  { value: 'en-US', label: 'English (United States)' },
+  { value: 'en-GB', label: 'English (United Kingdom)' },
+  { value: 'de-DE', label: 'Deutsch (Deutschland)' },
+  { value: 'de-CH', label: 'Deutsch (Schweiz)' },
+];
+
+export default function RadiosPage() {
+  const [radioSelection, setRadioSelection] = useState<string>('');
+  const [lang, setLang] = useState<SelectProps.Option>(langOptions[0]);
+
+  return (
+    <Box padding="l">
+      <h1>Radio group progressive disclosure demo</h1>
+      <FormField
+        label="Language settings"
+        description="You can select a specific language or have this service automatically identify the language in your media."
+      >
+        <RadioGroup
+          value={radioSelection}
+          onChange={event => setRadioSelection(event.detail.value)}
+          ariaControls="language-settings"
+          items={[
+            {
+              label: 'Specific language',
+              value: 'specific',
+              description:
+                'If you know the language spoken in the source media, choose this option for optimal results.',
+            },
+            {
+              label: 'Automatic language detection',
+              value: 'automatic',
+              description: 'If you do not know the language spoken in the source media, choose this option.',
+            },
+          ]}
+        />
+      </FormField>
+      <Box id="language-settings" display={radioSelection !== 'specific' ? 'none' : 'block'}>
+        <FormField label="Language" description="Select the language you want to use.">
+          <Select
+            selectedOption={lang}
+            onChange={event => setLang(event.detail.selectedOption)}
+            options={langOptions}
+          />
+        </FormField>
+      </Box>
+    </Box>
+  );
+}

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -9391,6 +9391,13 @@ Object {
   ],
   "name": "RadioGroup",
   "properties": Array [
+    Object {
+      "description": "Adds \`aria-controls\` attribute to the radio group.
+If the radio group controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.",
+      "name": "ariaControls",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
 don't set this property because the form field component automatically sets it.

src/radio-group/__tests__/radio-group.test.tsx

@@ -31,12 +31,14 @@ test('renders attributes for assistive technology when set', function () {
   const ariaLabelledby = 'something';
   const ariaDescribedby = 'something else';
   const ariaLabel = 'the last one';
+  const ariaControls = 'some-id-being-controlled';
 
   const { wrapper } = renderRadioGroup(
     <RadioGroup
       ariaLabelledby={ariaLabelledby}
       ariaDescribedby={ariaDescribedby}
       ariaLabel={ariaLabel}
+      ariaControls={ariaControls}
       value={null}
       items={defaultItems}
     />
@@ -45,6 +47,7 @@ test('renders attributes for assistive technology when set', function () {
   expect(rootElement).toHaveAttribute('aria-labelledby', ariaLabelledby);
   expect(rootElement).toHaveAttribute('aria-describedby', ariaDescribedby);
   expect(rootElement).toHaveAttribute('aria-label', ariaLabel);
+  expect(rootElement).toHaveAttribute('aria-controls', ariaControls);
 });
 
 test('does not render attributes for assistive technology when not set', function () {
@@ -53,6 +56,7 @@ test('does not render attributes for assistive technology when not set', functio
   expect(rootElement).not.toHaveAttribute('aria-labelledby');
   expect(rootElement).not.toHaveAttribute('aria-describedby');
   expect(rootElement).not.toHaveAttribute('aria-label');
+  expect(rootElement).not.toHaveAttribute('aria-controls');
 });
 
 describe('name', () => {

src/radio-group/interfaces.ts

@@ -40,6 +40,12 @@ export interface RadioGroupProps extends BaseComponentProps, FormFieldControlPro
    */
   ariaRequired?: boolean;
 
+  /**
+   * Adds `aria-controls` attribute to the radio group.
+   * If the radio group controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.
+   */
+  ariaControls?: string;
+
   /**
    * Called when the user selects a different radio button. The event `detail` contains the current `value`.
    */

src/radio-group/internal.tsx

@@ -21,6 +21,7 @@ const InternalRadioGroup = React.forwardRef(
       items,
       ariaLabel,
       ariaRequired,
+      ariaControls,
       onChange,
       __internalRootRef = null,
       ...props
@@ -40,6 +41,7 @@ const InternalRadioGroup = React.forwardRef(
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-required={ariaRequired}
+        aria-controls={ariaControls}
         {...baseProps}
         className={clsx(baseProps.className, styles.root)}
         ref={__internalRootRef}