Add semantic HTML elements implicit role support to queryByRole/getByRole selectors

[szabototo89]

Describe the feature you'd like:

queryByRole/getByRole selectors can return only those HTML elements which specified role explicitly (attribute role is defined explicitly). However semantic HTML elements (table column headers, table cells, textbox, etc.) have implicit ARIA roles and selectors should support those either. Example: https://codesandbox.io/s/domtestinglibraryariaroles-q5vkk?fontsize=14&module=%2Fsrc%2Findex.spec.tsx

Suggested implementation:

The following unit test shouldn't fail:

test("should get textbox (with implicit ARIA textbox role)", () => {
  const { queryByRole } = render(
    <div>
      <input type="text" />
    </div>
  );

  // this should also work
  expect(queryByRole("textbox")).toBeInTheDocument();
});

Describe alternatives you've considered:

The only alternative is to provide ARIA roles explicitly, but it increases redundancy and it's not so elegant either.

Teachability, Documentation, Adoption, Migration Strategy:

[kentcdodds]

Ah, that's tricky. I'd be open to expanding role to handle these implicit/semantic HTML roles though.

I don't currently have the bandwidth to do it myself, but here's the source file: https://github.com/testing-library/dom-testing-library/blob/master/src/queries/role.js and I'd probably recommend making a test file for this specifically in: https://github.com/testing-library/dom-testing-library/tree/master/src/__tests__

[szabototo89]

https://www.npmjs.com/package/aria-query npm package could help us to start expanding role and I can see it within node_modules in the dom-testing-library (however it's not listed in package.json as a dependency). What do you think about its usage?

Another approach to implementing it ourselves based on W3C specification.

[kentcdodds]

That package sounds perfect 👍

[szabototo89]

I've started to implement it.