From b4986ea691379dfe5357ef30ebd4d1b02462d2ef Mon Sep 17 00:00:00 2001 From: Bert B Date: Fri, 11 Nov 2022 17:32:23 -0500 Subject: [PATCH 1/2] update tabindex warning to ignore tabpanels --- src/compiler/compile/utils/a11y.ts | 4 +- .../input.svelte | 3 ++ .../warnings.json | 40 +++++++++---------- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index b96386a3b08f..8fcb13a42dcd 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/src/compiler/compile/utils/a11y.ts @@ -43,7 +43,9 @@ const interactive_roles = new Set( .concat( // 'toolbar' does not descend from widget, but it does support // aria-activedescendant, thus in practice we treat it as a widget. - 'toolbar' + 'toolbar', + //focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable. + 'tabpanel' ) ); diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte index e9ac0d3c9f7a..c10a9f20bcb5 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte @@ -7,8 +7,11 @@
+
+ + diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json index 740d9b346cb1..b2c3ec416803 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/warnings.json @@ -2,61 +2,61 @@ { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 241, + "character": 278, "column": 20, - "line": 11 + "line": 12 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 221, + "pos": 258, "start": { - "character": 221, + "character": 258, "column": 0, - "line": 11 + "line": 12 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 277, + "character": 314, "column": 35, - "line": 12 + "line": 13 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 242, + "pos": 279, "start": { - "character": 242, + "character": 279, "column": 0, - "line": 12 + "line": 13 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 302, + "character": 339, "column": 24, - "line": 13 + "line": 14 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 278, + "pos": 315, "start": { - "character": 278, + "character": 315, "column": 0, - "line": 13 + "line": 14 } }, { "code": "a11y-no-noninteractive-tabindex", "end": { - "character": 329, + "character": 366, "column": 26, - "line": 14 + "line": 15 }, "message": "A11y: noninteractive element cannot have positive tabIndex value", - "pos": 303, + "pos": 340, "start": { - "character": 303, + "character": 340, "column": 0, - "line": 14 + "line": 15 } } ] From e8f5ae1e534acbdf6d4e9eec9312b446f6361f78 Mon Sep 17 00:00:00 2001 From: Yuichiro Yamashita Date: Sat, 3 Dec 2022 22:36:44 +0900 Subject: [PATCH 2/2] refactor --- src/compiler/compile/utils/a11y.ts | 27 ++++--------------- .../input.svelte | 2 -- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index 8fcb13a42dcd..d51125fa926e 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/src/compiler/compile/utils/a11y.ts @@ -7,17 +7,17 @@ import { import { AXObjects, AXObjectRoles, elementAXObjects } from 'axobject-query'; import Attribute from '../nodes/Attribute'; -const roles = [...roles_map.keys()]; +const non_abstract_roles = [...roles_map.keys()].filter((name) => !roles_map.get(name).abstract); const non_interactive_roles = new Set( - roles + non_abstract_roles .filter((name) => { const role = roles_map.get(name); return ( - !roles_map.get(name).abstract && // 'toolbar' does not descend from widget, but it does support // aria-activedescendant, thus in practice we treat it as a widget. - name !== 'toolbar' && + // focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable. + !['toolbar', 'tabpanel'].includes(name) && !role.superClass.some((classes) => classes.includes('widget')) ); }) @@ -29,24 +29,7 @@ const non_interactive_roles = new Set( ); const interactive_roles = new Set( - roles - .filter((name) => { - const role = roles_map.get(name); - return ( - !role.abstract && - // The `progressbar` is descended from `widget`, but in practice, its - // value is always `readonly`, so we treat it as a non-interactive role. - name !== 'progressbar' && - role.superClass.some((classes) => classes.includes('widget')) - ); - }) - .concat( - // 'toolbar' does not descend from widget, but it does support - // aria-activedescendant, thus in practice we treat it as a widget. - 'toolbar', - //focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable. - 'tabpanel' - ) + non_abstract_roles.filter((name) => !non_interactive_roles.has(name)) ); export function is_non_interactive_roles(role: ARIARoleDefintionKey) { diff --git a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte index c10a9f20bcb5..9efed4d8795e 100644 --- a/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte +++ b/test/validator/samples/a11y-no-nointeractive-tabindex/input.svelte @@ -13,5 +13,3 @@
- -