Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

fix(audit): remove false positive warnings on elements with tabpanel role (#11459)

Browse source 
* fix(audit): add `tabpanel` to `aria_non_interactive_roles`

* fix(audit): allow `tabIndex` on elements with `tabpanel` role

See: d32a27fb64/docs/rules/no-noninteractive-tabindex.md (rule-options)

* chore: add changeset
This commit is contained in:
Ming-jun Lu 2024-07-12 19:46:15 +08:00 committed by GitHub
parent 88e2b43305
commit bc2e74de38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/calm-beans-jam.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fixes false positive audit warnings on elements with the role "tabpanel".

3
packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts
View file

@ -101,6 +101,7 @@ const aria_non_interactive_roles = [
'rowheader', 'rowheader',
'search', 'search',
'status', 'status',
'tabpanel',
'term', 'term',
'timer', 'timer',
'toolbar', 'toolbar',
@ -503,7 +504,7 @@ export const a11y: AuditRuleWithSelector[] = [
description: description:
'The `tabindex` attribute should only be used on interactive elements, as it can be confusing for keyboard-only users to navigate through non-interactive elements. If your element is only conditionally interactive, consider using `tabindex="-1"` to make it focusable only when it is actually interactive.', 'The `tabindex` attribute should only be used on interactive elements, as it can be confusing for keyboard-only users to navigate through non-interactive elements. If your element is only conditionally interactive, consider using `tabindex="-1"` to make it focusable only when it is actually interactive.',
message: (element) => `${element.localName} elements should not have \`tabindex\` attribute`, message: (element) => `${element.localName} elements should not have \`tabindex\` attribute`,
selector: '[tabindex]', selector: '[tabindex]:not([role="tabpanel"])',
match(element) { match(element) {
// Scrollable elements are considered interactive // Scrollable elements are considered interactive
// See: https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/ // See: https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/proposed/