Extract getRole into its own helper

khiga8 · khiga8 · commit 5c98a4411e3d · 2023-07-11T11:38:43.000-04:00
diff --git a/lib/rules/role-supports-aria-props.js b/lib/rules/role-supports-aria-props.js
@@ -1,7 +1,7 @@
 // @ts-check
 const {aria, elementRoles, roles} = require('aria-query')
-const {getProp, getPropValue, propName} = require('jsx-ast-utils')
-const {getElementType} = require('../utils/get-element-type')
+const {getPropValue, propName} = require('jsx-ast-utils')
+const {getRole} = require('../utils/get-role')
 const ObjectMap = require('../utils/object-map')
 
 // Clean-up `elementRoles` from `aria-query`
@@ -36,42 +36,8 @@ module.exports = {
   create(context) {
     return {
       JSXOpeningElement(node) {
-        // Assemble a key for looking-up the element’s role in the `elementRolesMap`
-        // - Get the element’s name
-        const key = {name: getElementType(context, node)}
-        // - Get the element’s disambiguating attributes
-        for (const prop of [
-          'aria-label',
-          'aria-labelledby',
-          'alt',
-          'type',
-          'size',
-          'role',
-          'href',
-          'multiple',
-          'scope',
-          'name',
-        ]) {
-          if ((prop === 'aria-labelledby' || prop === 'aria-label') && !['section', 'aside', 'form'].includes(key.name))
-            continue
-          if (prop === 'name' && key.name !== 'form') continue
-
-          const value = getPropValue(getProp(node.attributes, prop))
-          if (value) {
-            if (!('attributes' in key)) {
-              key.attributes = []
-            }
-            if (prop === 'href' || prop === 'aria-labelledby' || prop === 'aria-label') {
-              key.attributes.push({name: prop, constraints: ['set']})
-            } else if (prop === 'alt' && value !== '') {
-              key.attributes.push({name: prop, constraints: ['set']})
-            } else {
-              key.attributes.push({name: prop, value})
-            }
-          }
-        }
         // Get the element’s explicit or implicit role
-        const role = getPropValue(getProp(node.attributes, 'role')) ?? elementRolesMap.get(key)?.[0]
+        const role = getRole(context, node)
 
         // Return early if role could not be determined
         if (!role) return
diff --git a/lib/utils/get-role.js b/lib/utils/get-role.js
@@ -0,0 +1,93 @@
+const {getProp, getPropValue} = require('jsx-ast-utils')
+const {elementRoles} = require('aria-query')
+const {getElementType} = require('./get-element-type')
+const ObjectMap = require('./object-map')
+
+// Clean-up `elementRoles` from `aria-query`
+const elementRolesMap = new ObjectMap()
+for (const [key, value] of elementRoles.entries()) {
+  // - Remove unused `constraints` key
+  delete key.constraints
+  // - Remove empty `attributes` key
+  if (!key.attributes || key.attributes?.length === 0) {
+    delete key.attributes
+  }
+  elementRolesMap.set(key, value)
+}
+// - Remove insufficiently-disambiguated `menuitem` entry
+elementRolesMap.delete({name: 'menuitem'})
+// - Disambiguate `menuitem` and `menu` roles by `type`
+elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'command'}]}, ['menuitem'])
+elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'radio'}]}, ['menuitemradio'])
+elementRolesMap.set({name: 'menuitem', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])
+elementRolesMap.set({name: 'menu', attributes: [{name: 'type', value: 'toolbar'}]}, ['toolbar'])
+
+/*
+  Determine role of an element, based on its name and attributes.
+*/
+function getRole(context, node) {
+  // Early return if role is explicitly set
+  const explicitRole = getPropValue(getProp(node.attributes, 'role'))
+  if (explicitRole) {
+    return explicitRole
+  }
+
+  // Assemble a key for looking-up the element’s role in the `elementRolesMap`
+  // - Get the element’s name
+  const key = {name: getElementType(context, node)}
+
+  for (const prop of [
+    'aria-label',
+    'aria-labelledby',
+    'alt',
+    'type',
+    'size',
+    'role',
+    'href',
+    'multiple',
+    'scope',
+    'name',
+  ]) {
+    if ((prop === 'aria-labelledby' || prop === 'aria-label') && !['section', 'aside', 'form'].includes(key.name))
+      continue
+    if (prop === 'name' && key.name !== 'form') continue
+    if (prop === 'href' && key.name !== 'a' && key.name !== 'area') continue
+    if (prop === 'alt' && key.name !== 'img') continue
+
+    const propOnNode = getProp(node.attributes, prop)
+
+    if (!('attributes' in key)) {
+      key.attributes = []
+    }
+    // Disambiguate "undefined" props
+    if (propOnNode === undefined && prop === 'alt' && key.name === 'img') {
+      key.attributes.push({name: prop, constraints: ['undefined']})
+      continue
+    }
+
+    const value = getPropValue(propOnNode)
+    if (value || (value === '' && prop === 'alt')) {
+      if (
+        prop === 'href' ||
+        prop === 'aria-labelledby' ||
+        prop === 'aria-label' ||
+        prop === 'name' ||
+        (prop === 'alt' && value !== '')
+      ) {
+        key.attributes.push({name: prop, constraints: ['set']})
+      } else {
+        key.attributes.push({name: prop, value})
+      }
+    }
+  }
+
+  // - Remove empty `attributes` key
+  if (!key.attributes || key.attributes?.length === 0) {
+    delete key.attributes
+  }
+
+  // Get the element’s implicit role
+  return elementRolesMap.get(key)?.[0]
+}
+
+module.exports = {getRole}
