fix: fix accessibility and modal

Author: minheq

src/components/Dialog/Dialog.tsx

@@ -47,7 +47,7 @@ const DialogBase = (props: IDialogProps) => {
   } = theme.getDialogStyles();
 
   return (
-    <Modal visible={isVisible} transparent onDismiss={onClose}>
+    <Modal visible={isVisible} transparent onRequestClose={onClose}>
       <View
         style={{
           ...modalContainerStyle,

src/components/Dialog/Modal.web.tsx

@@ -43,11 +43,11 @@ class Modal extends React.PureComponent<ModalProps> {
   }
 
   public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    const { onDismiss } = this.props;
+    const { onRequestClose } = this.props;
 
-    if (event.keyCode === ESC_KEY && onDismiss) {
+    if (event.keyCode === ESC_KEY && onRequestClose) {
       event.stopPropagation();
-      onDismiss();
+      onRequestClose();
     }
   };
 

src/components/Typography/Heading.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, TextProps, TextStyle } from 'react-native';
+import { Platform, Text, TextProps, TextStyle } from 'react-native';
 
 import { HeadingSize, ITheme } from '../../theme/ThemeInterface';
 import withTheme from '../../theme/withTheme';
@@ -28,7 +28,7 @@ const HeadingBase = (props: IHeadingProps & TextProps) => {
   return (
     <Text
       // @ts-ignore
-      accessibilityRole="heading"
+      accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
       aria-level={accessibilityLevel} // Web
       style={[{ textAlign }, headingStyle]}
       {...textProps}

src/components/Typography/ListItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 
 import { withTheme } from '../../theme';
 import { TextColor, TextSize } from '../../theme/ThemeInterface';
@@ -33,10 +33,8 @@ const ListItemBase = (props: ITextProps & IListItemProps) => {
   ) : null;
 
   return (
-    <View
-      // @ts-ignore
-      accessibilityRole="listitem"
-    >
+    // @ts-ignore
+    <View accessibilityRole={Platform.OS === 'web' ? 'listitem' : undefined}>
       <Spacing flexDirection="row" alignItems="center" marginY={1}>
         <Spacing>{mark}</Spacing>
         <Spacing width="100%" paddingLeft={paddingLeft}>