Images with an empty alt attribute are not being assigned `presentation` role (and are still being found by testing library even though they are hidden from the accessibility tree)

[Aislinn Hayes]

• @testing-library/dom version: latest
• Testing Framework and version: jest and react-scripts as per the template and repro repository below
• DOM Environment: latest jsdom with jest as per the template and repro repository below

Relevant code or config:

Component

export const ImageWithEmptyAlt = () => {
  return <img alt="" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
}

Test file

import React from 'react'
import {render, screen} from '@testing-library/react'
import {ImageWithEmptyAlt} from '../'

test('ImageWithEmptyAlt should not render an img role because the img has alt="" - this fails', () => {
  render(<ImageWithEmptyAlt />)
  expect(screen.queryByRole('img')).not.toBeInTheDocument();
});

test('ImageWithEmptyAlt should render presentation role because the img has alt="" - this fails', () => {
  render(<ImageWithEmptyAlt />)
  expect(screen.getByRole('presentation')).toBeInTheDocument();
});

What you did:

⬆️

What happened:

⬆️

Reproduction:

https://github.com/ahayes91/dom-testing-library-template

Problem description:

#1235 suggests that an img with an empty alt attribute should be given a presentation role:

According to the ARIA docs an img should only default to the role of presentation if it has an alt attribute equal to "":

Additionally, given that an image with alt="" removes it from the accessibility tree (screenreader users can't access it), I would expect that testing library should not be able to find it unless I include hidden: true in the query.
The fact that the test "finds" the image when a screenreader user would not reduces our confidence that the automation is behaving correctly.

Suggested solution:

Not sure, it seems like a bug here but would need the maintainers to confirm!
Thank you!

[Yohan27x]

https://testing-library.com/docs/queries/byrole/#hidden

If you set hidden to true elements that are normally excluded from the accessibility tree are considered for the query as well. The default behavior follows https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion with the exception of role="none" and role="presentation" which are considered in the query in any case.

So it's a normal behavior that you cant still find it.