diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md index 8143f43d09..a7c1b8ded8 100644 --- a/site/content/docs/05-accessibility-warnings.md +++ b/site/content/docs/05-accessibility-warnings.md @@ -250,6 +250,17 @@ Some HTML elements have default ARIA roles. Giving these elements an ARIA role t --- +### `a11y-no-noninteractive-tabindex` + +Tab key navigation should be limited to elements on the page that can be interacted with. + +```sv + +
+``` + +--- + ### `a11y-positive-tabindex` Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users. diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts index 7b1a3b3d29..2834847b8b 100644 --- a/src/compiler/compile/compiler_warnings.ts +++ b/src/compiler/compile/compiler_warnings.ts @@ -179,8 +179,8 @@ export default { code: 'a11y-missing-content', message: `A11y: <${name}> element should have child content` }), - a11y_no_nointeractive_tabindex: { - code: 'a11y-no-nointeractive-tabindex', + a11y_no_noninteractive_tabindex: { + code: 'a11y-no-noninteractive-tabindex', message: 'A11y: not interactive element cannot have positive tabIndex value' }, redundant_event_modifier_for_touch: { diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index b5f9caa6b8..48ea0ec3e1 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -550,11 +550,11 @@ export default class Element extends Node { } }); - // no-nointeractive-tabindex + // no-noninteractive-tabindex if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) { const tab_index = attribute_map.get('tabindex'); if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) { - component.warn(this, compiler_warnings.a11y_no_nointeractive_tabindex); + component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex); } } } diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json index 3508feca8e..97b8ccd9b3 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json @@ -1,6 +1,6 @@ [ { - "code": "a11y-no-nointeractive-tabindex", + "code": "a11y-no-noninteractive-tabindex", "end": { "character": 241, "column": 20, @@ -15,7 +15,7 @@ } }, { - "code": "a11y-no-nointeractive-tabindex", + "code": "a11y-no-noninteractive-tabindex", "end": { "character": 277, "column": 35, @@ -30,7 +30,7 @@ } }, { - "code": "a11y-no-nointeractive-tabindex", + "code": "a11y-no-noninteractive-tabindex", "end": { "character": 302, "column": 24, @@ -45,7 +45,7 @@ } }, { - "code": "a11y-no-nointeractive-tabindex", + "code": "a11y-no-noninteractive-tabindex", "end": { "character": 329, "column": 26,