Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-24 23:21:57 -05:00
Code Issues Activity

fix(a11y): Fix some audit false positives (#9483)

Browse source 
* fix(a11y): Fix some audit false positives

* chore: changeset

* Update packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* fix: apply feedback

* nit: add comment

---------

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
This commit is contained in:
Erika 2023-12-20 10:25:41 -05:00 • committed by GitHub
parent f6714f677c
commit c384f6924e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/thirty-panthers-repeat.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix some false positive in the audit logic of the dev toolbar

30
packages/astro/src/runtime/client/dev-overlay/plugins/audit/a11y.ts
View file

@ -38,6 +38,8 @@ const a11y_required_attributes = {
const interactiveElements = ['button', 'details', 'embed', 'iframe', 'label', 'select', 'textarea'];
const labellableElements = ['input', 'meter', 'output', 'progress', 'select', 'textarea'];
const aria_non_interactive_roles = [
'alert',
'alertdialog',
@ -217,7 +219,7 @@ export const a11y: AuditRuleWithSelector[] = [
code: 'a11y-aria-activedescendant-has-tabindex',
title: 'Elements with attribute `aria-activedescendant` must be tabbable',
message:
'This element must either have an inherent `tabindex` or declare `tabindex` as an attribute.',
'Element with the `aria-activedescendant` attribute must either have an inherent `tabindex` or declare `tabindex` as an attribute.',
selector: '[aria-activedescendant]',
match(element) {
if (!(element as HTMLElement).tabIndex && !element.hasAttribute('tabindex')) return true;
@ -280,14 +282,20 @@ export const a11y: AuditRuleWithSelector[] = [
selector: 'a[href]:is([href=""], [href="#"], [href^="javascript:" i])',
},
{
code: 'a11y-label-has-associated-control',
title: '`label` tag should have an associated control and a text content.',
code: 'a11y-invalid-label',
title: '`label` element should have an associated control and a text content.',
message:
'The `label` tag must be associated with a control using either `for` or having a nested input. Additionally, the `label` tag must have text content.',
selector: 'label:not([for])',
match(element) {
const inputChild = element.querySelector('input');
if (!inputChild?.textContent) return true;
'The `label` element must be associated with a control either by using the `for` attribute or by containing a nested form element. Additionally, the `label` element must have text content.',
selector: 'label',
match(element: HTMLLabelElement) {
// Label must be associated with a control, either using `for` or having a nested valid element
const hasFor = element.hasAttribute('for');
const nestedLabellableElement = element.querySelector(`${labellableElements.join(', ')}`);
if (!hasFor && !nestedLabellableElement) return true;
// Label must have text content, using innerText to ignore hidden text
const innerText = element.innerText.trim();
if (innerText === '') return true;
},
},
{
@ -347,8 +355,10 @@ export const a11y: AuditRuleWithSelector[] = [
title: 'Missing content on element important for accessibility',
message: 'Headings and anchors must have content to be accessible.',
selector: a11y_required_content.join(','),
match(element) {
if (!element.textContent) return true;
match(element: HTMLElement) {
// innerText is used to ignore hidden text
const innerText = element.innerText.trim();
if (innerText === '') return true;
},
},
{