diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 8ff36de31a..b09891cb82 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -423,22 +423,29 @@ export default class Element extends Node { // handle special cases if (this.name === 'a') { - const attribute = attribute_map.get('href') || attribute_map.get('xlink:href'); - - if (attribute) { - const value = attribute.get_static_value(); - - if (value === '' || value === '#') { - component.warn(attribute, { + const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href'); + const id_attribute = attribute_map.get('id'); + const name_attribute = attribute_map.get('name'); + + if (href_attribute) { + const href_value = href_attribute.get_static_value(); + + if (href_value === '' || href_value === '#') { + component.warn(href_attribute, { code: `a11y-invalid-attribute`, - message: `A11y: '${value}' is not a valid ${attribute.name} attribute` + message: `A11y: '${href_value}' is not a valid ${href_attribute.name} attribute` }); } } else { - component.warn(this, { - code: `a11y-missing-attribute`, - message: `A11y: element should have an href attribute` - }); + const id_attribute_valid = id_attribute && id_attribute.get_static_value() !== ''; + const name_attribute_valid = name_attribute && name_attribute.get_static_value() !== ''; + + if(!id_attribute_valid && !name_attribute_valid){ + component.warn(this, { + code: `a11y-missing-attribute`, + message: `A11y: element should have an href attribute` + }); + } } }