From 46c10d0476c38fae9dff28b812fa476d3202a21a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Koles=C3=A1r?= <34346635+jakubkolesar@users.noreply.github.com> Date: Tue, 30 Sep 2025 17:46:58 +0200 Subject: [PATCH] fix: missing title warning for buttons and anchor tags (#16872) * fix(a11y): title warning for buttons and anchor tags * chore(changeset): added changeset * Update playgrounds/sandbox/index.html * Update .changeset/shiny-chicken-occur.md --------- Co-authored-by: 7nik Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .changeset/shiny-chicken-occur.md | 5 +++++ .../docs/98-reference/.generated/compile-warnings.md | 2 +- packages/svelte/messages/compile-warnings/a11y.md | 2 +- .../compiler/phases/2-analyze/visitors/shared/a11y/index.js | 5 ++++- packages/svelte/src/compiler/warnings.js | 4 ++-- .../validator/samples/a11y-anchor-has-content/warnings.json | 2 +- .../samples/a11y-consider-explicit-label/input.svelte | 3 +++ .../samples/a11y-consider-explicit-label/warnings.json | 4 ++-- 8 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 .changeset/shiny-chicken-occur.md 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