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

fix(devtool): do not trigger interaction check for div and span (#10719)

Browse source 
* fix(devtool): do not trigger interaction check for `div` and `span`

* add test

* add tests

* Rephrase changeset

* remove log

* add reference link

* Update .changeset/swift-coats-teach.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
This commit is contained in:
Emanuele Stoppa 2024-04-09 12:36:48 +01:00 • committed by GitHub
parent 4240386e8a
commit b21b3ba307
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.changeset/swift-coats-teach.md Normal file
View file

@ -0,0 +1,12 @@
---
"astro": patch
---
Fixes a false positive for `div` and `span` elements when running the Dev Toolbar accessibility audits.
Those are special elements that don't have an interaction assigned by default. Instead, it is assigned through the `role` attribute. This means that cases like the following are now deemed correct:
```html
<div role="tablist"></div>
<span role="button" onclick="" onkeydown=""></span>
```

2
packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-exceptions.astro
View file

@ -4,3 +4,5 @@
<input role="button" aria-label="Label"/> <input role="button" aria-label="Label"/>
<div role="grid"></div>
<span role="button" onclick="" onfocus=""></span>

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

@ -107,6 +107,10 @@ const aria_non_interactive_roles = [
'tooltip', 'tooltip',
]; ];
// These elements aren't interactive and aren't non-interactive. Their interaction changes based on the role assigned to them
// https://www.w3.org/TR/html-aria/#docconformance -> look at the table, specification for the `div` and `span` elements.
const roleless_elements = ['div', 'span'];
const a11y_required_content = [ const a11y_required_content = [
// anchor-has-content // anchor-has-content
'a', 'a',
@ -467,6 +471,7 @@ export const a11y: AuditRuleWithSelector[] = [
const role = element.getAttribute('role'); const role = element.getAttribute('role');
if (!role) return false; if (!role) return false;
if (!ariaRoles.has(role)) return false; if (!ariaRoles.has(role)) return false;
if (roleless_elements.includes(element.localName)) return false;
if (aria_non_interactive_roles.includes(role)) return true; if (aria_non_interactive_roles.includes(role)) return true;
}, },
@ -487,6 +492,7 @@ export const a11y: AuditRuleWithSelector[] = [
element.localName as keyof typeof a11y_non_interactive_element_to_interactive_role_exceptions element.localName as keyof typeof a11y_non_interactive_element_to_interactive_role_exceptions
]; ];
if (exceptions?.includes(role)) return false; if (exceptions?.includes(role)) return false;
if (roleless_elements.includes(element.localName)) return false;
if (!aria_non_interactive_roles.includes(role)) return true; if (!aria_non_interactive_roles.includes(role)) return true;
}, },