a11y: implement img-redundant-alt (#4750)

pull/4772/head
André Lins 5 years ago committed by GitHub
parent 09115b5256
commit 153b128fe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -272,6 +272,7 @@ export default class Element extends Node {
}
this.validate_attributes();
this.validate_special_cases();
this.validate_bindings();
this.validate_content();
this.validate_event_handlers();
@ -420,8 +421,16 @@ export default class Element extends Node {
attribute_map.set(attribute.name, attribute);
});
}
validate_special_cases() {
const { component,attributes } = this;
const attribute_map = new Map();
attributes.forEach(attribute => (
attribute_map.set(attribute.name, attribute)
));
// handle special cases
if (this.name === 'a') {
const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
const id_attribute = attribute_map.get('id');
@ -447,9 +456,7 @@ export default class Element extends Node {
});
}
}
}
else {
} else {
const required_attributes = a11y_required_attributes[this.name];
if (required_attributes) {
const has_attribute = required_attributes.some(name => attribute_map.has(name));
@ -458,16 +465,34 @@ export default class Element extends Node {
should_have_attribute(this, required_attributes);
}
}
}
if (this.name === 'input') {
const type = attribute_map.get('type');
if (type && type.get_static_value() === 'image') {
const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
const has_attribute = required_attributes.some(name => attribute_map.has(name));
if (this.name === 'input') {
const type = attribute_map.get('type');
if (type && type.get_static_value() === 'image') {
const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
const has_attribute = required_attributes.some(name => attribute_map.has(name));
if (!has_attribute) {
should_have_attribute(this, required_attributes, 'input type="image"');
}
if (!has_attribute) {
should_have_attribute(this, required_attributes, 'input type="image"');
}
}
}
if (this.name === 'img') {
const alt_attribute = attribute_map.get('alt');
const aria_hidden_attribute = attribute_map.get('aria-hidden');
const aria_hidden_exist = aria_hidden_attribute && aria_hidden_attribute.get_static_value();
if (alt_attribute && !aria_hidden_exist) {
const alt_value = alt_attribute.get_static_value();
if (alt_value.match(/\b(image|picture|photo)\b/i)) {
component.warn(this, {
code: `a11y-img-redundant-alt`,
message: `A11y: Screenreaders already announce <img> elements as an image.`
});
}
}
}

@ -3,7 +3,7 @@
</script>
<figure>
<img src='foo.jpg' alt='a picture of a foo'>
<img src='foo.jpg' alt='a foo'>
{#if caption}
<figcaption>{caption}</figcaption>
{/if}

@ -1,5 +1,5 @@
<figure>
<img src='foo.jpg' alt='a picture of a foo'>
<img src='foo.jpg' alt='a foo'>
<figcaption>
a foo in its natural habitat

@ -1,5 +1,5 @@
<figure>
<img src='foo.jpg' alt='a picture of a foo'>
<img src='foo.jpg' alt='a foo'>
<figcaption>
a foo in its natural habitat
@ -9,7 +9,7 @@
</figure>
<figure>
<img src='foo.jpg' alt='a picture of a foo'>
<img src='foo.jpg' alt='a foo'>
<div class='markup-for-styling'>
<figcaption>

@ -5,14 +5,14 @@
"start": {
"line": 4,
"column": 1,
"character": 57
"character": 44
},
"end": {
"line": 6,
"column": 14,
"character": 115
"character": 102
},
"pos": 57
"pos": 44
},
{
"code": "a11y-structure",
@ -20,13 +20,13 @@
"start": {
"line": 15,
"column": 2,
"character": 252
"character": 226
},
"end": {
"line": 17,
"column": 15,
"character": 328
"character": 302
},
"pos": 252
"pos": 226
}
]

@ -0,0 +1,7 @@
<img src="foo" alt="Foo eating a sandwich." />
<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
<img src="foo" alt="Photo of foo being weird." />
<img src="bar" alt="Image of me at a bar!" />
<img src="foo" alt="Picture of baz fixing a bug." />
<img src="bar" alt="Plant doing photosynthesis in the afternoon" />
<img src="foo" alt="Picturesque food" />

@ -0,0 +1,47 @@
[
{
"code": "a11y-img-redundant-alt",
"message": "A11y: Screenreaders already announce <img> elements as an image.",
"end": {
"character": 173,
"column": 49,
"line": 3
},
"start": {
"character": 124,
"column": 0,
"line": 3
},
"pos": 124
},
{
"code": "a11y-img-redundant-alt",
"message": "A11y: Screenreaders already announce <img> elements as an image.",
"end": {
"character": 219,
"column": 45,
"line": 4
},
"start": {
"character": 174,
"column": 0,
"line": 4
},
"pos": 174
},
{
"code": "a11y-img-redundant-alt",
"message": "A11y: Screenreaders already announce <img> elements as an image.",
"end": {
"character": 272,
"column": 52,
"line": 5
},
"start": {
"character": 220,
"column": 0,
"line": 5
},
"pos": 220
}
]
Loading…
Cancel
Save