match even superclass roles in queryAllByRole (testing-library#448)

Author: Bianca Del Carretto

src/__tests__/role.js

@@ -346,7 +346,9 @@ Here are the accessible roles:
 test('has no useful error message in findBy', async () => {
   const {findByRole} = render(`<li />`)
 
-  await expect(findByRole('option', {timeout: 1})).rejects.toThrow('Unable to find role="option"')
+  await expect(findByRole('option', {timeout: 1})).rejects.toThrow(
+    'Unable to find role="option"',
+  )
 })
 
 test('explicit role is most specific', () => {
@@ -378,6 +380,46 @@ Here are the accessible roles:
 `)
 })
 
+test('superclass roles are retrieved when are abstract roles', () => {
+  const {getAllByRole} = render(`
+   <>
+      <input type="text" />
+      <input type="checkbox" />
+      <textarea />
+    </>`)
+  expect(getAllByRole('textbox')).toHaveLength(2)
+  expect(getAllByRole('input')).toHaveLength(3)
+})
+
+test('superclass roles are retrieved for explicitly defined roles', () => {
+  const {getAllByRole} = render(`
+    <>
+      <input type="checkbox" />
+      <span role="switch" aria-checked="true" />
+    </>
+  `)
+  expect(getAllByRole('switch')).toHaveLength(1)
+  expect(getAllByRole('checkbox')).toHaveLength(2)
+})
+
+test('superclass list has found when the defined role is feed', () => {
+  const {getAllByRole} = render(`
+    <>
+      <ul>
+        <li>abc</li>
+      </ul>
+      <div role="feed">
+        <article role="listitem">xyz</article>
+      </div>
+      <ul role="feed">
+        <li role="article">def</li>
+      </ul>
+    </>
+  `)
+  expect(getAllByRole('list')).toHaveLength(3)
+  expect(getAllByRole('feed')).toHaveLength(2)
+})
+
 describe('configuration', () => {
   let originalConfig
   beforeEach(() => {

src/queries/role.js

@@ -6,6 +6,7 @@ import {
   prettyRoles,
   isInaccessible,
   isSubtreeInaccessible,
+  getRolesAndSuperClassByRoles,
 } from '../role-helpers'
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
@@ -58,22 +59,24 @@ function queryAllByRole(
       if (isRoleSpecifiedExplicitly) {
         const roleValue = node.getAttribute('role')
         if (queryFallbacks) {
-          return roleValue
-            .split(' ')
-            .filter(Boolean)
-            .some(text => matcher(text, node, role, matchNormalizer))
+          const roles = roleValue.split(' ').filter(Boolean)
+          return getRolesAndSuperClassByRoles(roles).some(text =>
+            matcher(text, node, role, matchNormalizer),
+          )
         }
         // if a custom normalizer is passed then let normalizer handle the role value
         if (normalizer) {
-          return matcher(roleValue, node, role, matchNormalizer)
+          return getRolesAndSuperClassByRoles(roleValue).some(text =>
+            matcher(text, node, role, matchNormalizer),
+          )
         }
         // other wise only send the first word to match
-        const [firstWord] = roleValue.split(' ')
-        return matcher(firstWord, node, role, matchNormalizer)
+        const roles = getRolesAndSuperClassByRoles(roleValue.split(' ')[0])
+        return roles.some(text => matcher(text, node, role, matchNormalizer))
       }
 
-      const implicitRoles = getImplicitAriaRoles(node)
-
+      let implicitRoles = getImplicitAriaRoles(node)
+      implicitRoles = getRolesAndSuperClassByRoles(implicitRoles)
       return implicitRoles.some(implicitRole =>
         matcher(implicitRole, node, role, matchNormalizer),
       )