can't find element by role code

[chiptus]

• @testing-library/dom version: 12.1.2
• Testing Framework and version:
  jest 27.4.3
• DOM Environment:
  jsdom 16.6.0

Relevant code or config:

component

export default ({ name }) => <code>{name}</code>;

test

import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { render } from "@testing-library/react";
import Code from "../hello";

test("To render a code element", () => {
  const { getByRole } = render(<Code name="Jill" />);
  expect(getByRole("code")).toBeInTheDocument();
});

What you did:

I searched the code element by role code, I expected to find it by https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles

What happened:

The element is not found

Reproduction:

https://codesandbox.io/s/fail-to-find-role-code-qpzrs?file=/src/__tests__/hello.js

Problem description:

Per testing-library docs, it seems like it should work, as when I check the role of the element in chrome dev tools, I see 'code' as expected.

Suggested solution:

not sure, I've seen that aria-query doesn't support this role.

[MatanBobi]

Hi @chiptus!
Thanks for taking the time to open this one :)
Since the issue you're experiencing here is related to implicit roles, aria-query is indeed the package we're using for that.
Though, it's important to note that the Chrome DevTools isn't our source of truth.
We follow the ARIA standards and the way they define implicit roles.
As you can see here, the standard doesn't dictate an implicit role for code element and that's also the reason why aria-query aren't supporting that either.

For this specific use-case, I suggest either setting an explicit role on your own or query the element with a different approach :)

I'm closing this one as this is the wanted behavior in this scenario.
Thanks again!

[EmeraldWeb]

@MatanBobi
Hello, I'm sorry but I think it's better to reopen this issue, because there is corresponding role "code", now:

I have run into this problem today, so it will be cool if you're add this role. Thank you.

[MatanBobi]

Thanks @EmeraldWeb!
I see that the spec was updated.
I've opened an issue for aria-query regarding this :)

[CalebJamesStevens]

Bumping because this issue still isn't resolved

[MatanBobi]

@CalebJamesStevens, there's no need to bump this issue, we're waiting for aria-query to release a new version, once they will release it, we will upgrade our dependency.
@eps1lon do you know if there's a roadmap for aria-query release?

[jlp-craigmorten]

v10.0.0 is now live with this update.

[MatanBobi]

Thanks @jlp-craigmorten!

@all-contributors please add @jlp-craigmorten for question

[allcontributors]

@MatanBobi

I've put up a pull request to add @jlp-craigmorten! 🎉