From 951f74a90c32090a77688421e27b1ad4c38cfc6f Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 15 Jun 2022 21:59:12 +0300
Subject: [PATCH 1/2] feat: improve radio-group components a11y

---
 src/components/RadioButton/RadioButton.tsx    | 10 +++++++--
 .../__stories__/RadioButton.stories.tsx       |  6 +++--
 src/components/RadioGroup/RadioGroup.tsx      | 10 +++++++--
 .../__stories__/RadioGroup.stories.tsx        |  6 +++--
 src/components/types.ts                       |  4 ++++
 src/components/utils/useRadioGroup.ts         | 22 +++++++++++++++++--
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index cb1603fdc..d9259a247 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -84,10 +84,16 @@ export const RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(fu
         [],
     );
 
-    const {optionsProps} = useRadioGroup({...props, options});
+    const {containerProps, optionsProps} = useRadioGroup({...props, options});
 
     return (
-        <div ref={ref} style={style} className={b({size, width}, className)} data-qa={qa}>
+        <div
+            {...containerProps}
+            ref={ref}
+            style={style}
+            className={b({size, width}, className)}
+            data-qa={qa}
+        >
             <div
                 ref={plateRef}
                 className={b('plate')}
diff --git a/src/components/RadioButton/__stories__/RadioButton.stories.tsx b/src/components/RadioButton/__stories__/RadioButton.stories.tsx
index ec214e54c..5cada02d0 100644
--- a/src/components/RadioButton/__stories__/RadioButton.stories.tsx
+++ b/src/components/RadioButton/__stories__/RadioButton.stories.tsx
@@ -14,10 +14,12 @@ const options: RadioButtonOption[] = [
     {value: 'Value 3', content: 'Value 3'},
 ];
 
-const DefaultTemplate: Story<RadioButtonProps> = (args) => <RadioButton {...args} />;
+const DefaultTemplate: Story<RadioButtonProps> = (args) => {
+    const [value, setValue] = React.useState<string>(options[0].value);
+    return <RadioButton {...args} value={value} onUpdate={setValue} />;
+};
 export const Default = DefaultTemplate.bind({});
 Default.args = {
-    value: options[0].value,
     options,
 };
 
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index 20b9139b6..83334256a 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -52,10 +52,16 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(func
         }));
     }
 
-    const {optionsProps} = useRadioGroup({...props, options});
+    const {containerProps, optionsProps} = useRadioGroup({...props, options});
 
     return (
-        <div ref={ref} style={style} className={b({size, direction}, className)} data-qa={qa}>
+        <div
+            {...containerProps}
+            ref={ref}
+            style={style}
+            className={b({size, direction}, className)}
+            data-qa={qa}
+        >
             {optionsProps.map((optionProps) => (
                 <Radio
                     {...optionProps}
diff --git a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
index 8364d9bd1..5f2fe47e1 100644
--- a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
+++ b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
@@ -15,10 +15,12 @@ const options: RadioGroupOption[] = [
     {value: 'Value 3', content: 'Value 3'},
 ];
 
-const DefaultTemplate: Story<RadioGroupProps> = (args) => <RadioGroup {...args} />;
+const DefaultTemplate: Story<RadioGroupProps> = (args) => {
+    const [value, setValue] = React.useState<string>(options[0].value);
+    return <RadioGroup {...args} value={value} onUpdate={setValue} />;
+};
 export const Default = DefaultTemplate.bind({});
 Default.args = {
-    value: options[0].value,
     options,
 };
 
diff --git a/src/components/types.ts b/src/components/types.ts
index 736a35421..4859c22b0 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -55,6 +55,10 @@ export interface ControlGroupProps {
     defaultValue?: string;
     onUpdate?: (value: string) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     options?: ControlGroupOption[];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
diff --git a/src/components/utils/useRadioGroup.ts b/src/components/utils/useRadioGroup.ts
index 38025efb8..b84194831 100644
--- a/src/components/utils/useRadioGroup.ts
+++ b/src/components/utils/useRadioGroup.ts
@@ -4,7 +4,17 @@ import {ControlGroupProps} from '../types';
 import {useUniqId} from './useUniqId';
 
 export function useRadioGroup(props: ControlGroupProps) {
-    const {name, value, defaultValue, options = [], disabled, onUpdate, onChange} = props;
+    const {
+        name,
+        value,
+        defaultValue,
+        options = [],
+        disabled,
+        onUpdate,
+        onChange,
+        onFocus,
+        onBlur,
+    } = props;
 
     const controlId = useUniqId();
     const [valueState, setValueState] = React.useState(
@@ -28,6 +38,12 @@ export function useRadioGroup(props: ControlGroupProps) {
         [isControlled, onUpdate, onChange],
     );
 
+    const containerProps = {
+        role: 'radiogroup',
+        'aria-label': props['aria-label'],
+        'aria-labelledby': props['aria-labelledby'],
+    };
+
     const optionsProps = options.map((option) => ({
         name: name || controlId,
         value: String(option.value),
@@ -35,7 +51,9 @@ export function useRadioGroup(props: ControlGroupProps) {
         checked: currentValue === String(option.value),
         disabled: disabled || option.disabled,
         onChange: handleChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
     }));
 
-    return {optionsProps};
+    return {containerProps, optionsProps};
 }

From 4b5df18213b86c170c3a5bf4c3e622abc88ba837 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Fri, 20 Jan 2023 18:06:24 +0300
Subject: [PATCH 2/2] feat: add aria-disabled prop

---
 src/components/utils/useRadioGroup.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/utils/useRadioGroup.ts b/src/components/utils/useRadioGroup.ts
index b84194831..5ac5be395 100644
--- a/src/components/utils/useRadioGroup.ts
+++ b/src/components/utils/useRadioGroup.ts
@@ -40,6 +40,7 @@ export function useRadioGroup(props: ControlGroupProps) {
 
     const containerProps = {
         role: 'radiogroup',
+        'aria-disabled': disabled,
         'aria-label': props['aria-label'],
         'aria-labelledby': props['aria-labelledby'],
     };