fix(suggestions): only warn about inaccessible elements when actually showing the suggestion (#827)

Author: benmonro

src/__tests__/suggestions.js

@@ -551,16 +551,44 @@ test('should get the first label with aria-labelledby contains multiple ids', ()
   })
 })
 
-test('should suggest hidden option if element is not in the accessibilty tree', () => {
+test('should not suggest or warn about hidden element when suggested query is already used.', () => {
   console.warn.mockImplementation(() => {})
 
-  const {container} = renderIntoDocument(`
+  renderIntoDocument(`
     <input type="text" aria-hidden=true />
   `)
 
-  expect(
-    getSuggestedQuery(container.querySelector('input'), 'get', 'role'),
-  ).toMatchObject({
+  expect(() => screen.getByRole('textbox', {hidden: true})).not.toThrowError()
+  expect(console.warn).not.toHaveBeenCalled()
+})
+test('should suggest and warn about if element is not in the accessibility tree', () => {
+  console.warn.mockImplementation(() => {})
+
+  renderIntoDocument(`
+    <input type="text" data-testid="foo" aria-hidden=true />
+  `)
+
+  expect(() => screen.getByTestId('foo', {hidden: true})).toThrowError(
+    /getByRole\('textbox', \{ hidden: true \}\)/,
+  )
+  expect(console.warn).toHaveBeenCalledWith(
+    expect.stringContaining(`Element is inaccessible.`),
+  )
+})
+
+test('should suggest hidden option if element is not in the accessibility tree', () => {
+  console.warn.mockImplementation(() => {})
+
+  const {container} = renderIntoDocument(`
+    <input type="text" data-testid="foo" aria-hidden=true />
+  `)
+
+  const suggestion = getSuggestedQuery(
+    container.querySelector('input'),
+    'get',
+    'role',
+  )
+  expect(suggestion).toMatchObject({
     queryName: 'Role',
     queryMethod: 'getByRole',
     queryArgs: ['textbox', {hidden: true}],
@@ -569,6 +597,7 @@ test('should suggest hidden option if element is not in the accessibilty tree',
     If you are using the aria-hidden prop, make sure this is the right choice for your case.
     `,
   })
+  suggestion.toString()
 
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
     Array [

src/suggestions.js

@@ -33,7 +33,6 @@ function makeSuggestion(queryName, element, content, {variant, name}) {
     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)
@@ -48,6 +47,9 @@ function makeSuggestion(queryName, element, content, {variant, name}) {
     variant,
     warning,
     toString() {
+      if (warning) {
+        console.warn(warning)
+      }
       let [text, options] = queryArgs
 
       text = typeof text === 'string' ? `'${text}'` : text