diff --git a/packages/app-mobile/components/Checkbox.tsx b/packages/app-mobile/components/Checkbox.tsx index 3bc56c0e42..de7cc24628 100644 --- a/packages/app-mobile/components/Checkbox.tsx +++ b/packages/app-mobile/components/Checkbox.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useState, useEffect, useCallback, useMemo } from 'react'; import { TouchableHighlight, StyleSheet, TextStyle } from 'react-native'; -const Icon = require('react-native-vector-icons/Ionicons').default; +import Icon from './Icon'; interface Props { checked: boolean; @@ -44,7 +44,7 @@ const Checkbox: React.FC = props => { }); }, [props.onChange]); - const iconName = checked ? 'checkbox-outline' : 'square-outline'; + const iconName = checked ? 'ionicon checkbox-outline' : 'ionicon square-outline'; const styles = useStyles(props.style, props.iconStyle); const accessibilityState = useMemo(() => ({ @@ -58,8 +58,10 @@ const Checkbox: React.FC = props => { accessibilityRole="checkbox" accessibilityState={accessibilityState} accessibilityLabel={props.accessibilityLabel ?? ''} + // Web requires aria-checked + aria-checked={checked} > - + ); }; diff --git a/packages/app-mobile/components/NoteItem.tsx b/packages/app-mobile/components/NoteItem.tsx index 3e55ce0f00..4aa24d704b 100644 --- a/packages/app-mobile/components/NoteItem.tsx +++ b/packages/app-mobile/components/NoteItem.tsx @@ -139,7 +139,13 @@ class NoteItemComponent extends PureComponent { const noteTitle = Note.displayTitle(note); return ( - +