feat(exoflex): supports a11y for web DTP (#463)

kodefox · May 5, 2020 · f1403b4 · f1403b4
1 parent eab359f
commit f1403b4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/packages/exoflex/src/components/DateTimePicker/DateTimePicker.web.tsx b/packages/exoflex/src/components/DateTimePicker/DateTimePicker.web.tsx
@@ -26,6 +26,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
     onConfirm,
     minimumDate,
     maximumDate,
+    cancelTextWeb = 'CANCEL',
+    confirmTextWeb = 'CONFIRM',
   } = props;
 
   let { colors } = useTheme();
@@ -50,6 +52,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
         date={dateTime}
         minDate={minimumDate}
         maxDate={maximumDate}
+        cancelText={cancelTextWeb}
+        confirmText={confirmTextWeb}
         onCancel={cancel}
         onConfirm={confirmDate}
       />
@@ -58,6 +62,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
         title={timeTitleWeb || title}
         date={dateTime}
         use24Hour={use24Hour}
+        cancelText={cancelTextWeb}
+        confirmText={confirmTextWeb}
         onCancel={cancel}
         onConfirm={confirmTime}
       />
@@ -85,6 +91,8 @@ export default function DateTimePicker(props: DateTimePickerProps) {
 export type PickerProps = Readonly<{
   date: string;
   title?: string;
+  cancelText: string;
+  confirmText: string;
   minDate?: Date;
   maxDate?: Date;
   use24Hour?: boolean;
@@ -93,7 +101,16 @@ export type PickerProps = Readonly<{
 }>;
 
 export function DatePicker(props: PickerProps) {
-  let { date, title, minDate, maxDate, onCancel, onConfirm } = props;
+  let {
+    date,
+    title,
+    cancelText,
+    confirmText,
+    minDate,
+    maxDate,
+    onCancel,
+    onConfirm,
+  } = props;
   let { colors } = useTheme();
 
   let [selectedDate, setSelectedDate] = useState(date);
@@ -129,19 +146,35 @@ export function DatePicker(props: PickerProps) {
         renderArrow={arrow}
       />
       <View style={styles.touchableActionWrapper}>
-        <TouchableRipple onPress={onCancel} style={styles.touchableAction}>
-          <Text>CANCEL</Text>
+        <TouchableRipple
+          accessibilityRole="button"
+          onPress={onCancel}
+          style={styles.touchableAction}
+        >
+          <Text>{cancelText}</Text>
         </TouchableRipple>
-        <TouchableRipple onPress={confirm} style={styles.touchableAction}>
-          <Text style={{ color: colors.primary }}>CONFIRM</Text>
+        <TouchableRipple
+          accessibilityRole="button"
+          onPress={confirm}
+          style={styles.touchableAction}
+        >
+          <Text style={{ color: colors.primary }}>{confirmText}</Text>
         </TouchableRipple>
       </View>
     </>
   );
 }
 
 export function TimePickerContainer(props: PickerProps) {
-  let { date, title, use24Hour, onCancel, onConfirm } = props;
+  let {
+    date,
+    title,
+    cancelText,
+    confirmText,
+    use24Hour,
+    onCancel,
+    onConfirm,
+  } = props;
   let { colors } = useTheme();
 
   let [selectedDateTime, setSelectedDateTime] = useState(date);
@@ -173,11 +206,19 @@ export function TimePickerContainer(props: PickerProps) {
         </View>
       </View>
       <View style={styles.touchableActionWrapper}>
-        <TouchableRipple onPress={onCancel} style={styles.touchableAction}>
-          <Text>CANCEL</Text>
+        <TouchableRipple
+          accessibilityRole="button"
+          onPress={onCancel}
+          style={styles.touchableAction}
+        >
+          <Text>{cancelText}</Text>
         </TouchableRipple>
-        <TouchableRipple onPress={confirm} style={styles.touchableAction}>
-          <Text style={{ color: colors.primary }}>CONFIRM</Text>
+        <TouchableRipple
+          accessibilityRole="button"
+          onPress={confirm}
+          style={styles.touchableAction}
+        >
+          <Text style={{ color: colors.primary }}>{confirmText}</Text>
         </TouchableRipple>
       </View>
     </>

diff --git a/packages/exoflex/src/components/DateTimePicker/types.ts b/packages/exoflex/src/components/DateTimePicker/types.ts
@@ -10,6 +10,8 @@ export type DateTimePickerProps = Readonly<
     title?: string;
     dateTitleWeb?: string;
     timeTitleWeb?: string;
+    cancelTextWeb?: string;
+    confirmTextWeb?: string;
     mode?: DateTimePickerMode;
     date?: string;
     use24Hour?: boolean;