Image and combobox are not being detected by the getByRole.

[LAKSHMAN PRADEEP KALIDINDI]

Describe the bug

Image tagged element and combobox are not being detected by the getByRole query.

Aria-query previous working version - 5.1.3
Aria-query upgraded version version - 5.2.1

<img src="/rcore/static/media/AccessDenied_Icon.db53e967.svg" alt="" class="sc-lmJFLr hLGeOl sc-jRBLiq ghkJEk" id="">

Previously before the 'aria-query' upgrade, getByRole query will detect the above element. But after the upgrade this query is not able to detect the above element.

We have many test cases that are breaking due to above issue . This behavior is happening since v5.2.1. Please fix the issue above issue.

[kenny-lu]

I am also seeing this issue when using react testing library, since it depends on aria-query. Currently have to fix aria-query version to 5.1.3., and prevent it from updating to 5.2.1

[Craig Morten]

R.E. the img role, pertinent spec snippets:

HTML element	Implicit ARIA semantics (explicitly assigning these in markup is NOT RECOMMENDED)	ARIA role, state and property allowances
img with alt="some text"	role=img	Roles: button, checkbox, link, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, separator, slider, switch, tab or treeitem. (img is also allowed, but NOT RECOMMENDED.). DPub Role: doc-cover.Global aria-* attributes and any aria-* attributes applicable to the allowed roles.
img with alt=""	role=presentation	No role other than presentation, which is NOT RECOMMENDED. No aria-* attributes except aria-hidden="true".

REF: https://www.w3.org/TR/html-aria/#docconformance

It is therefore the W3C Recommendation that an img element with an empty alt as given in the issue example has a presentation role - we should expect this lib (and RTL's getByRole by extension) should match that element with getByRole("presentation").

Uncertain what the changes in https://github.com/A11yance/aria-query/pull/447/files#diff-643c621e212a40fbb0863ef49bc5bdfa2a95a406f7bdf2afb4ec3ebd0d16dabf have done to this effect 🤔

[Craig Morten]

See also conversation in testing-library/dom-testing-library#1235

[Craig Morten]

Test cases (with aria-query pinned to 5.2.1):

import "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";

describe("W3C Recommendations: https://www.w3.org/TR/html-aria/#docconformance", () => {
  test("img with no alt has an img role", async () => {
    render(<img src="#" />);

    expect(await screen.queryByRole("img")).not.toBeNull(); // Passes ✅
  });

  test("img with an empty alt has a presentation role", async () => {
    render(<img src="#" alt="" />);

    expect(await screen.queryByRole("presentation")).not.toBeNull(); // Passes ✅
  });

  test("img with a non-empty alt has an img role", async () => {
    render(<img src="#" alt="Alternative Text" />);

    expect(await screen.queryByRole("img")).not.toBeNull(); // Fails ❌
  });
});

[J. Renée Beach]

@jlp-craigmorten thank you for this report. I'll look into the issue this weekend and get a fix up.