chore: Repalce accessibilityRole map with getAccessibilityRoleFromRole

Author: gabrieldonadel

Libraries/Components/View/View.js

@@ -12,7 +12,7 @@ import type {ViewProps} from './ViewPropTypes';
 
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import TextAncestor from '../../Text/TextAncestor';
-import {roleToAccessibilityRoleMapping} from '../../Utilities/AcessibilityMapping';
+import {getAccessibilityRoleFromRole} from '../../Utilities/AcessibilityMapping';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
 
@@ -95,7 +95,7 @@ const View: React.AbstractComponent<
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
           accessibilityState={_accessibilityState}
           accessibilityRole={
-            role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
+            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
           }
           accessibilityElementsHidden={
             ariaHidden ?? accessibilityElementsHidden

Libraries/Text/Text.js

@@ -15,13 +15,13 @@ import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import {getAccessibilityRoleFromRole} from '../Utilities/AcessibilityMapping';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
 import {type TextProps} from './TextProps';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
-import {roleToAccessibilityRoleMapping} from '../Utilities/AcessibilityMapping';
 
 /**
  * Text is the fundamental component for displaying text.
@@ -227,7 +227,7 @@ const Text: React.AbstractComponent<
       {...eventHandlersForText}
       accessibilityLabel={ariaLabel ?? accessibilityLabel}
       accessibilityRole={
-        role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
+        role ? getAccessibilityRoleFromRole(role) : accessibilityRole
       }
       isHighlighted={isHighlighted}
       isPressable={isPressable}
@@ -253,7 +253,7 @@ const Text: React.AbstractComponent<
         accessibilityLabel={ariaLabel ?? accessibilityLabel}
         accessibilityState={nativeTextAccessibilityState}
         accessibilityRole={
-          role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
         }
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}

Libraries/Utilities/AcessibilityMapping.js

@@ -10,70 +10,143 @@
 
 'use strict';
 
+import type {
+  AccessibilityRole,
+  Role,
+} from '../Components/View/ViewAccessibility';
+
 // Map role values to AccessibilityRole values
-export 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,
-};
+export function getAccessibilityRoleFromRole(role: Role): ?AccessibilityRole {
+  switch (role) {
+    case 'alert':
+      return 'alert';
+    case 'alertdialog':
+      return undefined;
+    case 'application':
+      return undefined;
+    case 'article':
+      return undefined;
+    case 'banner':
+      return undefined;
+    case 'button':
+      return 'button';
+    case 'cell':
+      return undefined;
+    case 'checkbox':
+      return 'checkbox';
+    case 'columnheader':
+      return undefined;
+    case 'combobox':
+      return 'combobox';
+    case 'complementary':
+      return undefined;
+    case 'contentinfo':
+      return undefined;
+    case 'definition':
+      return undefined;
+    case 'dialog':
+      return undefined;
+    case 'directory':
+      return undefined;
+    case 'document':
+      return undefined;
+    case 'feed':
+      return undefined;
+    case 'figure':
+      return undefined;
+    case 'form':
+      return undefined;
+    case 'grid':
+      return 'grid';
+    case 'group':
+      return undefined;
+    case 'heading':
+      return 'header';
+    case 'img':
+      return 'image';
+    case 'link':
+      return 'link';
+    case 'list':
+      return 'list';
+    case 'listitem':
+      return undefined;
+    case 'log':
+      return undefined;
+    case 'main':
+      return undefined;
+    case 'marquee':
+      return undefined;
+    case 'math':
+      return undefined;
+    case 'menu':
+      return 'menu';
+    case 'menubar':
+      return 'menubar';
+    case 'menuitem':
+      return 'menuitem';
+    case 'meter':
+      return undefined;
+    case 'navigation':
+      return undefined;
+    case 'none':
+      return 'none';
+    case 'note':
+      return undefined;
+    case 'presentation':
+      return 'none';
+    case 'progressbar':
+      return 'progressbar';
+    case 'radio':
+      return 'radio';
+    case 'radiogroup':
+      return 'radiogroup';
+    case 'region':
+      return undefined;
+    case 'row':
+      return undefined;
+    case 'rowgroup':
+      return undefined;
+    case 'rowheader':
+      return undefined;
+    case 'scrollbar':
+      return 'scrollbar';
+    case 'searchbox':
+      return 'search';
+    case 'separator':
+      return undefined;
+    case 'slider':
+      return 'adjustable';
+    case 'spinbutton':
+      return 'spinbutton';
+    case 'status':
+      return undefined;
+    case 'summary':
+      return 'summary';
+    case 'switch':
+      return 'switch';
+    case 'tab':
+      return 'tab';
+    case 'table':
+      return undefined;
+    case 'tablist':
+      return 'tablist';
+    case 'tabpanel':
+      return undefined;
+    case 'term':
+      return undefined;
+    case 'timer':
+      return 'timer';
+    case 'toolbar':
+      return 'toolbar';
+    case 'tooltip':
+      return undefined;
+    case 'tree':
+      return undefined;
+    case 'treegrid':
+      return undefined;
+    case 'treeitem':
+      return undefined;
+  }
+
+  return undefined;
+}