feat: add a helper text to radio buttons options

sumup-oss · Jul 24, 2023 · 87a565a · 87a565a
1 parent 070d553
commit 87a565a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.spec.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.spec.tsx
@@ -69,6 +69,14 @@ describe('RadioButton', () => {
       const inputEl = screen.getByRole('radio');
       expect(inputEl).toHaveAccessibleName(defaultProps.label);
     });
+
+    it('should have a description', () => {
+      render(<RadioButton {...defaultProps} description="Some explanation" />);
+      const helperEl = screen.getAllByText('Some explanation');
+      expect(helperEl[0]).toBeVisible();
+      const labelEl = screen.getByText(defaultProps.label);
+      expect(labelEl).toHaveDescription('Some explanation');
+    });
   });
 
   describe('State & Interactions', () => {

diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.tsx
@@ -29,13 +29,18 @@ import { uniqueId } from '../../util/id';
 import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
 import { AccessibilityError } from '../../util/errors';
 import { deprecate } from '../../util/logger';
+import { FieldDescription } from '../FieldAtoms';
 
 export interface RadioButtonProps
   extends InputHTMLAttributes<HTMLInputElement> {
   /**
    * A clear and concise description of the option's purpose.
    */
   label: string;
+  /**
+   * Further details about the option's purpose.
+   */
+  description?: string;
   /**
    * Triggers error styles on the component.
    */
@@ -72,7 +77,7 @@ const labelBaseStyles = ({ theme }: StyleProps) => css`
     content: '';
     display: block;
     position: absolute;
-    top: 50%;
+    top: calc(${theme.typography.body.one.lineHeight} / 2);
     left: 0;
     transform: translateY(-50%);
     transition: border ${theme.transitions.default};
@@ -87,7 +92,7 @@ const labelBaseStyles = ({ theme }: StyleProps) => css`
     content: '';
     display: block;
     position: absolute;
-    top: 50%;
+    top: calc(${theme.typography.body.one.lineHeight} / 2);
     left: ${theme.spacings.bit};
     transform: translateY(-50%) scale(0, 0);
     opacity: 0;
@@ -149,7 +154,9 @@ const inputBaseStyles = css`
   }
 
   &:disabled + label,
-  &[disabled] + label {
+  &:disabled + label span,
+  &[disabled] + label,
+  &[disabled] + label span {
     pointer-events: none;
     color: var(--cui-fg-normal-disabled);
 
@@ -203,6 +210,7 @@ export const RadioButton = forwardRef(
     {
       onChange,
       label,
+      description,
       id: customId,
       name,
       value,
@@ -258,9 +266,20 @@ export const RadioButton = forwardRef(
           invalid={invalid}
           className={className}
           style={style}
+          aria-describedby={description ? `${id}-description` : undefined}
         >
           {label}
+          {description && (
+            <FieldDescription aria-hidden="true">
+              {description}
+            </FieldDescription>
+          )}
         </RadioButtonLabel>
+        {description && (
+          <p id={`${id}-description`} css={hideVisually}>
+            {description}
+          </p>
+        )}
       </Fragment>
     );
   },

diff --git a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.stories.tsx
@@ -44,8 +44,8 @@ Base.args = {
   label: 'Choose your favourite fruit',
   defaultValue: 'banana',
   options: [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
+    { label: 'Apple', value: 'apple', description: 'Keeps the doctor away' },
+    { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
     { label: 'Mango', value: 'mango' },
   ],
   // Storybook displays the default mocked function props poorly,
@@ -89,8 +89,8 @@ Validations.args = {
   label: 'Choose your favourite fruit',
   optionalLabel: 'Optional',
   options: [
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
+    { label: 'Apple', value: 'apple', description: 'Keeps the doctor away' },
+    { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
     { label: 'Mango', value: 'mango' },
   ],
 };
@@ -102,8 +102,12 @@ export const Disabled = (args: RadioButtonGroupProps) => (
       name="fully-disabled"
       disabled
       options={[
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
+        {
+          label: 'Apple',
+          value: 'apple',
+          description: 'Keeps the doctor away',
+        },
+        { label: 'Banana', value: 'banana', description: 'Rich in Mg' },
         { label: 'Mango', value: 'mango' },
       ]}
       validationHint="All fruits are sold out"
@@ -113,9 +117,18 @@ export const Disabled = (args: RadioButtonGroupProps) => (
       {...args}
       name="partially-disabled"
       options={[
-        { label: 'Apple', value: 'apple' },
-        { label: 'Banana', value: 'banana' },
-        { label: 'Mango', value: 'mango', disabled: true },
+        {
+          label: 'Apple',
+          value: 'apple',
+          description: 'Keeps the doctor away',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+          description: 'Rich in Mg',
+          disabled: true,
+        },
+        { label: 'Mango', value: 'mango' },
       ]}
       validationHint="Some fruits are sold out"
       style={storyStyles}