feat(radio-simple and group): make aria-label(ledby) required

src/components/RadioSimple/RadioSimple.stories.args.ts

@@ -22,26 +22,6 @@ const radioSimpleArgTypes = {
       defaultValue: undefined,
     },
   },
-  ariaLabel: {
-    description: 'The ariaLabel is used to provide an aria-label for the RadioSimple.',
-    control: { type: 'text', required: false },
-    table: {
-      type: {
-        summary: 'string',
-      },
-      defaultValue: 'example-ariaLabel',
-    },
-  },
-  ariaLabelledBy: {
-    description: 'The ariaLabelledBy is used to provide an aria-labelledby for the RadioSimple.',
-    control: { type: 'text', required: false },
-    table: {
-      type: {
-        summary: 'string',
-      },
-      defaultValue: 'example-ariaLabelledBy',
-    },
-  },
   isDisabled: {
     description: 'The isDisabled is to set the disable state for the RadioSimple.',
     control: { type: 'boolean', required: false },

src/components/RadioSimple/RadioSimple.stories.tsx

@@ -49,6 +49,7 @@ Example.args = {
     padding: '8px',
     margin: '8px 8px',
   },
+  'aria-label': 'Some label',
 };
 
 export { Example };

src/components/RadioSimple/RadioSimple.tsx

