Closed
Description
@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:
Metadata
Metadata
Assignees
Labels
No labels