Skip to content

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

Closed
@szabototo89

Description

@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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions