dom-testing-library
dom-testing-library copied to clipboard
testing-library
Can not get by role "mark"
@testing-library/reactversion: ^13.2.0- Testing Framework and version: react-scripts ^5.0.1
- DOM Environment: @testing-library/jest-dom: "^5.16.4",
Relevant code or config:
import escapeRegExp from "lodash/escapeRegExp";
import React, { ReactElement } from "react";
export type TextHighlightProps = {
text: string;
highlight: string;
};
const TextHighlight = React.memo(
({ text, highlight }: TextHighlightProps): ReactElement => {
if (!highlight.trim()) {
return <span>{text}</span>;
}
const regex = new RegExp(`(${escapeRegExp(highlight)})`, "gi");
const parts = text.split(regex);
/* eslint-disable react/no-array-index-key */
return (
<span>
{parts.map(
(part, i) =>
part &&
(i % 2 === 1 ? (
<mark key={i}>{part}</mark>
) : (
<span key={i}>{part}</span>
))
)}
</span>
);
}
);
export default TextHighlight;
What you did:
Trying to get by the mark role as described https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/mark_role
What happened:
The testing library is unable to find the mark role
TestingLibraryElementError: Unable to find an accessible element with the role "mark"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, <script />, <style />
<body>
<div>
<span>
<span>
This is a
</span>
<mark>
test
</mark>
<span>
. THIS IS A
</span>
<mark>
TEST
</mark>
<span>
.
</span>
</span>
</div>
</body>
Reproduction:
it("should split the text based on the highlight", () => {
render(
<TextHighlight text="This is a test. THIS IS A TEST." highlight="test" />
);
expect(screen.getAllByRole("mark")).toHaveLength(2);
});
Problem description:
In order to test the mark component, we need to get it by role as according to the accessibility guidelines:
"The mark element should not be given an accessible name; both aria-label and aria-labelledby attributes are prohibited on mark."
Suggested solution:
Hi @xiduzo!
Thanks for opening this one :)
Unfortunately, the mark role is a part of WAI-ARIA 1.3 which is still being drafted and we only support WAI-ARIA 1.2 at the moment.
I'm keeping this open, though the implementation will probably need to be a part of https://github.com/A11yance/aria-query.
@ghostd Thanks for letting us know, but unfortunately, that commit wasn't released yet, the latest release is 5.1.3 which was released at the end of October 2022.
:tada: This issue has been resolved in version 10.0.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: