Feat/role to accessibility role mapping (#34538)

Summary: This adds role alias for accessibilityRole, it unifies role and accessibilityRole as requested on #34424 ## Changelog [General][Added] - Added role alias for accessibilityRole. Pull Request resolved: #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
facebook · Sep 5, 2022 · a50e6fb · a50e6fb
1 parent 9c05f42
commit a50e6fb
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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.
    */