Can not get by role "mark"

xiduzo commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

Hi,

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

MatanBobi commented 1 year ago

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

MatanBobi commented 5 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

testing-library / dom-testing-library