getImplicitRole() — react Function Reference

Architecture documentation for the getImplicitRole() function in DOMAccessibilityRoles.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ getImplicitRole() — react Function Reference

Dependency Diagram

graph TD
  058ecc0a_0eb4_1971_b88f_7087c8b2613d["getImplicitRole()"]
  96d548f3_c70e_ecfd_0666_850d31986728["DOMAccessibilityRoles.js"]
  058ecc0a_0eb4_1971_b88f_7087c8b2613d -->|defined in| 96d548f3_c70e_ecfd_0666_850d31986728
  9e0f45cd_4f69_a046_c038_f07c79c3beca["hasRole()"]
  9e0f45cd_4f69_a046_c038_f07c79c3beca -->|calls| 058ecc0a_0eb4_1971_b88f_7087c8b2613d
  style 058ecc0a_0eb4_1971_b88f_7087c8b2613d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/DOMAccessibilityRoles.js lines 62–121

function getImplicitRole(element: Element): string | null {
  // $FlowFixMe[invalid-computed-prop]
  const mappedByTag = tagToRoleMappings[element.tagName];
  if (mappedByTag !== undefined) {
    return mappedByTag;
  }

  switch (element.tagName) {
    case 'A':
    case 'AREA':
    case 'LINK':
      if (element.hasAttribute('href')) {
        return 'link';
      }
      break;
    case 'IMG':
      if ((element.getAttribute('alt') || '').length > 0) {
        return 'img';
      }
      break;
    case 'INPUT': {
      const type = (element: any).type;
      switch (type) {
        case 'button':
        case 'image':
        case 'reset':
        case 'submit':
          return 'button';
        case 'checkbox':
        case 'radio':
          return type;
        case 'range':
          return 'slider';
        case 'email':
        case 'tel':
        case 'text':
        case 'url':
          if (element.hasAttribute('list')) {
            return 'combobox';
          }
          return 'textbox';
        case 'search':
          if (element.hasAttribute('list')) {
            return 'combobox';
          }
          return 'searchbox';
        default:
          return null;
      }
    }

    case 'SELECT':
      if (element.hasAttribute('multiple') || (element: any).size > 1) {
        return 'listbox';
      }
      return 'combobox';
  }

  return null;
}