Merge pull request #63 from ThakurBallary/feat/a11y

accessibility enhancement

Author: ThakurBallary

README.md

@@ -101,6 +101,7 @@ export default function App() {
 #### RadioButton
 Key | Type | Required | Default | Valid Values
 --- | --- | --- | --- | --- 
+accessibilityLabel | string | no | radio button | any string
 borderColor | string | no | color | css color formats
 borderSize | number | 2 | | positive numbers
 color | string | no | #444 | css color formats
@@ -121,6 +122,7 @@ value | string | no |  | any string
 #### RadioGroup
 Key | Type | Required | Default | Valid Values
 --- | --- | --- | --- | ---
+accessibilityLabel | string | no | radio group | any string
 containerStyle | object | no | | react style
 layout | enum | no | column | row / column
 onPress | function | no | | any function

lib/RadioButton.tsx

@@ -4,7 +4,7 @@ import { PixelRatio, Pressable, StyleSheet, Text, View } from 'react-native';
 import { RadioButtonProps } from './types';
 
 export default function RadioButton({
-  accessibilityLabel,
+  accessibilityLabel = 'radio button',
   borderColor,
   borderSize = 2,
   color = '#444',
@@ -34,31 +34,27 @@ export default function RadioButton({
   }
 
   function handlePress() {
-    if (disabled) {
-      return null;
-    }
-    if (onPress) {
+    if(onPress) {
       onPress(id);
     }
-    return null;
   }
 
   return (
     <>
       <Pressable
+        accessibilityHint={description}
+        accessibilityLabel={label || accessibilityLabel}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: selected, disabled }}
+        disabled={disabled}
         onPress={handlePress}
         style={[
           styles.container,
           orientation,
           { opacity: disabled ? 0.2 : 1 },
           containerStyle,
         ]}
-        disabled={disabled}
         testID={testID}
-        accessibilityRole="radio"
-        accessibilityLabel={label || accessibilityLabel}
-        accessibilityHint={description}
-        accessibilityState={{ checked: selected, disabled }}
       >
         <View
           style={[

lib/RadioGroup.tsx

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-radio-buttons-group",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Simple and Best. An easy to use radio buttons for react native apps.",
   "main": "./lib/index.ts",
   "scripts": {