feat(ByRole): Add support for fallback roles

Author: iAziz786

src/__tests__/element-queries.js

@@ -412,6 +412,7 @@ test('queryAllByRole returns semantic html elements', () => {
         </tbody>
       </table>
       <table role="grid"></table>
+      <div role="meter progressbar" />
       <button>Button</button>
     </form>
   `)
@@ -433,6 +434,7 @@ 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('progressbar', {queryFallbacks: true})).toHaveLength(1)
 })
 
 test('getAll* matchers return an array', () => {
@@ -471,6 +473,7 @@ test('getAll* matchers return an array', () => {
         <option value="volvo">Toyota</option>
         <option value="audi">Honda</option>
       </select>
+      <div role="meter progressbar" />
     </div>,
   `)
   expect(getAllByAltText(/finding.*poster$/i)).toHaveLength(2)
@@ -482,6 +485,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('progressbar', {queryFallbacks: true})).toHaveLength(1)
 })
 
 test('getAll* matchers throw for 0 matches', () => {
@@ -658,6 +662,18 @@ test('using jest helpers to check element role', () => {
   expect(getByRole('dialog')).toHaveTextContent('Contents')
 })
 
+test('using jest helpers to check element fallback roles', () => {
+  const {getByRole} = render(`
+    <div role="meter progressbar">
+      <span>Contents</span>
+    </div>
+  `)
+
+  expect(getByRole('progressbar', {queryFallbacks: true})).toHaveTextContent(
+    'Contents',
+  )
+})
+
 test('test the debug helper prints the dom state here', () => {
   const originalDebugPrintLimit = process.env.DEBUG_PRINT_LIMIT
   const Large = `<div>

src/__tests__/queries.find.js

@@ -33,6 +33,7 @@ test('find asynchronously finds elements', async () => {
       <img alt="test alt text" src="/lucy-ricardo.png" />
       <span title="test title" />
       <div role="dialog"></div>
+      <div role="meter progressbar"></div>
     </div>
   `)
   await expect(findByLabelText('test-label')).resolves.toBeTruthy()
@@ -56,6 +57,13 @@ test('find asynchronously finds elements', async () => {
   await expect(findByRole('dialog')).resolves.toBeTruthy()
   await expect(findAllByRole('dialog')).resolves.toHaveLength(1)
 
+  await expect(
+    findByRole('progressbar', {queryFallbacks: true}),
+  ).resolves.toBeTruthy()
+  await expect(
+    findAllByRole('progressbar', {queryFallbacks: true}),
+  ).resolves.toHaveLength(1)
+
   await expect(findByTestId('test-id')).resolves.toBeTruthy()
   await expect(findAllByTestId('test-id')).resolves.toHaveLength(1)
 })

src/queries/role.js

@@ -21,6 +21,7 @@ function queryAllByRole(
     hidden = getConfig().defaultHidden,
     trim,
     normalizer,
+    queryFallbacks = false,
   } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches
@@ -40,6 +41,13 @@ function queryAllByRole(
       const isRoleSpecifiedExplicitly = node.hasAttribute('role')
 
       if (isRoleSpecifiedExplicitly) {
+        if (queryFallbacks) {
+          return node
+            .getAttribute('role')
+            .split(' ')
+            .filter(Boolean)
+            .some(text => matcher(text, node, role, matchNormalizer))
+        }
         return matcher(node.getAttribute('role'), node, role, matchNormalizer)
       }