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.

Start with the App.js and App.test.js reproduction and run yarn test to confirm the current accessible-name result. Trace the accessible-name calculation entry point used by getByRole, then verify the behavior against the reported placeholder example. Done means the textbox can be found with name "placeholder-value" and the reproduction test passes.