Issue with *ByLabelText functions when using aria-labelledby with multiple IDs referencing `aria-label`

Hello all :)

Thanks for the library 🔥

• @testing-library/dom version: v10.4.0

Relevant code or config:

I made this branch with a test https://github.com/romain-trotard/dom-testing-library/tree/labelledby-multiple-repro and some comments on the code I think we should change.

  const {getByLabelText} = render(`
      <div id="frameworks-row" role="row" aria-label="Frameworks">
        <button aria-labelledby="select frameworks-row" id="select" aria-label="Select" type="button">Select</button>
        <span>Frameworks</span>
        <span>Other information</span>
      </div>
  `)

  // Do not find `Select Frameworks` because it takes element.textContent 
  // and not `aria-label` for the element with id `frameworks-row`
  expect(getByLabelText('Select Frameworks').id).toBe('select')
  expect(getByLabelText('Frameworks').id).toBe('frameworks-row')

What you did:

There are some use cases where we want to labelled an element with aria-labelledby that references an element that has aria-label.
For example, in the template above the button element has a aria-labelledby that references himself (that has aria-label) and the div with id frameworks-row (that has aria-label)

What happened:

The selector getByLabelText('Select Frameworks') does not work because when getting the element with id: frameworks-row, it's not the aria-label that is retrieved but the textContent (here Select Frameworks Other information)

Reproduction:

https://github.com/romain-trotard/dom-testing-library/tree/labelledby-multiple-repro

npm run test

Problem description:

The selector getByLabelText('Select Frameworks') does not work because when getting the element with id: frameworks-row, it's not the aria-label that is retrieved but the textContent (here Select Frameworks Other information)

Suggested solution:

Here https://github.com/testing-library/dom-testing-library/blob/a86c54ccda5242ad8dfc1c70d31980bdbf96af7f/src/label-helpers.ts#L32
We should get the aria-label attribute before getting textContent, like this:

textContent = (element as HTMLInputElement).value || element.getAttribute('aria-label') || element.textContent

But we also need to find a way to concat these labels (when working with aria-labelledby) here:

https://github.com/testing-library/dom-testing-library/blob/a86c54ccda5242ad8dfc1c70d31980bdbf96af7f/src/queries/label-text.ts#L67-L86

Note: For the moment, I haven't given the solution much thought.

If the bug is acknowledged, I would be happy to make a fix ;)

Thanks :)

Start with src/label-helpers.ts and src/queries/label-text.ts, then inspect the labelledby-multiple-repro branch and run npm run test. Compare getByLabelText results for multiple aria-labelledby IDs, including referenced elements with aria-label, and consider the issue's expected Select Frameworks and Frameworks matches as the completion criteria.