diff --git a/.changeset/shiny-chicken-occur.md b/.changeset/shiny-chicken-occur.md new file mode 100644 index 0000000000..45a560480b --- /dev/null +++ b/.changeset/shiny-chicken-occur.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: silence label warning for buttons and anchor tags with title attributes diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md index 17841b863c..7dfbe75888 100644 --- a/documentation/docs/98-reference/.generated/compile-warnings.md +++ b/documentation/docs/98-reference/.generated/compile-warnings.md @@ -81,7 +81,7 @@ Coding for the keyboard is important for users with physical disabilities who ca ### a11y_consider_explicit_label ``` -Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute +Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute ``` ### a11y_distracting_elements diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md index a299fa53bc..bc34829ce9 100644 --- a/packages/svelte/messages/compile-warnings/a11y.md +++ b/packages/svelte/messages/compile-warnings/a11y.md @@ -66,7 +66,7 @@ Coding for the keyboard is important for users with physical disabilities who ca ## a11y_consider_explicit_label -> Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute +> Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute ## a11y_distracting_elements diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js index e2f84290e5..8c5bf55e5f 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js @@ -382,7 +382,10 @@ export function check_element(node, context) { } // element-specific checks - const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby'); + const is_labelled = + attribute_map.has('aria-label') || + attribute_map.has('aria-labelledby') || + attribute_map.has('title'); switch (node.name) { case 'a': diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 8c03e12e71..089cb1e118 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -174,11 +174,11 @@ export function a11y_click_events_have_key_events(node) { } /** - * Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute + * Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute * @param {null | NodeLike} node */ export function a11y_consider_explicit_label(node) { - w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\` or \`aria-labelledby\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`); + w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\`, \`aria-labelledby\` or \`title\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`); } /** diff --git a/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json b/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json index cd3778a443..3d9adc1cde 100644 --- a/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json @@ -1,7 +1,7 @@ [ { "code": "a11y_consider_explicit_label", - "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", + "message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute", "start": { "line": 1, "column": 0 diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte index e97951065d..463889dc4f 100644 --- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte @@ -4,6 +4,9 @@ + + + diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json index 2dcecf08b3..bc29076184 100644 --- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json @@ -1,7 +1,7 @@ [ { "code": "a11y_consider_explicit_label", - "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", + "message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute", "start": { "line": 1, "column": 0 @@ -13,7 +13,7 @@ }, { "code": "a11y_consider_explicit_label", - "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", + "message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute", "start": { "line": 2, "column": 0