feat(exoflex): support a11y for radio (#455)

kodefox · Apr 23, 2020 · 4bba682 · 4bba682
1 parent 01c470e
commit 4bba682
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/packages/exoflex/src/components/RadioButton.tsx b/packages/exoflex/src/components/RadioButton.tsx
@@ -6,12 +6,13 @@ import {
   TextStyle,
   ViewStyle,
   StyleSheet,
+  AccessibilityProps,
 } from 'react-native';
 import useTheme from '../helpers/useTheme';
 import Text from './Text';
 import RadioButtonGroup, { RadioButtonContext } from './RadioButtonGroup';
 
-export type RadioButtonProps = {
+export type RadioButtonProps = AccessibilityProps & {
   /**
    * The text/string for the radio button
    */
@@ -66,6 +67,9 @@ export default function RadioButton(props: RadioButtonProps) {
     textStyle,
     style,
     testID,
+    accessibilityState,
+    accessibilityRole,
+    ...otherAccessibilityProps
   } = props;
   let { colors, style: themeStyle } = useTheme();
   let { value: contextValue, onValueChange: contextOnValueChange } = useContext(
@@ -83,6 +87,13 @@ export default function RadioButton(props: RadioButtonProps) {
 
   return (
     <TouchableOpacity
+      {...otherAccessibilityProps}
+      accessibilityRole={accessibilityRole || 'radio'}
+      accessibilityState={{
+        checked: isChecked,
+        disabled,
+        ...accessibilityState,
+      }}
       onPress={handlePress}
       style={[styles.container, style]}
       activeOpacity={0.7}

diff --git a/packages/exoflex/src/components/RadioButtonGroup.tsx b/packages/exoflex/src/components/RadioButtonGroup.tsx
@@ -1,4 +1,5 @@
 import React, { createContext, ReactNode } from 'react';
+import { AccessibilityProps, View } from 'react-native';
 
 type RadioButtonContextType = {
   value?: string;
@@ -14,7 +15,7 @@ export let RadioButtonContext = createContext<RadioButtonContextType>(
   DefaultRadioButtonGroupContextValue,
 );
 
-type Props = {
+type Props = AccessibilityProps & {
   /**
    * Value of the selected radio button
    */
@@ -30,7 +31,13 @@ type Props = {
 };
 
 export default function RadioButtonGroup(props: Props) {
-  let { value, onValueChange, children } = props;
+  let {
+    value,
+    onValueChange,
+    children,
+    accessibilityRole,
+    ...otherAccessibilityProps
+  } = props;
 
   return (
     <RadioButtonContext.Provider
@@ -39,7 +46,12 @@ export default function RadioButtonGroup(props: Props) {
         onValueChange,
       }}
     >
-      {children}
+      <View
+        {...otherAccessibilityProps}
+        accessibilityRole={accessibilityRole || 'radiogroup'}
+      >
+        {children}
+      </View>
     </RadioButtonContext.Provider>
   );
 }

diff --git a/packages/exoflex/src/components/RichRadio/RichRadioGroup.tsx b/packages/exoflex/src/components/RichRadio/RichRadioGroup.tsx
@@ -5,11 +5,12 @@ import {
   ViewStyle,
   ScrollView,
   View,
+  AccessibilityProps,
 } from 'react-native';
 
 import useTheme from '../../helpers/useTheme';
 
-export type RichRadioGroupProps<T> = {
+export type RichRadioGroupProps<T> = AccessibilityProps & {
   data: Array<T>;
   keyExtractor: (item: T, index: number) => string;
   renderItem: ({ item, index }: { item: T; index: number }) => ReactNode;
@@ -26,6 +27,8 @@ export default function RichRadioGroup<T>(props: RichRadioGroupProps<T>) {
     style,
     contentContainerStyle,
     testID,
+    accessibilityRole,
+    ...otherAccessibilityProps
   } = props;
   let { style: themeStyle } = useTheme();
 
@@ -38,6 +41,8 @@ export default function RichRadioGroup<T>(props: RichRadioGroupProps<T>) {
 
   return (
     <ScrollView
+      {...otherAccessibilityProps}
+      accessibilityRole={accessibilityRole || 'radiogroup'}
       horizontal
       showsHorizontalScrollIndicator={false}
       style={rootStyle}

diff --git a/packages/exoflex/src/components/RichRadio/RichRadioItem.tsx b/packages/exoflex/src/components/RichRadio/RichRadioItem.tsx
@@ -5,13 +5,14 @@ import {
   TextStyle,
   TouchableOpacity,
   StyleSheet,
+  AccessibilityProps,
 } from 'react-native';
 
 import Text from '../Text';
 
 import useTheme from '../../helpers/useTheme';
 
-export type RichRadioItemProps = {
+export type RichRadioItemProps = AccessibilityProps & {
   label: string;
   selectedColor?: string;
   selected?: boolean;
@@ -36,6 +37,9 @@ export default function RichRadioItem(props: RichRadioItemProps) {
     textStyle,
     firstItemCustomStyle,
     testID,
+    accessibilityRole,
+    accessibilityState,
+    ...otherAcessibilityProps
   } = props;
   let { colors, style: themeStyle } = useTheme();
 
@@ -57,6 +61,9 @@ export default function RichRadioItem(props: RichRadioItemProps) {
 
   return (
     <TouchableOpacity
+      {...otherAcessibilityProps}
+      accessibilityRole={accessibilityRole || 'radio'}
+      accessibilityState={{ checked: selected, ...accessibilityState }}
       activeOpacity={0.7}
       onPress={onPress}
       style={combinedItemStyle}