fix: suggest hidden:true with getByRole if element is inaccessible (#745)

Author: marcosvega91

src/__tests__/suggestions.js

@@ -8,6 +8,7 @@ beforeAll(() => {
 
 afterEach(() => {
   configure({testIdAttribute: 'data-testid'})
+  console.warn.mockClear()
 })
 
 afterAll(() => {
@@ -549,3 +550,31 @@ test('should get the first label with aria-labelledby contains multiple ids', ()
     variant: 'get',
   })
 })
+
+test('should suggest hidden option if element is not in the accessibilty tree', () => {
+  const {container} = renderIntoDocument(`
+    <input type="text" aria-hidden=true />
+  `)
+
+  expect(
+    getSuggestedQuery(container.querySelector('input'), 'get', 'role'),
+  ).toMatchObject({
+    queryName: 'Role',
+    queryMethod: 'getByRole',
+    queryArgs: ['textbox', {hidden: true}],
+    variant: 'get',
+    warning: `Element is inaccessible. This means that the element and all its children are invisible to screen readers.
+    If you are using the aria-hidden prop, make sure this is the right choice for your case.
+    `,
+  })
+
+  expect(console.warn.mock.calls).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "Element is inaccessible. This means that the element and all its children are invisible to screen readers.
+        If you are using the aria-hidden prop, make sure this is the right choice for your case.
+        ",
+      ],
+    ]
+  `)
+})

src/suggestions.js

@@ -2,7 +2,7 @@ import {computeAccessibleName} from 'dom-accessibility-api'
 import {getDefaultNormalizer} from './matches'
 import {getNodeText} from './get-node-text'
 import {DEFAULT_IGNORE_TAGS, getConfig} from './config'
-import {getImplicitAriaRoles} from './role-helpers'
+import {getImplicitAriaRoles, isInaccessible} from './role-helpers'
 
 const normalize = getDefaultNormalizer()
 
@@ -38,15 +38,28 @@ function getRegExpMatcher(string) {
   return new RegExp(escapeRegExp(string.toLowerCase()), 'i')
 }
 
-function makeSuggestion(queryName, content, {variant, name}) {
+function makeSuggestion(queryName, element, content, {variant, name}) {
+  let warning = ''
+  const queryOptions = {}
   const queryArgs = [
     queryName === 'Role' || queryName === 'TestId'
       ? content
       : getRegExpMatcher(content),
   ]
 
   if (name) {
-    queryArgs.push({name: getRegExpMatcher(name)})
+    queryOptions.name = getRegExpMatcher(name)
+  }
+
+  if (queryName === 'Role' && isInaccessible(element)) {
+    queryOptions.hidden = true
+    warning = `Element is inaccessible. This means that the element and all its children are invisible to screen readers.
+    If you are using the aria-hidden prop, make sure this is the right choice for your case.
+    `
+    console.warn(warning)
+  }
+  if (Object.keys(queryOptions).length > 0) {
+    queryArgs.push(queryOptions)
   }
 
   const queryMethod = `${variant}By${queryName}`
@@ -56,6 +69,7 @@ function makeSuggestion(queryName, content, {variant, name}) {
     queryMethod,
     queryArgs,
     variant,
+    warning,
     toString() {
       let [text, options] = queryArgs
 
@@ -90,7 +104,7 @@ export function getSuggestedQuery(element, variant = 'get', method) {
   const role =
     element.getAttribute('role') ?? getImplicitAriaRoles(element)?.[0]
   if (role !== 'generic' && canSuggest('Role', method, role)) {
-    return makeSuggestion('Role', role, {
+    return makeSuggestion('Role', element, role, {
       variant,
       name: computeAccessibleName(element, {
         computedStyleSupportsPseudoElements: getConfig()
@@ -101,36 +115,40 @@ export function getSuggestedQuery(element, variant = 'get', method) {
 
   const labelText = getLabelTextFor(element)
   if (canSuggest('LabelText', method, labelText)) {
-    return makeSuggestion('LabelText', labelText, {variant})
+    return makeSuggestion('LabelText', element, labelText, {variant})
   }
 
   const placeholderText = element.getAttribute('placeholder')
   if (canSuggest('PlaceholderText', method, placeholderText)) {
-    return makeSuggestion('PlaceholderText', placeholderText, {variant})
+    return makeSuggestion('PlaceholderText', element, placeholderText, {
+      variant,
+    })
   }
 
   const textContent = normalize(getNodeText(element))
   if (canSuggest('Text', method, textContent)) {
-    return makeSuggestion('Text', textContent, {variant})
+    return makeSuggestion('Text', element, textContent, {variant})
   }
 
   if (canSuggest('DisplayValue', method, element.value)) {
-    return makeSuggestion('DisplayValue', normalize(element.value), {variant})
+    return makeSuggestion('DisplayValue', element, normalize(element.value), {
+      variant,
+    })
   }
 
   const alt = element.getAttribute('alt')
   if (canSuggest('AltText', method, alt)) {
-    return makeSuggestion('AltText', alt, {variant})
+    return makeSuggestion('AltText', element, alt, {variant})
   }
 
   const title = element.getAttribute('title')
   if (canSuggest('Title', method, title)) {
-    return makeSuggestion('Title', title, {variant})
+    return makeSuggestion('Title', element, title, {variant})
   }
 
   const testId = element.getAttribute(getConfig().testIdAttribute)
   if (canSuggest('TestId', method, testId)) {
-    return makeSuggestion('TestId', testId, {variant})
+    return makeSuggestion('TestId', element, testId, {variant})
   }
 
   return undefined

types/suggestions.d.ts

@@ -1,5 +1,15 @@
+export interface QueryOptions {
+  [key: string]: RegExp | boolean
+}
+
+export type QueryArgs = [string, QueryOptions?]
+
 export interface Suggestion {
   queryName: string
+  queryMethod: string
+  queryArgs: QueryArgs
+  variant: string
+  warning?: string
   toString(): string
 }