feat(ByRole) first word should match for multiple roles

Author: iAziz786

src/__tests__/element-queries.js

@@ -434,6 +434,8 @@ test('queryAllByRole returns semantic html elements', () => {
   expect(queryAllByRole(/rowgroup/i)).toHaveLength(2)
   expect(queryAllByRole(/(table)|(textbox)/i)).toHaveLength(3)
   expect(queryAllByRole(/img/i)).toHaveLength(1)
+  expect(queryAllByRole('meter')).toHaveLength(1)
+  expect(queryAllByRole('progressbar')).toHaveLength(0)
   expect(queryAllByRole('progressbar', {queryFallbacks: true})).toHaveLength(1)
 })
 
@@ -485,6 +487,7 @@ test('getAll* matchers return an array', () => {
   expect(getAllByDisplayValue(/cars$/)).toHaveLength(2)
   expect(getAllByText(/^where/i)).toHaveLength(1)
   expect(getAllByRole(/container/i)).toHaveLength(1)
+  expect(getAllByRole('meter')).toHaveLength(1)
   expect(getAllByRole('progressbar', {queryFallbacks: true})).toHaveLength(1)
 })
 

src/__tests__/queries.find.js

@@ -57,6 +57,8 @@ test('find asynchronously finds elements', async () => {
   await expect(findByRole('dialog')).resolves.toBeTruthy()
   await expect(findAllByRole('dialog')).resolves.toHaveLength(1)
 
+  await expect(findByRole('meter')).resolves.toBeTruthy()
+  await expect(findAllByRole('meter')).resolves.toHaveLength(1)
   await expect(
     findByRole('progressbar', {queryFallbacks: true}),
   ).resolves.toBeTruthy()

src/queries/role.js

@@ -41,14 +41,20 @@ function queryAllByRole(
       const isRoleSpecifiedExplicitly = node.hasAttribute('role')
 
       if (isRoleSpecifiedExplicitly) {
+        const roleValue = node.getAttribute('role')
         if (queryFallbacks) {
-          return node
-            .getAttribute('role')
+          return roleValue
             .split(' ')
             .filter(Boolean)
             .some(text => matcher(text, node, role, matchNormalizer))
         }
-        return matcher(node.getAttribute('role'), node, role, matchNormalizer)
+        // if a custom normalizer is passed then let normalizer handle the role value
+        if (normalizer) {
+          return matcher(roleValue, node, role, matchNormalizer)
+        }
+        // other wise only send the first word to match
+        const [firstWord] = roleValue.split(' ')
+        return matcher(firstWord, node, role, matchNormalizer)
       }
 
       const implicitRoles = getImplicitAriaRoles(node)