Skip to content

Commit

Permalink
fix: Don't require redundant role for <img alt="" />
Browse files Browse the repository at this point in the history
Fixes #2951

This updates the `require-valid-alt-text` rule so that it does not
*require* setting `role="presentation"` or `role="none"` for an `<img
alt="" />`.

Context

After bumping `aria-query` in #2927,
`ember-template-lint` began reporting an error for the following:

```html
<img alt="" role="presentation" />
```

The error is from the `no-redundant-role`. I believe it is correct to
report an error in this case because `<img alt="" />` already implicitly
has a `role` of `presentation`.

However, this new behavior was in direct conflict with part of the
`require-valid-alt-text` rule that required setting
`role="presentation"` or `role="none"` whenever an image has `alt=""`.
  • Loading branch information
HeroicEric committed Aug 9, 2023
1 parent 6a725f2 commit f269000
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 54 deletions.
12 changes: 0 additions & 12 deletions lib/rules/require-valid-alt-text.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
49 changes: 7 additions & 42 deletions test/unit/rules/require-valid-alt-text-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">',
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit f269000

Please sign in to comment.