Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<li> is not an accessible element

See original GitHub issue

@testing-library/dom version: 7.22.0
Testing Framework and version: jest version 24.9.0
DOM Environment: jsdom version 11.12.0

Relevant code or config:

// spinnerButton.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import SpinnerButton from '../spinnerButton.js';

test("renders a spinner when it's loading", () => {
    // render the button
    render(<SpinnerButton text={''} waiting={true} />);

    // expect a spinner to exist
    expect(screen.getByRole('status')).toBeInTheDocument();
});

// spinnerButton.js
import React from 'react';
import Spinner from 'react-bootstrap/Spinner';
import './styles/spinnerButton.css';

class SpinnerButton extends React.Component {
    render = () => {
        const buttonProps = { ...this.props };
        delete buttonProps.waiting;
        delete buttonProps.text;
        delete buttonProps.spinnerClassName;
        return (
            <button {...buttonProps}>
                {this.props.waiting ? (
                    <Spinner
                        as='li'
                        size='sm'
                        animation='border'
                        role='status'                     /* <= RELEVANT LINE OF CODE */
                        className={this.props.spinnerClassName}
                        aria-hidden='true'
                    >
                        <span></span>
                    </Spinner>
                ) : (
                    this.props.text
                )}
            </button>
        );
    };
}

export default SpinnerButton;

What you did:

I have a React component, SpinnerButton that shows some text before it has been clicked and a spinning wheel after it has been clicked. I gave a DOM node in that button a role called 'status'.

Then I tried to create a test that would find that element by its role, but it cannot be found.

What happened:

The test output looks like this:

 renders a spinner when it's loading

    TestingLibraryElementError: Unable to find an accessible element with the role "status"

    Here are the accessible roles:

      button:

      Name "":
      <button />

      --------------------------------------------------

    <body>
      <div>
        <button>
          <li
            aria-hidden="true"
            class="spinner-border spinner-border-sm"
            role="status"
          >
            <span />
          </li>
        </button>
      </div>
    </body>

      29 |
      30 |     // expect a spinner to exist
    > 31 |     expect(screen.getByRole('status')).toBeInTheDocument();
         |                   ^
      32 | });
      33 |

So I know that the <li> element is there and that it has role="status" set.

The question is, why is “unable to find an accessible element?” The element is there and it has the role.

Problem description:

I want to find the node that I labelled, but I cannot.

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

2reactions

winterlamoncommented, Aug 19, 2020

@nullromo What happens when you use expect(screen.getByRole('status', { hidden: true })).toBeInTheDocument()?

By default, getByRole will not check queries that are excluded from the accessibility tree, so not specifying the hidden option is likely skipping your spinner because you have aria-hidden="true".

1reaction

eps1loncommented, Aug 20, 2020

For loading spinners there’s quite a bit of helpful ressources out there but no concrete recommendation in the ARIA authoring practices.

I can’t give you a recommendation since I didn’t test any of those patterns.

Either way this issue tracker is for bug/feature tracking. For evaluating a11y patterns you should start curating a list of trustworthy resources or test it yourself. I hope that helps a bit.