Don't require redundant role for <img alt="" /> in `require-valid-a…

…lt-text` rule (#2954)
ember-template-lint · Aug 12, 2023 · 190be4c · 190be4c
1 parent 25d5ba7
commit 190be4c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 55 deletions.
diff --git a/docs/rule/require-valid-alt-text.md b/docs/rule/require-valid-alt-text.md
@@ -12,7 +12,7 @@ This rule **forbids** the following:
 
 ### `<img>`
 
-An `<img>` must have the `alt` attribute. It must have either meaningful text, or be an empty string. If it is an empty string, the `<img>` element tag must also have `role="presentation"` or `role="none"`.
+An `<img>` must have the `alt` attribute. It must have either meaningful text, or be an empty string.
 
 The content of an `alt` attribute is used to calculate the machine-readable label of an element, whereas the text content is used to produce a label for the element. For this reason, adding a label to an icon can produce a confusing or duplicated label on a control that already has appropriate text content.
 

diff --git a/lib/rules/require-valid-alt-text.js b/lib/rules/require-valid-alt-text.js
@@ -120,18 +120,6 @@ export default class RequireValidAltText extends Rule {
                 normalizedAltValue = null;
               }
 
-              if (normalizedAltValue === '') {
-                if (['presentation', 'none'].includes(roleValue)) {
-                  return;
-                }
-                this.logNode({
-                  message:
-                    'If the `alt` attribute is present and the value is an empty string, `role="presentation"` or `role="none"` must be present',
-                  node,
-                });
-                return;
-              }
-
               if (normalizedAltValue !== null) {
                 if (/^\d+$/g.test(normalizedAltValue)) {
                   this.logNode({

diff --git a/test/unit/rules/require-valid-alt-text-test.js b/test/unit/rules/require-valid-alt-text-test.js
@@ -18,9 +18,16 @@ generateRuleTests({
     '<img alt="some-alt-name">',
     '<img alt="name {{picture}}">',
     '<img alt="{{picture}}">',
+    '<img alt="">',
+    '<img alt="" src="zoey.jpg">',
     '<img alt="" role="none">',
     '<img alt="" role="presentation">',
 
+    '<img alt>',
+    '<img alt role="none">',
+    '<img alt role="presentation">',
+    '<img alt src="zoey.jpg">',
+
     // Valid words containing redundant words.
     '<img alt="logout">',
     '<img alt="photography">',
@@ -96,48 +103,6 @@ generateRuleTests({
         `);
       },
     },
-    {
-      template: '<img alt="" src="zoey.jpg">',
-
-      verifyResults(results) {
-        expect(results).toMatchInlineSnapshot(`
-          [
-            {
-              "column": 0,
-              "endColumn": 27,
-              "endLine": 1,
-              "filePath": "layout.hbs",
-              "line": 1,
-              "message": "If the \`alt\` attribute is present and the value is an empty string, \`role=\\"presentation\\"\` or \`role=\\"none\\"\` must be present",
-              "rule": "require-valid-alt-text",
-              "severity": 2,
-              "source": "<img alt=\\"\\" src=\\"zoey.jpg\\">",
-            },
-          ]
-        `);
-      },
-    },
-    {
-      template: '<img alt src="zoey.jpg">',
-
-      verifyResults(results) {
-        expect(results).toMatchInlineSnapshot(`
-          [
-            {
-              "column": 0,
-              "endColumn": 24,
-              "endLine": 1,
-              "filePath": "layout.hbs",
-              "line": 1,
-              "message": "If the \`alt\` attribute is present and the value is an empty string, \`role=\\"presentation\\"\` or \`role=\\"none\\"\` must be present",
-              "rule": "require-valid-alt-text",
-              "severity": 2,
-              "source": "<img alt src=\\"zoey.jpg\\">",
-            },
-          ]
-        `);
-      },
-    },
     {
       template: '<img alt="path/to/zoey.jpg" src="path/to/zoey.jpg">',
       verifyResults(results) {