`getByRole('meter')` doesn't find `meter` element

[idanen]

• @testing-library/dom version: ^8.17.0
• Testing Framework and version: jest ^28.1.0
• DOM Environment: In codesandbox

Relevant code or config:

test('getting by implicit "meter" role', () => {
  const aValue = 21;
  render(<Meter value={aValue} />);
  expect(screen.getByRole("meter")).toHaveValue(aValue);
});

function Meter({
  value = 0,
  min = 0,
  max = 0,
  low = 3,
  high = 90,
  label = "meter"
}) {
  return (
    <meter
      aria-label={label}
      value={value}
      min={min}
      max={max}
      low={low}
      high={high}
    />
  );
}

What you did:

Tried to fetch by (implicit) meter role

What happened:

Failed to get element

Reproduction:

https://codesandbox.io/s/react-testing-library-getbyrole-meter-forked-ziqc09

Problem description:

Should be able to fetch a meter element by implicit role

Suggested solution:

[MatanBobi]

Hi @idanen! Thanks for opening this one :) Looking at the spec, meter doesn't have an implicit role: https://www.w3.org/TR/html-aria/

Where did you see that it does? Remember that aria-query follows the spec as is and browsers might not.

[idanen]

Oh.. Actually I followed Chrome's behavior in its accessibility tab, which shows a role of meter on <meter /> elements. So I guess this can be closed then?

[MatanBobi]

Yeah, sorry about that :)

[Blacktiger]

Maybe we should re-open this issue? Looks like the spec now specifies that meter is an implicit role.

https://www.w3.org/TR/html-aria/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

[github-actions[bot]]

Uh oh! @Blacktiger, the image you shared is missing helpful alt text. Check https://github.com/testing-library/dom-testing-library/issues/1171#issuecomment-1800395640.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[MatanBobi]

Thanks @Blacktiger! I've tested this in our alpha version of @testing-library/dom and it works. We're testing it in multiple places to check for regressions so it's not yet released. If you want, you can install it manually also and see if that works for you.

[Blacktiger]

For now we just used a data-testid, but I'll definitely want to get our version upgraded when you guys do the final release. We really like how testing-library works and have been very happy with it, so thanks for all the work you guys have done on it.

[MatanBobi]

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: