testing-library / testing-library/dom-testing-library

Button's inner text is ignored when label exists, even though aria-hidden is set to true

Open
#1,233 7 comments 0 reactions 0 assignees View on GitHub

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/dom version: ^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:
image
Reproduction:

See attached code snippet

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.