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

Update for WAI-ARIA 1.2 (#12986)

Browse source 
Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
This commit is contained in:
Wren Etheredge 2025-01-21 08:04:15 -05:00 • committed by GitHub
parent bf119db240
commit 8911bdacab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/clean-oranges-tease.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Updates types and dev toolbar for ARIA 1.2 attributes and roles

41
packages/astro/astro-jsx.d.ts vendored
View file

@ -174,15 +174,15 @@ declare namespace astroHTML.JSX {
onfullscreenerror?: string | undefined | null;
}
// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
// All the WAI-ARIA 1.2 attributes from https://www.w3.org/TR/wai-aria-1.2/#state_prop_def
interface AriaAttributes {
/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
/** Identifies the currently active element when DOM focus is on a composite widget, combobox, textbox, group, or application. */
'aria-activedescendant'?: string | undefined | null;
/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
'aria-atomic'?: boolean | 'false' | 'true' | undefined | null;
/**
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
* presented if they are made.
* Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies
* how predictions would be presented if they were made.
*/
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined | null;
/** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
@ -245,11 +245,11 @@ declare namespace astroHTML.JSX {
*/
'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined | null;
/**
* Identifies the element that provides an error message for the object.
* Identifies the element that provides an error message for an object.
* @see aria-invalid @see aria-describedby.
*/
'aria-errormessage'?: string | undefined | null;
/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
/** Indicates whether a grouping element owned or controlled by this element is expanded or collapsed. */
'aria-expanded'?: boolean | 'false' | 'true' | undefined | null;
/**
* Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
@ -394,32 +394,43 @@ declare namespace astroHTML.JSX {
'aria-valuetext'?: string | undefined | null;
}
// All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
// All the WAI-ARIA 1.2 role attribute values from https://www.w3.org/TR/wai-aria-1.2/#role_definitions
type AriaRole =
| 'alert'
| 'alertdialog'
| 'application'
| 'article'
| 'banner'
| 'blockquote'
| 'button'
| 'caption'
| 'cell'
| 'checkbox'
| 'code'
| 'columnheader'
| 'combobox'
| 'command'
| 'complementary'
| 'composite'
| 'contentinfo'
| 'definition'
| 'deletion'
| 'dialog'
| 'directory'
| 'document'
| 'emphasis'
| 'feed'
| 'figure'
| 'form'
| 'generic'
| 'grid'
| 'gridcell'
| 'group'
| 'heading'
| 'img'
| 'input'
| 'insertion'
| 'landmark'
| 'link'
| 'list'
| 'listbox'
@ -428,6 +439,7 @@ declare namespace astroHTML.JSX {
| 'main'
| 'marquee'
| 'math'
| 'meter'
| 'menu'
| 'menubar'
| 'menuitem'
@ -437,21 +449,31 @@ declare namespace astroHTML.JSX {
| 'none'
| 'note'
| 'option'
| 'paragraph'
| 'presentation'
| 'progressbar'
| 'radio'
| 'radiogroup'
| 'range'
| 'region'
| 'roletype'
| 'row'
| 'rowgroup'
| 'rowheader'
| 'scrollbar'
| 'search'
| 'searchbox'
| 'section'
| 'sectionhead'
| 'select'
| 'separator'
| 'slider'
| 'spinbutton'
| 'status'
| 'strong'
| 'structure'
| 'subscript'
| 'superscript'
| 'switch'
| 'tab'
| 'table'
@ -459,12 +481,15 @@ declare namespace astroHTML.JSX {
| 'tabpanel'
| 'term'
| 'textbox'
| 'time'
| 'timer'
| 'toolbar'
| 'tooltip'
| 'tree'
| 'treegrid'
| 'treeitem';
| 'treeitem'
| 'widget'
| 'window';
type CssProperty = keyof Omit<
CSSStyleDeclaration,

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

@ -192,14 +192,16 @@ const input_type_to_implicit_role = new Map([
['url', 'textbox'],
]);
// All the WAI-ARIA 1.2 attributes from https://www.w3.org/TR/wai-aria-1.2/#state_prop_def
const ariaAttributes = new Set(
'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(
' ',
),
);
// All the WAI-ARIA 1.2 role attribute values from https://www.w3.org/TR/wai-aria-1.2/#role_definitions
const ariaRoles = new Set(
'alert alertdialog application article banner button cell checkbox columnheader combobox complementary contentinfo definition dialog directory document feed figure form grid gridcell group heading img link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status switch tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem'.split(
'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox command complementary composite contentinfo definition deletion dialog directory document emphasis feed figure form generic grid gridcell group heading img input insertion landmark link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup range region roletype row rowgroup rowheader scrollbar search searchbox section sectionhead select separator slider spinbutton status strong structure subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem widget window'.split(
' ',
),
);