fix: unified behavior when focusing on CheckBox.Item with screen read…

…er (#2921)
callstack · Nov 2, 2021 · 5faa1ec · 5faa1ec
1 parent 5c8544f
commit 5faa1ec
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 2 deletions.
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -111,8 +111,20 @@ const CheckboxItem = ({
   }
 
   return (
-    <TouchableRipple onPress={onPress} testID={testID}>
-      <View style={[styles.container, style]} pointerEvents="none">
+    <TouchableRipple
+      accessibilityLabel={label}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: status === 'checked',
+      }}
+      onPress={onPress}
+      testID={testID}
+    >
+      <View
+        style={[styles.container, style]}
+        pointerEvents="none"
+        importantForAccessibility="no-hide-descendants"
+      >
         {isLeading && checkbox}
         <Text
           style={[

diff --git a/src/components/__tests__/Checkbox/CheckboxItem.test.js b/src/components/__tests__/Checkbox/CheckboxItem.test.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
+import { render } from 'react-native-testing-library';
 import Checkbox from '../../Checkbox';
 
 it('renders unchecked', () => {
@@ -47,3 +48,30 @@ it('can render leading checkbox control', () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it('should have `accessibilityState={ checked: true }` when `status="checked"`', () => {
+  const { getByA11yState } = render(
+    <Checkbox.Item status="checked" label="Checked Button" />
+  );
+
+  const element = getByA11yState({ checked: true });
+  expect(element).toBeTruthy();
+});
+
+it('should have `accessibilityState={ checked: false }` when `status="unchecked"', () => {
+  const { getByA11yState } = render(
+    <Checkbox.Item status="unchecked" label="Unchecked Button" />
+  );
+
+  const element = getByA11yState({ checked: false });
+  expect(element).toBeTruthy();
+});
+
+it('should have `accessibilityState={ checked: false }` when `status="indeterminate"', () => {
+  const { getByA11yState } = render(
+    <Checkbox.Item status="indeterminate" label="Indeterminate Button" />
+  );
+
+  const element = getByA11yState({ checked: false });
+  expect(element).toBeTruthy();
+});
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
@@ -2,6 +2,13 @@
 
 exports[`can render leading checkbox control 1`] = `
 <View
+  accessibilityLabel="Default with leading control"
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": false,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -19,6 +26,7 @@ exports[`can render leading checkbox control 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       Array [
@@ -142,6 +150,13 @@ exports[`can render leading checkbox control 1`] = `
 
 exports[`can render the Android checkbox on different platforms 1`] = `
 <View
+  accessibilityLabel="iOS Checkbox"
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": false,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -159,6 +174,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       Array [
@@ -316,6 +332,13 @@ exports[`can render the Android checkbox on different platforms 1`] = `
 
 exports[`can render the iOS checkbox on different platforms 1`] = `
 <View
+  accessibilityLabel="iOS Checkbox"
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": false,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -333,6 +356,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       Array [
@@ -456,6 +480,13 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
 
 exports[`renders unchecked 1`] = `
 <View
+  accessibilityLabel="Unchecked Button"
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": false,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -473,6 +504,7 @@ exports[`renders unchecked 1`] = `
   }
 >
   <View
+    importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
     style={
       Array [