Accessible name not based on placeholder

• @testing-library/dom version: 7.28.1
• Testing Framework and version: Jest 26.6.0
• DOM Environment: jsdom 16.4.0 (also tested with cypress 6.1.0)
• Other: create-react-app with react-scripts 4.0.3

Relevant code or config:

App.js

function App() {
  return (
    <div className="App">
      <input type="text" placeholder="placeholder-value" />
    </div>
  );
}
export default App;

App.test.js

test('finds textbox by role and placeholder', () => {
  render(<App />);
  expect(screen.getByRole('textbox', { name: 'placeholder-value' })).toBeVisible()
});

What you did:

Run test (via yarn test)

What happened:

The test fails with the message:

TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name "placeholder-value"

    Here are the accessible roles:

      textbox:

      Name ""

Note that the value for Name is empty

Reproduction:

• clone https://github.com/nphmuller/dom-testing-placeholder-repro
• run yarn test

Relevant commit: https://github.com/nphmuller/dom-testing-placeholder-repro/commit/1786a0a4c048f244a469ac8a0fa1bdaf92fc54a3

Problem description:

When looking at the Chrome dev tools, the accessible name is also calculated based on the placeholder. See the screenshot below. dom-testing-library seems to ignore the placeholder value for calculating this name.

Suggested solution:

It would really help if you could support the placeholder during accessible name calculation.

[eps1lon]

I’d imagine that support has only grown since then.

Or not. In any case, we need to verify that claim. It might also be that AT just do this to fix author errors. AT and the ARIA spec make a big effort to fix author errors. That doesn’t mean that we as a dev tool should accept these errors which effectively encourages them.

@eps1lon Looks like the only thing you have that relates to placeholder is a commit removing the TODO since you didn’t find any reference for it 😅

Thanks for digging this up. That comment basically confirms my current suspicion: There are no references to placeholder being used in the accessible name. But that doesn’t mean there aren’t actually any.

[eps1lon]

I seem to remember putting some notes into https://github.com/eps1lon/dom-accessibility-api concerning placeholder. So I would suggest doing some digging there. Then we need to double check what accname would say and then what assistive technology (e.g. NVDA, VoiceOver, JAWS) actually do in these cases. Chrome devtools is not our primary source of truth here.

Regardless, don’t use placeholders.