ByRole and aria-modal

• @testing-library/dom version: 7.29
• Testing Framework and version: Cypress 6.1.0
• DOM Environment: Chrome 87.0.4280.88

Relevant code or config:

  it.only('no aria-modal support', () => {
    cy.visit('https://ns2hp.csb.app/');

    cy.findByRole('button', { name: 'Go' }).click();
    cy.findByText('Modal title').should('be.visible');
    cy.wait(500);

    cy.findByRole('button', { name: 'Go' }).click();
    
  // Note: This does produce the expected result
  // cy.get('[aria-modal=true]').findByRole('button', { name: 'Go' }).click();
  });

What you did:

In a Cypress test a Bootstrap modal dialog is opened. Once the modal is opened findByRole() is used to search for a second button inside the modal with the same label as a button outside of the modal.

What happened:

Received an error when running the test:
Timed out retrying: Found multiple elements with the role "button" and name "Go"

Reproduction:

See for the code under test: https://codesandbox.io/s/epic-hooks-ns2hp?file=/index.html

The Cypress test is above

Problem description:

According to the specification using the aria-modal=true attribute means the windows underneath the current dialog are not available for interaction (inert). Therefor the button outside the modal should not have been selected by findByRole().

Note that explicitly searching for the modal root and doing the find on the subtree work's as expected.

Suggested solution:

Check if aria-modal=true is present in the current subtree and if so limit the search to there.

Start with the Cypress test shown in the issue and the linked CodeSandbox reproduction, then trace findByRole in @testing-library/dom. Verify how the aria-modal=true modal affects the duplicate button query, and add a regression test showing that the modal button is selected without explicitly querying the modal subtree.