From a50e6fb341eacd955071e4a7c6d734e7d3c94cd7 Mon Sep 17 00:00:00 2001
From: madhav23bansal <madhavb230100@gmail.com>
Date: Mon, 5 Sep 2022 10:01:24 -0700
Subject: [PATCH] Feat/role to accessibility role mapping (#34538)

Summary:
This adds role alias for accessibilityRole, it unifies role and accessibilityRole as requested on https://github.com/facebook/react-native/issues/34424

## Changelog

[General][Added] - Added role alias for accessibilityRole.

Pull Request resolved: https://github.com/facebook/react-native/pull/34538

Test Plan:
```js
 <View
  role="slider"
  style={[
    {
      marginTop: 5,
      borderWidth: 1,
      borderRadius: 5,
      padding: 5,
    },
    this.state.showBorder
      ? {
          borderStyle: 'dotted',
        }
      : null,
  ]}>
  <Text style={{fontSize: 11}}>Dotted border style</Text>
</View>
```

Reviewed By: cipolleschi

Differential Revision: D39169722

Pulled By: jacdebug

fbshipit-source-id: cbcbda5ff900c18509b9f3c88e145a3f8700c78d
---
 Libraries/Components/View/View.js             | 82 ++++++++++++++++++-
 .../Components/View/ViewAccessibility.js      | 67 +++++++++++++++
 Libraries/Components/View/ViewPropTypes.js    |  6 ++
 3 files changed, 154 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 20b6f90fecb2e7..76ec6975c7c150 100644
--- a/Libraries/Components/View/View.js
+++ b/Libraries/Components/View/View.js
@@ -29,15 +29,95 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   (
-    {tabIndex, focusable, style, pointerEvents, ...otherProps}: ViewProps,
+    {
+      tabIndex,
+      focusable,
+      role,
+      accessibilityRole,
+      pointerEvents,
+      style,
+      ...otherProps
+    }: ViewProps,
     forwardedRef,
   ) => {
+    // Map role values to AccessibilityRole values
+    const roleToAccessibilityRoleMapping = {
+      alert: 'alert',
+      alertdialog: undefined,
+      application: undefined,
+      article: undefined,
+      banner: undefined,
+      button: 'button',
+      cell: undefined,
+      checkbox: 'checkbox',
+      columnheader: undefined,
+      combobox: 'combobox',
+      complementary: undefined,
+      contentinfo: undefined,
+      definition: undefined,
+      dialog: undefined,
+      directory: undefined,
+      document: undefined,
+      feed: undefined,
+      figure: undefined,
+      form: undefined,
+      grid: 'grid',
+      group: undefined,
+      heading: 'header',
+      img: 'image',
+      link: 'link',
+      list: 'list',
+      listitem: undefined,
+      log: undefined,
+      main: undefined,
+      marquee: undefined,
+      math: undefined,
+      menu: 'menu',
+      menubar: 'menubar',
+      menuitem: 'menuitem',
+      meter: undefined,
+      navigation: undefined,
+      none: 'none',
+      note: undefined,
+      presentation: 'none',
+      progressbar: 'progressbar',
+      radio: 'radio',
+      radiogroup: 'radiogroup',
+      region: undefined,
+      row: undefined,
+      rowgroup: undefined,
+      rowheader: undefined,
+      scrollbar: 'scrollbar',
+      searchbox: 'search',
+      separator: undefined,
+      slider: 'adjustable',
+      spinbutton: 'spinbutton',
+      status: undefined,
+      summary: 'summary',
+      switch: 'switch',
+      tab: 'tab',
+      table: undefined,
+      tablist: 'tablist',
+      tabpanel: undefined,
+      term: undefined,
+      timer: 'timer',
+      toolbar: 'toolbar',
+      tooltip: undefined,
+      tree: undefined,
+      treegrid: undefined,
+      treeitem: undefined,
+    };
+
     const flattendStyle = flattenStyle(style);
     const newPointerEvents = pointerEvents || flattendStyle?.pointerEvents;
+
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
+          accessibilityRole={
+            role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
+          }
           {...otherProps}
           style={style}
           pointerEvents={newPointerEvents}
diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js
index 8ed64ae335aa60..729e5e0a32e5b8 100644
--- a/Libraries/Components/View/ViewAccessibility.js
+++ b/Libraries/Components/View/ViewAccessibility.js
@@ -46,6 +46,73 @@ export type AccessibilityRole =
   | 'toolbar'
   | 'grid';
 
+// Role types for web
+export type Role =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'meter'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'summary'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem';
+
 // the info associated with an accessibility action
 export type AccessibilityActionInfo = $ReadOnly<{
   name: string,
diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
index effed17622cfda..62faf8a0030b9b 100644
--- a/Libraries/Components/View/ViewPropTypes.js
+++ b/Libraries/Components/View/ViewPropTypes.js
@@ -23,6 +23,7 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {Node} from 'react';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
+  Role,
   AccessibilityRole,
   AccessibilityState,
   AccessibilityValue,
@@ -466,6 +467,11 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityRole?: ?AccessibilityRole,
 
+  /**
+   * Alias for accessibilityRole
+   */
+  role?: ?Role,
+
   /**
    * Indicates to accessibility services that UI Component is in a specific State.
    */