feat: accessibility improvements

Author: Artur Bien

src/Button/Button.tsx

@@ -33,6 +33,7 @@ type ButtonProps = React.ComponentPropsWithRef<typeof View> & {
 };
 
 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}
       >
         <View pointerEvents='none'>
           {typeof children === 'string' ? (

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,
   },

src/List/ListAccordion.tsx

@@ -27,6 +27,7 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
   titleStyle?: StyleProp<TextStyle>;
 };
 
+// TODO: add accessibilityState=expanded ?
 const ListAccordion = ({
   children,
   defaultExpanded,

src/List/ListItem.tsx

@@ -36,7 +36,7 @@ const ListItem = ({
   return (
     <View style={style} {...rest}>
       <TouchableOpacity onPress={onPress} accessibilityRole='button'>
-        <View style={[styles.content]} pointerEvents='none'>
+        <View style={[styles.content]}>
           {left && <View style={[styles.left]}>{left}</View>}
           {title && (
             <Text style={[styles.title, { color: theme.progress }, titleStyle]}>

src/Menu/MenuItem.tsx

@@ -14,7 +14,7 @@ import { Text } from '..';
 
 // TODO: add icon prop
 
-type Props = React.ComponentPropsWithRef<typeof View> & {
+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 }}
       >
         <View pointerEvents='none' style={[styles.content]}>
           <Text

src/Progress/Progress.tsx

@@ -49,6 +49,13 @@ const Progress = ({
         },
         style,
       ]}
+      accessible
+      accessibilityRole='progressbar'
+      accessibilityValue={{
+        min: 0,
+        max: 100,
+        now: percent,
+      }}
     >
       <View style={[styles.progressWrapper]}>
         {variant === 'tile' ? (

src/ScrollView/ScrollView.tsx

@@ -154,6 +154,7 @@ const ScrollView = ({
       </View>
       {(!contentFullyVisible || alwaysShowScrollbars) && (
         <View
+          accessibilityRole='scrollbar'
           style={[
             {
               flexDirection: horizontal ? 'row' : 'column',

src/Select/SelectBase.tsx

@@ -26,7 +26,6 @@ const SelectItem = ({ option, onPress, isSelected }: SelectItemProps) => {
       onPress={() => onPress(option)}
       onHideUnderlay={() => setIsPressed(false)}
       onShowUnderlay={() => setIsPressed(true)}
-      accessibilityRole='menuitem'
       underlayColor='none'
       // delay to prevent item highlighting on scroll
       delayPressIn={70}

src/Slider/Slider.tsx

@@ -123,7 +123,17 @@ const Slider = ({
   ).current;
 
   return (
-    <View style={[styles.wrapper, style]} {...rest}>
+    <View
+      style={[styles.wrapper, style]}
+      {...rest}
+      accessibilityRole='adjustable'
+      accessibilityState={{ disabled }}
+      accessibilityValue={{
+        min,
+        max,
+        now: value,
+      }}
+    >
       <View
         style={[
           styles.inner,

src/SwitchBase/SwitchBase.tsx

@@ -47,15 +47,15 @@ export const SwitchBase = ({
   const theme = useContext(ThemeContext);
   const [isPressed, setIsPressed] = React.useState(false);
   const isRadio = component === 'radio';
-  const switchSize = component === 'checkbox' ? checkboxSize : radioSize;
+  const switchSize = !isRadio ? checkboxSize : radioSize;
   const boxSize = variant === 'flat' ? switchSize - 4 : switchSize;
   const borderRadius = isRadio ? boxSize / 2 : 0;
 
+  const checked = status === 'checked';
+
   const renderCheckmark = () => {
-    if (status === 'checked') {
-      return component === 'checkbox' ? (
-        <CheckmarkIcon disabled={disabled} />
-      ) : (
+    if (checked) {
+      return isRadio ? (
         <View
           style={{
             borderRadius: 6,
@@ -66,6 +66,8 @@ export const SwitchBase = ({
               : theme.checkmark,
           }}
         />
+      ) : (
+        <CheckmarkIcon disabled={disabled} />
       );
     }
     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 (
     <TouchableHighlight
       style={[styles.wrapper]}
@@ -107,13 +116,14 @@ export const SwitchBase = ({
       onShowUnderlay={() => 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}
     >
-      <View style={[styles.content, style]} pointerEvents='none'>
+      <View style={[styles.content, style]}>
         <View
           style={[
             styles.switchSymbol,