fix: correctly handle img with empty alt

testing-library · Jun 26, 2023 · d89d507 · d89d507
1 parent 8d7c09e
commit d89d507
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/src/__tests__/__snapshots__/role-helpers.js.snap b/src/__tests__/__snapshots__/role-helpers.js.snap
@@ -190,5 +190,31 @@ Name "":
  data-testid="a-dd"
 />
 
+--------------------------------------------------
+img:
+
+Name "":
+<img
+ data-testid="a-img-1"
+ src="http://example.com/image.png"
+/>
+
+Name "a meaningful description":
+<img
+ alt="a meaningful description"
+ data-testid="a-img-3"
+ src="http://example.com/image.png"
+/>
+
+--------------------------------------------------
+presentation:
+
+Name "":
+<img
+ alt=""
+ data-testid="a-img-2"
+ src="http://example.com/image.png"
+/>
+
 --------------------------------------------------
 `;
diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js
@@ -58,19 +58,22 @@ function setup() {
 
  <form data-testid="a-form" />
  <section data-testid="a-section" />
-  </article>
-  <dl>
+ </article>
+ <dl>
  <dt data-testid="a-dt">Term</dt>
  <dd data-testid="a-dd">Definition</dd>
- </dl>
+ </dl>
+
+ <img src="http://example.com/image.png" data-testid='a-img-1'/>
+ <img alt="" src="http://example.com/image.png" data-testid='a-img-2'/>
+ <img alt="a meaningful description" src="http://example.com/image.png" data-testid='a-img-3'/>
 </section>
  `)
 
  return {
  unnamedSection: getByTestId('a-section'),
  namedSection: getByTestId('named-section'),
  anchor: getByTestId('a-link'),
- invalidAnchor: getByTestId('invalid-link'),
  h1: getByTestId('a-h1'),
  h2: getByTestId('a-h2'),
  h3: getByTestId('a-h3'),
@@ -98,14 +101,16 @@ function setup() {
  dt: getByTestId('a-dt'),
  dd: getByTestId('a-dd'),
  header: getByTestId('a-header'),
+ invalidAnchor: getByTestId('invalid-link'),
+ unnamedImg: getByTestId('a-img-1'),
+ presentationImg: getByTestId('a-img-2'),
+ namedImg: getByTestId('a-img-3'),
  }
 }
 
 test('getRoles returns expected roles for various dom nodes', () => {
  const {
- unnamedSection,
  anchor,
- invalidAnchor,
  h1,
  h2,
  h3,
@@ -133,11 +138,15 @@ test('getRoles returns expected roles for various dom nodes', () => {
  dd,
  dt,
  header,
+ invalidAnchor,
+ unnamedSection,
+ unnamedImg,
+ presentationImg,
+ namedImg,
  } = setup()
 
  expect(getRoles(namedSection)).toEqual({
  link: [anchor],
- generic: [invalidAnchor, unnamedSection],
  heading: [h1, h2, h3],
  navigation: [nav],
  radio: [radio, radio2],
@@ -153,6 +162,9 @@ test('getRoles returns expected roles for various dom nodes', () => {
  region: [namedSection],
  term: [dt],
  definition: [dd],
+ generic: [invalidAnchor, unnamedSection],
+ img: [unnamedImg, namedImg],
+ presentation: [presentationImg],
  })
  expect(getRoles(header)).toEqual({
  banner: [header],

diff --git a/src/role-helpers.js b/src/role-helpers.js
@@ -82,13 +82,18 @@ function buildElementRoleList(elementRolesMap) {
  return `${name}${attributes
  .map(({name: attributeName, value, constraints = []}) => {
  const shouldNotExist = constraints.indexOf('undefined') !== -1
- if (shouldNotExist) {
- return `:not([${attributeName}])`
- } else if (value) {
+ const shouldBeNonEmpty = constraints.indexOf('set') !== -1
+ const hasExplicitValue = typeof value !== 'undefined'
+
+ if (hasExplicitValue) {
  return `[${attributeName}="${value}"]`
- } else {
- return `[${attributeName}]`
+ } else if (shouldNotExist) {
+ return `:not([${attributeName}])`
+ } else if (shouldBeNonEmpty) {
+ return `[${attributeName}]:not([${attributeName}=""])`
  }
+
+ return `[${attributeName}]`
  })
  .join('')}`
  }