Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can not get by role "mark" #1150

Closed
xiduzo opened this issue Jul 22, 2022 · 4 comments · Fixed by #1241
Closed

Can not get by role "mark" #1150

xiduzo opened this issue Jul 22, 2022 · 4 comments · Fixed by #1241

Comments

@xiduzo
Copy link

xiduzo commented Jul 22, 2022 •
edited
Loading

  • @testing-library/react version: ^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:
@MatanBobi MatanBobi transferred this issue from testing-library/react-testing-library Jul 23, 2022
@MatanBobi
Copy link
Member

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.

@hawkjr97 hawkjr97 mentioned this issue Feb 15, 2023
Merged
10 tasks
@ghostd
Copy link

ghostd commented Feb 28, 2023

Hi,

It seems the 'mark' role landed with this commit... we just need a new release of "aria-query".

@MatanBobi
Copy link
Member

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

image

@jlp-craigmorten jlp-craigmorten mentioned this issue Jun 27, 2023
Merged
4 tasks
@jlp-craigmorten jlp-craigmorten mentioned this issue Nov 11, 2023
Merged
@MatanBobi
Copy link
Member

🎉 This issue has been resolved in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: upgrade aria-query to 5.3.0 jlp-craigmorten/dom-testing-library
3 participants
@ghostd @xiduzo @MatanBobi