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) #1290
Description
@testing-library/domversion: 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!