Add new aria-labels to RadioButton group component

Author: Kubit

src/components/radioButtonGroup/components/radioButton/radioButton.styled.ts

@@ -1,26 +1,9 @@
 import styled, { css } from 'styled-components';
 
 import { focusVisibleAlt } from '@/styles/mixins';
-import { VariantStyles } from '@/types';
 import { getStyles } from '@/utils';
 
-import {
-  IRadioButtonStyled,
-  RadioButtonBaseStyles,
-  RadioButtonStateType,
-  RadioButtonStylesType,
-} from './types';
-
-interface IRadioButtonContentStyled {
-  styles: VariantStyles<RadioButtonStylesType>;
-  state: RadioButtonStateType;
-  hasLabel?: boolean;
-  lastChild?: boolean;
-}
-
-interface IRadioButtonErrorStyled {
-  styles?: RadioButtonBaseStyles;
-}
+import { RadioButtonBaseStyles, RadioButtonStateStylesType, RadioButtonStateType } from './types';
 
 interface IRadioButtonErrorStyled {
   styles?: RadioButtonBaseStyles;
@@ -39,11 +22,14 @@ const getDynamicStyles = (styles?: RadioButtonBaseStyles) => css`
   }
 `;
 
-export const RadioButtonContainerInput = styled.div<IRadioButtonStyled>`
+export const RadioButtonContainerInput = styled.div<{ styles: RadioButtonStateStylesType }>`
   ${props => getStyles(props.styles[RadioButtonStateType.DEFAULT]?.radioButtonContainer)}
 `;
 
-export const RadioButtonInputStyled = styled.input<IRadioButtonStyled>`
+export const RadioButtonInputStyled = styled.input<{
+  styles: RadioButtonStateStylesType & { altVariant?: boolean };
+  state?: RadioButtonStateType;
+}>`
   appearance: none;
   cursor: pointer;
   display: inline-block;
@@ -59,7 +45,12 @@ export const RadioButtonInputStyled = styled.input<IRadioButtonStyled>`
   ${({ styles }) => styles.altVariant && focusVisibleAlt()}
 `;
 
-export const RadioButtonStyled = styled.div<IRadioButtonContentStyled>`
+export const RadioButtonStyled = styled.div<{
+  styles: RadioButtonStateStylesType;
+  state: RadioButtonStateType;
+  hasLabel?: boolean;
+  lastChild?: boolean;
+}>`
   display: ${props => (props.hasLabel ? 'grid' : 'block')};
   grid-template-columns: auto 1fr;
   ${props => getStyles(props.styles?.[props.state]?.rowContainer)}
@@ -76,13 +67,13 @@ export const RadioButtonLabelStyled = styled.div`
   align-items: center;
 `;
 
-export const RadioButtonErrorStyled = styled.div<IRadioButtonErrorStyled>`
+export const RadioButtonErrorStyled = styled.div<{ styles?: RadioButtonBaseStyles }>`
   ${({ styles }) => getStyles(styles?.errorMessageContainer)};
   p {
     display: flex;
   }
 `;
 
-export const ErrorIconWrapperStyled = styled.span<IRadioButtonErrorStyled>`
+export const ErrorIconWrapperStyled = styled.span<{ styles?: RadioButtonBaseStyles }>`
   ${({ styles }) => getStyles(styles?.errorMessageIconContainer)};
 `;

src/components/radioButtonGroup/components/radioButton/radioButtonStandAlone.tsx

@@ -50,13 +50,17 @@ export const RadioButtonStandAlone = (props: IRadioButtonStandAlone): JSX.Elemen
               error: props.error,
             })
           }
+          aria-hidden={props['aria-hidden']}
+          aria-label={props['aria-label']}
+          aria-labelledby={props['aria-labelledby']}
           checked={props.checked}
           data-testid={`${props.dataTestId}Input`}
           disabled={props.disabled}
           id={inputId}
           name={props.name}
           state={props.state}
           styles={props.styles}
+          tabIndex={props.tabIndex}
           type="radio"
           value={props.value}
           onBlur={props.onBlur}

src/components/radioButtonGroup/components/radioButton/types/radioButton.ts

@@ -9,12 +9,6 @@ import { VariantStyles } from '@/types/variantStyles';
 import { RadioButtonStylesType } from './radioButtonTheme';
 import { RadioButtonStateType } from './state';
 
-export interface IRadioButtonStyled {
-  styles: VariantStyles<RadioButtonStylesType> & { altVariant?: boolean };
-  state?: RadioButtonStateType;
-  hasLabel?: boolean;
-}
-
 export type RadioButtonLabelType = Omit<ILabelStandAlone, 'children' | 'inputId'> & {
   content?: string;
 };
@@ -23,9 +17,15 @@ export type RadioButtonSubtitleType = Omit<IText<string>, 'children'> & {
   content?: JSX.Element | string;
 };
 
-export interface IRadioButtonStandAlone extends IRadioButtonStyled {
-  checked: boolean;
-  name: string;
+type RadioButtonAriaAttributes = Pick<
+  React.AriaAttributes,
+  'aria-label' | 'aria-labelledby' | 'aria-hidden'
+>;
+
+export interface IRadioButtonStandAlone extends RadioButtonAriaAttributes {
+  styles: VariantStyles<RadioButtonStylesType> & { altVariant?: boolean };
+  checked?: boolean;
+  name?: string;
   label?: RadioButtonLabelType;
   errorMessage?: string;
   errorIcon?: IElementOrIcon;
@@ -36,10 +36,11 @@ export interface IRadioButtonStandAlone extends IRadioButtonStyled {
   state: RadioButtonStateType;
   error?: boolean;
   disabled?: boolean;
-  value: string | number;
+  value?: string | number;
   dataTestId?: string;
   screenReaderId?: string;
   id?: string;
+  tabIndex?: number;
   lastChild?: boolean;
 }
 /**
@@ -50,10 +51,11 @@ export interface IRadioButtonStandAlone extends IRadioButtonStyled {
  * @property {V} variant - Variant of the radio button.
  */
 export interface IRadioButton<V = undefined extends string ? unknown : string>
-  extends Omit<IRadioButtonStandAlone, 'state'> {
+  extends Omit<IRadioButtonStandAlone, 'state' | 'styles'> {
   /**
    * @deprecated `state` is deprecated. Please use `error`, `disabled` or `checked` instead.
    */
   state?: RadioButtonStateType;
+  styles?: VariantStyles<RadioButtonStylesType> & { altVariant?: boolean };
   variant: V;
 }

src/components/radioButtonGroup/components/radioButton/types/radioButtonTheme.ts

@@ -24,8 +24,10 @@ export type RadioButtonBaseStyles = {
   };
 };
 
+export type RadioButtonStateStylesType = {
+  [state in RadioButtonStateType]?: RadioButtonBaseStyles;
+};
+
 export type RadioButtonStylesType<P extends string = string> = {
-  [variant in P]: {
-    [state in RadioButtonStateType]?: RadioButtonBaseStyles;
-  };
+  [variant in P]: RadioButtonStateStylesType;
 };