fix: accessibility roles on RN

Author: minheq

src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewStyle } from 'react-native';
+import { Platform, View, ViewStyle } from 'react-native';
 import { Spring } from 'react-spring';
 
 import { ITheme, withTheme } from '../../theme';
@@ -40,7 +40,7 @@ const ProgressBase = (props: IProgressProps) => {
           >
             <View
               // @ts-ignore
-              accessibilityRole="progress"
+              accessibilityRole={Platform.OS === 'web' ? 'progress' : 'none'}
               style={{
                 width: `${value}%`,
                 ...progressStyle,

src/components/Typography/Heading.tsx

@@ -28,7 +28,7 @@ const HeadingBase = (props: IHeadingProps & TextProps) => {
   return (
     <Text
       // @ts-ignore
-      accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
+      accessibilityRole={Platform.OS === 'web' ? 'heading' : 'none'}
       aria-level={accessibilityLevel} // Web
       style={[{ textAlign }, headingStyle]}
       {...textProps}

src/components/Typography/Label.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
 
 import withTheme from '../../theme/withTheme';
 import Text, { ITextProps } from './Text';
@@ -9,7 +10,7 @@ const LabelBase = (props: ITextProps) => {
   return (
     <Text
       // @ts-ignore
-      accessibilityRole="label" // Web
+      accessibilityRole={Platform.OS === 'web' ? 'label' : 'none'}
       {...textProps}
     >
       {children}

src/components/Typography/List.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 
 import { TextSize } from '../../theme/ThemeInterface';
 import { Spacing } from '../Layout';
@@ -34,7 +34,7 @@ export const List = (props: IListProps) => {
   return (
     <View
       // @ts-ignore
-      accessibilityRole="list"
+      accessibilityRole={Platform.OS === 'web' ? 'list' : 'none'}
     >
       <Spacing margin={0} marginLeft={1} padding={0}>
         {finalChildren}

src/components/Typography/ListItem.tsx

@@ -34,7 +34,7 @@ const ListItemBase = (props: ITextProps & IListItemProps) => {
 
   return (
     // @ts-ignore
-    <View accessibilityRole={Platform.OS === 'web' ? 'listitem' : undefined}>
+    <View accessibilityRole={Platform.OS === 'web' ? 'listitem' : 'none'}>
       <Spacing flexDirection="row" alignItems="center" marginY={1}>
         <Spacing>{mark}</Spacing>
         <Spacing width="100%" paddingLeft={paddingLeft}>