Merge pull request #60 from a7medev/feat/improve-a11y

feat: improve accessibility

Author: ThakurBallary

lib/RadioButton.tsx

@@ -53,8 +53,12 @@ export default function RadioButton({
           { opacity: disabled ? 0.2 : 1 },
           containerStyle,
         ]}
+        disabled={disabled}
         testID={testID}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="radio"
+        accessibilityLabel={label || accessibilityLabel}
+        accessibilityHint={description}
+        accessibilityState={{ checked: selected, disabled }}
       >
         <View
           style={[

lib/RadioGroup.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import RadioButton from './RadioButton';
 import { RadioGroupProps } from './types';
 
-export default function RadioGroup({ containerStyle, layout = 'column', onPress, radioButtons, selectedId, testID}: RadioGroupProps) {
+export default function RadioGroup({ accessibilityLabel, containerStyle, layout = 'column', onPress, radioButtons, selectedId, testID}: RadioGroupProps) {
 
   function handlePress(id: string) {
     if(id !== selectedId && onPress) {
@@ -13,7 +13,12 @@ export default function RadioGroup({ containerStyle, layout = 'column', onPress,
   }
 
   return (
-    <View style={[styles.container, { flexDirection: layout }, containerStyle]} testID={testID}>
+    <View
+      style={[styles.container, { flexDirection: layout }, containerStyle]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="radiogroup"
+    >
       {radioButtons.map((button) => (
         <RadioButton
           {...button}

lib/types.ts

@@ -22,6 +22,7 @@ export type RadioButtonProps = {
 };
 
 export type RadioGroupProps = {
+  accessibilityLabel?: string;
   containerStyle?: StyleProp<ViewStyle>;
   layout?: 'row' | 'column';
   onPress?: (selectedId: string) => void;