testing-library / testing-library/dom-testing-library
Button's inner text is ignored when label exists, even though aria-hidden is set to true
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
Heyho,
I have the problem that a button component has a label which has aria-hidden="true" causes findByRole to not look at the button's inner text.
In case I remove the for attribute from the label, it works as expected. But according to the accessibility tab in the browser, the label is ignored even with the for attribute set.
@testing-library/domversion: ^8.20.0- DOM Environment:
@testing-library/cypress: ^9.0.0
cypress: ^12.3.0
Relevant code or config:
[
'button1', // The correct for attribute pointing to the button, this causes the last finyByRole to fail
undefined, // Don't set this attribute
].forEach((labelFor) =>
it('should find button', () => {
cy.mount(
<div className="SCFormControl">
{/* The label is needed due to some internal layout, other controls always have a label containing the user-visible text */}
<label id="button1_label" htmlFor={labelFor} aria-hidden="true"></label>
<button type="button" id="button1">
<span className="somestylingclasses">Button 1</span>
</button>
</div>,
);
cy.findByText('Button 1').should('exist');
cy.findByRole('button').should('exist');
cy.findByRole('button', { name: 'Button 1' }).should('exist');
}),
);
What happened:
Reproduction:
See attached code snippet
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the attached Cypress reproduction with @testing-library/dom 8.20.0 and compare findByRole behavior when the label's for attribute is present or absent. Trace the accessible-name handling used by findByRole; done means the button is found by the visible name "Button 1" even when the aria-hidden label references it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cypress, javascript
- Domain
- accessibility, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100