diff --git a/.changeset/odd-shirts-hear.md b/.changeset/odd-shirts-hear.md new file mode 100644 index 0000000000..cc49c393d9 --- /dev/null +++ b/.changeset/odd-shirts-hear.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +feat: Add accessibility warnings for buttons and anchors without explicit labels and content diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md index 490a015693..a1f8a6da5d 100644 --- a/packages/svelte/messages/compile-warnings/a11y.md +++ b/packages/svelte/messages/compile-warnings/a11y.md @@ -22,6 +22,10 @@ > Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as ` + 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 eff05f1b9a..cd3778a443 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_missing_content", - "message": "`` element should have child content", + "code": "a11y_consider_explicit_label", + "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", "start": { "line": 1, "column": 0 diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/input.svelte index 4d05595185..e006516174 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/input.svelte @@ -2,7 +2,7 @@ const abc = 'abc'; - - - - + + + + diff --git a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte index 37df598129..c525ebe813 100644 --- a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte @@ -31,7 +31,7 @@
foo - + 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 new file mode 100644 index 0000000000..6c5a35fc39 --- /dev/null +++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte @@ -0,0 +1,11 @@ + + + + + + + + + + +Link text 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 new file mode 100644 index 0000000000..2dcecf08b3 --- /dev/null +++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json @@ -0,0 +1,26 @@ +[ + { + "code": "a11y_consider_explicit_label", + "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 1, + "column": 17 + } + }, + { + "code": "a11y_consider_explicit_label", + "message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute", + "start": { + "line": 2, + "column": 0 + }, + "end": { + "line": 2, + "column": 24 + } + } +] diff --git a/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json b/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json index da77e2d36d..484d04400a 100644 --- a/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json @@ -1,7 +1,7 @@ [ { "code": "a11y_missing_content", - "message": "`

` element should have child content", + "message": "`

` element should contain text", "start": { "line": 1, "column": 0 diff --git a/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte b/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte index 673c615704..0e2acb1225 100644 --- a/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte @@ -3,7 +3,7 @@
{}}>
{}}>
{}}>
- +
{}} on:keypress={() => {}}>
{}} on:keypress={() => {}}>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte index 742d21245b..1adea90ba3 100644 --- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte @@ -2,7 +2,7 @@
{}}>
{}} on:keypress={() => {}}>
- +

{}}>Heading

Heading

diff --git a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-tabindex/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-tabindex/input.svelte index 8cb10941ae..93bf4d3fb6 100644 --- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-tabindex/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-tabindex/input.svelte @@ -1,7 +1,7 @@ - - - + + +
diff --git a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte index 8b6da3b8c8..2ccd765aa2 100644 --- a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte @@ -2,7 +2,7 @@
- +
diff --git a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte index 44d8b8beb1..ee7ed4f084 100644 --- a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte @@ -3,7 +3,7 @@ - +
{}} role="button">
{}} /> diff --git a/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte b/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte index d641d77e5d..917e6167ad 100644 --- a/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte @@ -4,7 +4,7 @@
- +
diff --git a/packages/svelte/tests/validator/samples/a11y-tabindex-no-positive/input.svelte b/packages/svelte/tests/validator/samples/a11y-tabindex-no-positive/input.svelte index eacfdace57..843247fb4d 100644 --- a/packages/svelte/tests/validator/samples/a11y-tabindex-no-positive/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-tabindex-no-positive/input.svelte @@ -2,7 +2,7 @@ let foo; - - - - + + + + diff --git a/packages/svelte/tests/validator/samples/global-event-reference/input.svelte b/packages/svelte/tests/validator/samples/global-event-reference/input.svelte index 9a34449b42..378d0adeb9 100644 --- a/packages/svelte/tests/validator/samples/global-event-reference/input.svelte +++ b/packages/svelte/tests/validator/samples/global-event-reference/input.svelte @@ -2,8 +2,8 @@ let onclick; - - + + - - + + diff --git a/packages/svelte/tests/validator/samples/illegal-attribute-character/input.svelte b/packages/svelte/tests/validator/samples/illegal-attribute-character/input.svelte index d05607f50c..8f5bb8a2cc 100644 --- a/packages/svelte/tests/validator/samples/illegal-attribute-character/input.svelte +++ b/packages/svelte/tests/validator/samples/illegal-attribute-character/input.svelte @@ -2,14 +2,14 @@ import C from './irrelevant'; - - - - + + + + - + diff --git a/packages/svelte/tests/validator/samples/state-referenced-locally-types/input.svelte b/packages/svelte/tests/validator/samples/state-referenced-locally-types/input.svelte index 30d282d7e4..4b992a774b 100644 --- a/packages/svelte/tests/validator/samples/state-referenced-locally-types/input.svelte +++ b/packages/svelte/tests/validator/samples/state-referenced-locally-types/input.svelte @@ -3,4 +3,4 @@ let { b }: { b: string } = $derived(a); - \ No newline at end of file + diff --git a/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte b/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte index cccb0dd208..40e78397c6 100644 --- a/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte +++ b/packages/svelte/tests/validator/samples/style-directive-valid-reference/input.svelte @@ -2,4 +2,4 @@ export let height; - +