Update for WAI-ARIA 1.2 (#12986)

Co-authored-by: Emanuele Stoppa <[email protected]>

.changeset/clean-oranges-tease.md

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

packages/astro/astro-jsx.d.ts

@@ -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,34 +449,47 @@ 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'
 		| 'tablist'
 		| 'tabpanel'
 		| 'term'
 		| 'textbox'
+		| 'time'
 		| 'timer'
 		| 'toolbar'
 		| 'tooltip'
 		| 'tree'
 		| 'treegrid'
-		| 'treeitem';
+		| 'treeitem'
+		| 'widget'
+		| 'window';
 
 	type CssProperty = keyof Omit<
 		CSSStyleDeclaration,

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

@@ -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(
 		' ',
 	),
 );