fix: warn on click handlers for table row and cell elements

pull/17990/head
razinshafayet 2 months ago committed by Razin Shafayet
parent 669f6b45a3
commit 1fa151fdde

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: warn on click handlers for table row and cell elements

@ -292,11 +292,12 @@ export function check_element(node, context) {
if (handlers.has('click')) {
const is_non_presentation_role =
role_static_value !== null && !is_presentation_role(role_static_value);
const is_table_cell_or_row = node.name === 'tr' || node.name === 'td' || node.name === 'th';
if (
!is_dynamic_element &&
!is_hidden_from_screen_reader(node.name, attribute_map) &&
(!role || is_non_presentation_role) &&
!is_interactive &&
(!is_interactive || is_table_cell_or_row) &&
!has_spread
) {
const has_key_event =

@ -26,6 +26,9 @@
<footer on:click={noop}></footer>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<footer on:click={noop}></footer>
<tr on:click={noop}></tr>
<td on:click={noop}></td>
<th on:click={noop}></th>
<!-- should not warn -->
<div class="foo"></div>

@ -94,5 +94,41 @@
"line": 28,
"column": 33
}
},
{
"code": "a11y_click_events_have_key_events",
"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
"start": {
"line": 29,
"column": 0
},
"end": {
"line": 29,
"column": 25
}
},
{
"code": "a11y_click_events_have_key_events",
"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
"start": {
"line": 30,
"column": 0
},
"end": {
"line": 30,
"column": 25
}
},
{
"code": "a11y_click_events_have_key_events",
"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
"start": {
"line": 31,
"column": 0
},
"end": {
"line": 31,
"column": 25
}
}
]

Loading…
Cancel
Save