fix: don't suggest query that would result in different element

Author: benmonro

src/__tests__/suggestions.js

@@ -35,6 +35,18 @@ test('respects ignores', () => {
   ).not.toThrowError()
 })
 
+test('does not suggest query that would give a different element', () => {
+  renderIntoDocument(`
+  <div data-testid="foo"><img src="foo" /></div>
+  <div data-testid="bar"><a href="/foo"><div role="figure"><img src="foo" /></div></a></div>
+  <a data-testid="baz"><h1>link text</h1></a>
+  `)
+
+  expect(() => screen.getByTestId('foo')).not.toThrowError()
+  expect(() => screen.getByTestId('bar')).not.toThrowError()
+  expect(() => screen.getByTestId('baz')).not.toThrowError()
+})
+
 test('does not suggest when using getByRole', () => {
   renderIntoDocument(`<button data-testid="foo">submit</button>`)
 
@@ -57,6 +69,12 @@ test(`should not suggest if the suggestion would give different results`, () =>
   ).not.toThrowError()
 })
 
+test('should suggest by label over title', () => {
+  renderIntoDocument(`<label><span>bar</span><input title="foo" /></label>`)
+
+  expect(() => screen.getByTitle('foo')).toThrowError(/getByLabelText\("bar"\)/)
+})
+
 test('should not suggest if there would be mixed suggestions', () => {
   renderIntoDocument(`
   <button data-testid="foo">submit</button>

src/suggestions.js

@@ -1,8 +1,8 @@
 import {computeAccessibleName} from 'dom-accessibility-api'
-import {getRoles} from './role-helpers'
 import {getDefaultNormalizer} from './matches'
 import {getNodeText} from './get-node-text'
 import {DEFAULT_IGNORE_TAGS} from './config'
+import {getImplicitAriaRoles} from './role-helpers'
 
 const normalize = getDefaultNormalizer()
 
@@ -38,11 +38,9 @@ function makeSuggestion(queryName, content, {variant, name}) {
 }
 
 export function getSuggestedQuery(element, variant) {
-  const roles = getRoles(element)
-
-  const roleNames = Object.keys(roles)
-  if (roleNames.length) {
-    const [role] = roleNames
+  const role =
+    element.getAttribute('role') ?? getImplicitAriaRoles(element)?.[0]
+  if (role) {
     return makeSuggestion('Role', role, {
       variant,
       name: computeAccessibleName(element),