refactor: correct disabling RadioButtonItem, add missing a11y props (c…

…allstack#3195)
pedroelton · Jun 9, 2022 · 83b70da · 83b70da
1 parent bd9f012
commit 83b70da
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 13 deletions.
diff --git a/example/src/Examples/RadioButtonItemExample.tsx b/example/src/Examples/RadioButtonItemExample.tsx
@@ -9,6 +9,7 @@ const RadioButtonItemExample = () => {
   const [checkedIOS, setCheckedIOS] = React.useState(true);
   const [checkedLeadingControl, setCheckedLeadingControl] =
     React.useState(true);
+  const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
   const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
 
   const { isV3 } = useTheme();
@@ -42,6 +43,13 @@ const RadioButtonItemExample = () => {
         value="iOS"
         position="leading"
       />
+      <RadioButton.Item
+        label="Disabled checkbox"
+        status={checkedDisabled ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedDisabled(!checkedDisabled)}
+        value="iOS"
+        disabled
+      />
       {isV3 && (
         <RadioButton.Item
           label="Default with titleLarge title variant"

diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -33,6 +33,10 @@ type Props = {
    * Function to execute on press.
    */
   onPress?: () => void;
+  /**
+   * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
+   */
+  accessibilityLabel?: string;
   /**
    * Custom color for unchecked checkbox.
    */
@@ -114,6 +118,7 @@ const CheckboxItem = ({
   testID,
   mode,
   position = 'trailing',
+  accessibilityLabel = label,
   disabled,
   labelVariant = 'bodyLarge',
   ...props
@@ -143,7 +148,7 @@ const CheckboxItem = ({
 
   return (
     <TouchableRipple
-      accessibilityLabel={label}
+      accessibilityLabel={accessibilityLabel}
       accessibilityRole="checkbox"
       accessibilityState={{
         checked: status === 'checked',

diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { withTheme } from '../../core/theming';
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress } from './utils';
+import { handlePress, isChecked } from './utils';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import RadioButton from './RadioButton';
 import Text from '../Typography/Text';
@@ -133,7 +133,7 @@ const RadioButtonItem = ({
   uncheckedColor,
   status,
   theme,
-  accessibilityLabel,
+  accessibilityLabel = label,
   testID,
   mode,
   position = 'trailing',
@@ -152,30 +152,42 @@ const RadioButtonItem = ({
   }
 
   const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
+  const disabledTextColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme.colors.disabled;
   const textAlign = isLeading ? 'right' : 'left';
 
   const computedStyle = {
-    color: textColor,
+    color: disabled ? disabledTextColor : textColor,
     textAlign,
   } as TextStyle;
 
   return (
     <RadioButtonContext.Consumer>
       {(context?: RadioButtonContextType) => {
+        const checked =
+          isChecked({
+            contextValue: context?.value,
+            status,
+            value,
+          }) === 'checked';
         return (
           <TouchableRipple
-            onPress={
-              disabled
-                ? undefined
-                : () =>
-                    handlePress({
-                      onPress: onPress,
-                      onValueChange: context?.onValueChange,
-                      value,
-                    })
+            onPress={() =>
+              handlePress({
+                onPress: onPress,
+                onValueChange: context?.onValueChange,
+                value,
+              })
             }
             accessibilityLabel={accessibilityLabel}
+            accessibilityRole="radio"
+            accessibilityState={{
+              checked,
+              disabled,
+            }}
             testID={testID}
+            disabled={disabled}
           >
             <View style={[styles.container, style]} pointerEvents="none">
               {isLeading && radioButton}

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
@@ -2,6 +2,14 @@
 
 exports[`can render leading radio button control 1`] = `
 <View
+  accessibilityLabel="Default with leading control"
+  accessibilityRole="radio"
+  accessibilityState={
+    Object {
+      "checked": false,
+      "disabled": undefined,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}
@@ -128,6 +136,14 @@ exports[`can render leading radio button control 1`] = `
 
 exports[`can render the Android radio button on different platforms 1`] = `
 <View
+  accessibilityLabel="iOS Checkbox"
+  accessibilityRole="radio"
+  accessibilityState={
+    Object {
+      "checked": false,
+      "disabled": undefined,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}
@@ -237,6 +253,14 @@ exports[`can render the Android radio button on different platforms 1`] = `
 
 exports[`can render the iOS radio button on different platforms 1`] = `
 <View
+  accessibilityLabel="iOS Radio button"
+  accessibilityRole="radio"
+  accessibilityState={
+    Object {
+      "checked": false,
+      "disabled": undefined,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}
@@ -363,6 +387,14 @@ exports[`can render the iOS radio button on different platforms 1`] = `
 
 exports[`renders unchecked 1`] = `
 <View
+  accessibilityLabel="Unchecked Button"
+  accessibilityRole="radio"
+  accessibilityState={
+    Object {
+      "checked": false,
+      "disabled": undefined,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}