diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index da663a8..b02857b 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -33,6 +33,7 @@ type ButtonProps = React.ComponentPropsWithRef & { }; const Button = ({ + accessible, accessibilityLabel, active = false, children, @@ -91,11 +92,16 @@ const Button = ({ onPress={onPress} onLongPress={onLongPress} disabled={disabled} + // TODO: use onHideUnderlay or onPressIn? onHideUnderlay={() => setIsPressed(false)} onShowUnderlay={() => setIsPressed(true)} underlayColor='none' - accessibilityRole='button' accessibilityLabel={accessibilityLabel} + accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'} + accessibilityComponentType='button' + accessibilityRole='button' + accessibilityState={{ disabled }} + accessible={accessible} > {typeof children === 'string' ? ( diff --git a/src/Cutout/Cutout.tsx b/src/Cutout/Cutout.tsx index a1a66bd..4b9380d 100644 --- a/src/Cutout/Cutout.tsx +++ b/src/Cutout/Cutout.tsx @@ -36,6 +36,7 @@ const Cutout = ({ const styles = StyleSheet.create({ wrapper: { position: 'relative', + // TODO: add another element to compensate for borders? // to compensate for borders padding: 4, }, diff --git a/src/List/ListAccordion.tsx b/src/List/ListAccordion.tsx index 41fefcb..3a0015f 100644 --- a/src/List/ListAccordion.tsx +++ b/src/List/ListAccordion.tsx @@ -27,6 +27,7 @@ type Props = React.ComponentPropsWithRef & { titleStyle?: StyleProp; }; +// TODO: add accessibilityState=expanded ? const ListAccordion = ({ children, defaultExpanded, diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx index 9826d27..cb57867 100644 --- a/src/List/ListItem.tsx +++ b/src/List/ListItem.tsx @@ -36,7 +36,7 @@ const ListItem = ({ return ( - + {left && {left}} {title && ( diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx index b180ac9..1188cfa 100644 --- a/src/Menu/MenuItem.tsx +++ b/src/Menu/MenuItem.tsx @@ -14,7 +14,7 @@ import { Text } from '..'; // TODO: add icon prop -type Props = React.ComponentPropsWithRef & { +type Props = { disabled?: boolean; onPress: () => void; primary?: boolean; @@ -55,7 +55,8 @@ export const Item = ({ onShowUnderlay={() => setIsPressed(true)} underlayColor='none' // TODO: which accessibilityRole put in here? - accessibilityRole='button' + accessibilityRole='menuitem' + accessibilityState={{ disabled }} > {variant === 'tile' ? ( diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx index 53515f7..34dd68a 100644 --- a/src/ScrollView/ScrollView.tsx +++ b/src/ScrollView/ScrollView.tsx @@ -154,6 +154,7 @@ const ScrollView = ({ {(!contentFullyVisible || alwaysShowScrollbars) && ( { onPress={() => onPress(option)} onHideUnderlay={() => setIsPressed(false)} onShowUnderlay={() => setIsPressed(true)} - accessibilityRole='menuitem' underlayColor='none' // delay to prevent item highlighting on scroll delayPressIn={70} diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx index 3edd2d7..82a8537 100644 --- a/src/Slider/Slider.tsx +++ b/src/Slider/Slider.tsx @@ -123,7 +123,17 @@ const Slider = ({ ).current; return ( - + { - if (status === 'checked') { - return component === 'checkbox' ? ( - - ) : ( + if (checked) { + return isRadio ? ( + ) : ( + ); } if (status === 'indeterminate') { @@ -97,6 +99,13 @@ export const SwitchBase = ({ return disabled ? theme.material : theme.canvas; }; + const getAccessibilityComponentType = () => { + if (isRadio) { + return checked ? 'radiobutton_checked' : 'radiobutton_unchecked'; + } + return 'button'; + }; + return ( setIsPressed(true)} // TODO: check if those accessibility properties are correct accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'} - accessibilityComponentType='button' + accessibilityComponentType={getAccessibilityComponentType()} accessibilityRole={component} - accessibilityState={{ disabled, checked: status === 'checked' }} + accessibilityState={{ disabled, checked }} + accessibilityLiveRegion='polite' underlayColor='none' {...rest} > - +