@@ -14,25 +14,12 @@ import { RadioSimpleGroupContext } from '../RadioSimpleGroup';
  * The RadioSimple component.
  */
 const RadioSimple: FC<RadioSimpleProps> = (props: RadioSimpleProps) => {
-  const {
-    ariaLabel,
-    ariaLabelledBy,
-    children,
-    className,
-    id,
-    isDisabled = DEFAULTS.DISABLED,
-    style,
-    value,
-  } = props;
+  const { children, className, id, isDisabled = DEFAULTS.DISABLED, style, value } = props;
   const state = useContext(RadioSimpleGroupContext);
   const ref = useRef(null);
   const isSelected = state?.selectedValue === value;
   const { focusProps, isFocusVisible } = useFocusRing();
-  const { inputProps } = useRadio(
-    { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props },
-    state,
-    ref
-  );
+  const { inputProps } = useRadio(props, state, ref);
 
   return (
     <label

src/components/RadioSimple/RadioSimple.types.ts

@@ -1,44 +1,36 @@
 import { CSSProperties, ReactNode } from 'react';
+import { AriaLabelRequired } from '../../utils/a11y';
 import { AriaRadioProps } from '@react-types/radio';
 
-export interface RadioSimpleProps extends AriaRadioProps {
-  /**
-   * Optional ariaLabel on the RadioSimple component.
-   */
-  ariaLabel?: string;
-
-  /**
-   * Optional ariaLabelledBy on the RadioSimple component.
-   */
-  ariaLabelledBy?: string;
-
-  /**
-   * Child components of this RadioSimple.
-   */
-  children?: ReactNode;
-
-  /**
-   * Custom class for overriding this component's CSS.
-   */
-  className?: string;
-
-  /**
-   * The id for the RadioSimple component.
-   */
-  id?: string;
-
-  /**
-   * Disabled state for the RadioSimple component.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Custom style for overriding this component's CSS.
-   */
-  style?: CSSProperties;
-
-  /**
-   * The value of the RadioSimple component.
-   */
-  value: string;
-}
+export type RadioSimpleProps = AriaLabelRequired &
+  AriaRadioProps & {
+    /**
+     * Child components of this RadioSimple.
+     */
+    children?: ReactNode;
+
+    /**
+     * Custom class for overriding this component's CSS.
+     */
+    className?: string;
+
+    /**
+     * The id for the RadioSimple component.
+     */
+    id?: string;
+
+    /**
+     * Disabled state for the RadioSimple component.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * Custom style for overriding this component's CSS.
+     */
+    style?: CSSProperties;
+
+    /**
+     * The value of the RadioSimple component.
+     */
+    value: string;
+  };

src/components/RadioSimple/RadioSimple.typetest.ts

@@ -0,0 +1,14 @@
+import { Expect, ExpectExtends, ExpectFalse } from '../../utils/typetest.util';
+import { RadioSimpleProps } from './RadioSimple.types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type cases = [
+  Expect<ExpectExtends<RadioSimpleProps, { 'aria-label': 'Some label'; value: 'A' }>>,
+  Expect<ExpectExtends<RadioSimpleProps, { 'aria-labelledby': 'some-id'; value: 'A' }>>,
+
+  ExpectFalse<ExpectExtends<RadioSimpleProps, { 'aria-label': 'Some label' }>>,
+  ExpectFalse<ExpectExtends<RadioSimpleProps, { 'aria-labelledby': 'some-id' }>>,
+  ExpectFalse<ExpectExtends<RadioSimpleProps, { value: 'A' }>>,
+
+  ExpectFalse<ExpectExtends<RadioSimpleProps, Record<string, never>>>
+];

src/components/RadioSimple/RadioSimple.unit.test.tsx

@@ -22,7 +22,7 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" />
+          <RadioSimple aria-label="Some label" children={children} value="red" />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -36,7 +36,7 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" ariaLabel={ariaLabel} />
+          <RadioSimple children={children} value="red" aria-label={ariaLabel} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -50,7 +50,7 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" ariaLabelledBy={ariaLabelledBy} />
+          <RadioSimple children={children} value="red" aria-labelledby={ariaLabelledBy} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -64,7 +64,12 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" className={className} />
+          <RadioSimple
+            aria-label="Some label"
+            children={children}
+            value="red"
+            className={className}
+          />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -78,7 +83,7 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" id={id} />
+          <RadioSimple aria-label="Some label" children={children} value="red" id={id} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -92,7 +97,12 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" isDisabled={isDisabled} />
+          <RadioSimple
+            aria-label="Some label"
+            children={children}
+            value="red"
+            isDisabled={isDisabled}
+          />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -106,7 +116,7 @@ describe('<RadioSimple />', () => {
 
       const { asFragment } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" style={style} />
+          <RadioSimple aria-label="Some label" children={children} value="red" style={style} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -120,7 +130,7 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" />
+          <RadioSimple aria-label="Some label" children={children} value="red" />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -136,7 +146,7 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" ariaLabel={ariaLabel} />
+          <RadioSimple children={children} value="red" aria-label={ariaLabel} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -152,7 +162,7 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" ariaLabelledBy={ariaLabelledBy} />
+          <RadioSimple children={children} value="red" aria-labelledby={ariaLabelledBy} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -168,7 +178,12 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" className={className} />
+          <RadioSimple
+            aria-label="Some label"
+            children={children}
+            value="red"
+            className={className}
+          />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -184,7 +199,7 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" id={id} />
+          <RadioSimple aria-label="Some label" children={children} value="red" id={id} />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -200,7 +215,12 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" isDisabled={isDisabled} />
+          <RadioSimple
+            aria-label="Some label"
+            children={children}
+            value="red"
+            isDisabled={isDisabled}
+          />
         </RadioSimpleGroupContext.Provider>
       );
 
@@ -216,7 +236,7 @@ describe('<RadioSimple />', () => {
 
       const { container } = render(
         <RadioSimpleGroupContext.Provider value={'red'}>
-          <RadioSimple children={children} value="red" style={style} />
+          <RadioSimple aria-label="Some label" children={children} value="red" style={style} />
         </RadioSimpleGroupContext.Provider>
       );
 

src/components/RadioSimple/RadioSimple.unit.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`<RadioSimple /> snapshot should match snapshot 1`] = `
       style="border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
     >
       <input
+        aria-label="Some label"
         tabindex="0"
         type="radio"
         value="red"
@@ -98,6 +99,7 @@ exports[`<RadioSimple /> snapshot should match snapshot with className 1`] = `
       style="border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
     >
       <input
+        aria-label="Some label"
         tabindex="0"
         type="radio"
         value="red"
@@ -127,6 +129,7 @@ exports[`<RadioSimple /> snapshot should match snapshot with id 1`] = `
       style="border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
     >
       <input
+        aria-label="Some label"
         id="example-id"
         tabindex="0"
         type="radio"
@@ -156,6 +159,7 @@ exports[`<RadioSimple /> snapshot should match snapshot with isDisabled 1`] = `
       style="border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
     >
       <input
+        aria-label="Some label"
         disabled=""
         type="radio"
         value="red"
@@ -185,6 +189,7 @@ exports[`<RadioSimple /> snapshot should match snapshot with style 1`] = `
       style="border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
     >
       <input
+        aria-label="Some label"
         tabindex="0"
         type="radio"
         value="red"

src/components/RadioSimpleGroup/RadioSimpleGroup.stories.tsx

@@ -32,6 +32,7 @@ Example.args = {
       <RadioSimple
         value="red"
         key="0"
+        aria-label="Red"
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -48,6 +49,7 @@ Example.args = {
       <RadioSimple
         value="blue"
         key="1"
+        aria-label="Blue"
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -64,6 +66,7 @@ Example.args = {
       <RadioSimple
         value="yellow"
         key="2"
+        aria-label="Yellow"
         style={{
           display: 'flex',
           flexDirection: 'column',
@@ -98,6 +101,7 @@ Layout.parameters = {
           <RadioSimple
             value="grid"
             key="0"
+            aria-label="Grid"
             style={{
               display: 'flex',
               flexDirection: 'column',
@@ -115,6 +119,7 @@ Layout.parameters = {
           <RadioSimple
             value="stack"
             key="1"
+            aria-label="Stack"
             style={{
               display: 'flex',
               flexDirection: 'column',
@@ -132,6 +137,7 @@ Layout.parameters = {
           <RadioSimple
             value="sideBySide"
             key="2"
+            aria-label="Side by Side"
             style={{
               display: 'flex',
               flexDirection: 'column',