Delete constraints, and hard-code roles we benefit from enforcing despite constraints

Author: khiga8

lib/utils/get-role.js

@@ -3,27 +3,32 @@ const {elementRoles} = require('aria-query')
 const {getElementType} = require('./get-element-type')
 const ObjectMap = require('./object-map')
 
-// Clean-up `elementRoles` from `aria-query`
+// 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
+// Remove insufficiently-disambiguated `menuitem` entry
 elementRolesMap.delete({name: 'menuitem'})
-// - Disambiguate `menuitem` and `menu` roles by `type`
+// 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'])
 
+/* These have constraints defined in aria-query's `elementRoles` which depend on knowledge of ancestor roles which we cant accurately determine in a linter context.
+   However, we benefit more from assuming the role, than assuming it's generic or undefined so we opt to hard code the mapping */
+elementRolesMap.set({name: 'aside'}, ['complementary']) // `aside` still maps to `complementary` in https://www.w3.org/TR/html-aria/#docconformance.
+elementRolesMap.set({name: 'li'}, ['listitem']) // `li` can be generic if it's not within a list but we would never want to render `li` outside of a list.
+
 /*
   Determine role of an element, based on its name and attributes.
+  We construct a key and look up the element's role in `elementRolesMap`.
+  If there is no match, we return undefined.
 */
 function getRole(context, node) {
   // Early return if role is explicitly set
@@ -48,8 +53,7 @@ function getRole(context, node) {
     'scope',
     'name',
   ]) {
-    if ((prop === 'aria-labelledby' || prop === 'aria-label') && !['section', 'aside', 'form'].includes(key.name))
-      continue
+    if ((prop === 'aria-labelledby' || prop === 'aria-label') && !['section', '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