8000 fix: hide some a11y warnings for `<svelte:element>` tags (#8335) · sveltejs/svelte@60db05d · GitHub
[go: up one dir, main page]
Skip to content

Commit 60db05d

Browse files
dummdidummdummdidumm
authored
fix: hide some a11y warnings for <svelte:element> tags (#8335)
Some a11y warnings only work on specific tags, which results in potential false positives for `<svelte:element>` tags - silence those closes #7939
1 parent f1c9168 commit 60db05d

File tree

9 files changed

+29
-20
lines changed

9 files changed

+29
-20
lines changed

‎src/compiler/compile/compiler_warnings.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,10 +186,10 @@ export default {
186186
code: 'a11y-mouse-events-have-key-events',
187187
message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
188188
}),
189-
a11y_click_events_have_key_events: () => ({
189+
a11y_click_events_have_key_events: {
190190
code: 'a11y-click-events-have-key-events',
191191
message: 'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
192-
}),
192+
},
193193
a11y_missing_content: (name: string) => ({
194194
code: 'a11y-missing-content',
195195
message: `A11y: <${name}> element should have child content`

‎src/compiler/compile/nodes/Element.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ export default class Element extends Node {
550550
}
551551

552552
// aria-activedescendant-has-tabindex
553-
if (name === 'aria-activedescendant' && !is_interactive_element(this.name, attribute_map) && !attribute_map.has('tabindex')) {
553+
if (name === 'aria-activedescendant' && !this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !attribute_map.has('tabindex')) {
554554
component.warn(attribute, compiler_warnings.a11y_aria_activedescendant_has_tabindex);
555555
}
556556
}
@@ -590,7 +590,7 @@ export default class Element extends Node {
590590
}
591591

592592
// role-has-required-aria-props
593-
if (!is_semantic_role_element(current_role, this.name, attribute_map)) {
593+
if (!this.is_dynamic_element && !is_semantic_role_element(current_role, this.name, attribute_map)) {
594594
const role = roles.get(current_role);
595595
if (role) {
596596
const required_role_props = Object.keys(role.requiredProps);
@@ -622,7 +622,7 @@ export default class Element extends Node {
622622
}
623623

624624
// scope
625-
if (name === 'scope' && this.name !== 'th') {
625+
if (name === 'scope' && !this.is_dynamic_element && this.name !== 'th') {
626626
component.warn(attribute, compiler_warnings.a11y_misplaced_scope);
627627
}
628628

@@ -642,6 +642,7 @@ export default class Element extends Node {
642642
const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefintionKey);
643643

644644
if (
645+
!this.is_dynamic_element &&
645646
!is_hidden_from_screen_reader(this.name, attribute_map) &&
646647
(!role || is_non_presentation_role) &&
647648
!is_interactive_element(this.name, attribute_map) & 67E6 &
@@ -655,14 +656,14 @@ export default class Element extends Node {
655656
if (!has_key_event) {
656657
component.warn(
657658
this,
658-
compiler_warnings.a11y_click_events_have_key_events()
659+
compiler_warnings.a11y_click_events_have_key_events
659660
);
660661
}
661662
}
662663
}
663664

664665
// no-noninteractive-tabindex
665-
if (!is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
666+
if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
666667
const tab_index = attribute_map.get('tabindex');
667668
if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
668669
component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);< A3E2 /span>

‎test/validator/samples/a11y-aria-activedescendant/input.svelte

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
<input aria-activedescendant="some-id" tabindex="0" />
88
<input aria-activedescendant="some-id" tabindex={-1} />
99
<input aria-activedescendant="some-id" tabindex="-1" />
10-
10+
<svelte:element this={Math.random() ? 'input' : 'button'} aria-activedescendant="some-id" />
1111
<div />
1212
<div aria-activedescendant="some-id" role="tablist" tabindex={-1} />
1313
<div aria-activedescendant="some-id" role="tablist" tabindex="-1" />
1414

1515
<!-- INVALID -->
1616
<div aria-activedescendant="some-id" />
17-

‎test/validator/samples/a11y-click-events-have-key-events/input.svelte

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,5 @@
4747
<div on:click={noop} role="presentation" />
4848
<div on:click={noop} role="none" />
4949
<div on:click={noop} role={dynamicRole} />
50+
51+
<svelte:element F438 this={Math.random() ? 'button' : 'div'} on:click={noop} />

‎test/validator/samples/a11y-no-noninteractive-tabindex/input.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<div role='article' tabindex='-1' />
99
<article tabindex='-1' />
1010
<div role="tabpanel" tabindex='0' />
11+
<svelte:element this={Math.random() ? 'button' : 'div'} tabindex="0" />
1112
<!-- invalid -->
1213
<div tabindex='0' />
1314
<div role='article' tabindex='0' />

‎test/validator/samples/a11y-no-noninteractive-tabindex/warnings.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,48 @@
33
"code": "a11y-no-noninteractive-tabindex",
44
"end": {
55
"column": 20,
6-
"line": 12
6+
"line": 13
77
},
88
"message": "A11y: noninteractive element cannot have nonnegative tabIndex value",
99
"start": {
1010
"column": 0,
11-
"line": 12
11+
"line": 13
1212
}
1313
},
1414
{
1515
"code": "a11y-no-noninteractive-tabindex",
1616
"end": {
1717
"column": 35,
18-
"line": 13
18+
"line": 14
1919
},
2020
"message": "A11y: noninteractive element cannot have nonnegative tabIndex value",
2121
"start": {
2222
"column": 0,
23-
"line": 13
23+
"line": 14
2424
}
2525
},
2626
{
2727
"code": "a11y-no-noninteractive-tabindex",
2828
"end": {
2929
"column": 24,
30-
"line": 14
30+
"line": 15
3131
},
3232
"message": "A11y: noninteractive element cannot have nonnegative tabIndex value",
3333
"start": {
3434
"column": 0,
35-
"line": 14
35+
"line": 15
3636
}
3737
},
3838
{
3939
"code": "a11y-no-noninteractive-tabindex",
4040
"end": {
4141
"column": 26,
42-
"line": 15
42+
"line": 16
4343
},
4444
"message": "A11y: noninteractive element cannot have nonnegative tabIndex value",
4545
"start": {
4646
"column": 0,
47-
"line": 15
47+
"line": 16
4848
}
4949
}
5050
]

‎test/validator/samples/a11y-role-has-required-aria-props/input.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
<div role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
99
<div role="scrollbar" aria-controls="panel" aria-valuenow="50"></div>
1010
<input role="switch" type="checkbox" />
11+
<svelte:element this={Math.random() ? 'input' : 'div'} role="checkbox" />

‎test/validator/samples/a11y-scope/input.svelte

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
<div scope/>
1+
<!-- valid -->
2+
<th scope / AEE4 >
3+
<svelte:element this={Math.random() ? 'th' : 'td'} scope />
4+
5+
<!-- invalid -->
6+
<div scope/>

‎test/validator/samples/a11y-scope/warnings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
"code": "a11y-misplaced-scope",
44
"message": "A11y: The scope attribute should only be used with <th> elements",
55
"start": {
6-
"line": 1,
6+
"line": 6,
77
"column": 5
88
},
99
"end": {
10-
"line": 1,
10+
"line": 6,
1111
"column": 10
1212
}
1313
}

0 commit comments

Comments
 (0)
0