From 4fb26f6d6e09ee8c973efed43e1abe79a91ac16c Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Fri, 13 Dec 2024 07:10:45 -0600
Subject: [PATCH] refactor: Make roles signalish

---
 src/jsx.d.ts                    | 120 +++++++++++++++++++++-----------
 test/ts/dom-attributes-test.tsx |   7 ++
 2 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index 4744f77499..c83ce634e4 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -1568,7 +1568,7 @@ export namespace JSXInternal {
 
 	interface ArticleHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?:
+		role?: Signalish<
 			| 'article'
 			| 'application'
 			| 'document'
@@ -1576,12 +1576,14 @@ export namespace JSXInternal {
 			| 'main'
 			| 'none'
 			| 'presentation'
-			| 'region';
+			| 'region'
+			| undefined
+		>;
 	}
 
 	interface AsideHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?:
+		role?: Signalish<
 			| 'complementary'
 			| 'feed'
 			| 'none'
@@ -1594,12 +1596,14 @@ export namespace JSXInternal {
 			| 'doc-footnote'
 			| 'doc-glossary'
 			| 'doc-pullquote'
-			| 'doc-tip';
+			| 'doc-tip'
+			| undefined
+		>;
 	}
 
 	interface AudioHTMLAttributes<T extends EventTarget = HTMLAudioElement>
 		extends MediaHTMLAttributes<T> {
-		role?: 'application';
+		role?: Signalish<'application' | undefined>;
 	}
 
 	interface BaseHTMLAttributes<T extends EventTarget = HTMLBaseElement>
@@ -1621,7 +1625,7 @@ export namespace JSXInternal {
 
 	interface BrHTMLAttributes<T extends EventTarget = HTMLBRElement>
 		extends HTMLAttributes<T> {
-		role?: 'none' | 'presentation';
+		role?: Signalish<'none' | 'presentation' | undefined>;
 	}
 
 	interface ButtonHTMLAttributes<T extends EventTarget = HTMLButtonElement>
@@ -1643,7 +1647,7 @@ export namespace JSXInternal {
 		popoverTarget?: Signalish<string | undefined>;
 		popovertargetaction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
 		popoverTargetAction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
-		role?:
+		role?: Signalish<
 			| 'button'
 			| 'checkbox'
 			| 'combobox'
@@ -1658,7 +1662,9 @@ export namespace JSXInternal {
 			| 'slider'
 			| 'switch'
 			| 'tab'
-			| 'treeitem';
+			| 'treeitem'
+			| undefined
+		>;
 		type?: Signalish<'submit' | 'reset' | 'button' | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
@@ -1694,7 +1700,7 @@ export namespace JSXInternal {
 
 	interface DataListHTMLAttributes<T extends EventTarget = HTMLDataListElement>
 		extends HTMLAttributes<T> {
-		role?: 'listbox';
+		role?: Signalish<'listbox' | undefined>;
 	}
 
 	interface DdHTMLAttributes<T extends EventTarget = HTMLElement>
@@ -1713,7 +1719,7 @@ export namespace JSXInternal {
 		extends HTMLAttributes<T> {
 		open?: Signalish<boolean | undefined>;
 		onToggle?: GenericEventHandler<T> | undefined;
-		role?: 'group';
+		role?: Signalish<'group' | undefined>;
 	}
 
 	interface DialogHTMLAttributes<T extends EventTarget = HTMLDialogElement>
@@ -1721,23 +1727,25 @@ export namespace JSXInternal {
 		onCancel?: GenericEventHandler<T> | undefined;
 		onClose?: GenericEventHandler<T> | undefined;
 		open?: Signalish<boolean | undefined>;
-		role?: 'dialog' | 'alertdialog';
+		role?: Signalish<'dialog' | 'alertdialog' | undefined>;
 	}
 
 	interface DlHTMLAttributes<T extends EventTarget = HTMLDListElement>
 		extends HTMLAttributes<T> {
-		role?: 'group' | 'list' | 'none' | 'presentation';
+		role?: Signalish<'group' | 'list' | 'none' | 'presentation' | undefined>;
 	}
 
 	interface DtHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'listitem';
+		role?: Signalish<'listitem' | undefined>;
 	}
 
 	interface EmbedHTMLAttributes<T extends EventTarget = HTMLEmbedElement>
 		extends HTMLAttributes<T> {
 		height?: Signalish<number | string | undefined>;
-		role?: 'application' | 'document' | 'img' | 'none' | 'presentation';
+		role?: Signalish<
+			'application' | 'document' | 'img' | 'none' | 'presentation' | undefined
+		>;
 		src?: Signalish<string | undefined>;
 		type?: Signalish<string | undefined>;
 		width?: Signalish<number | string | undefined>;
@@ -1748,23 +1756,27 @@ export namespace JSXInternal {
 		disabled?: Signalish<boolean | undefined>;
 		form?: Signalish<string | undefined>;
 		name?: Signalish<string | undefined>;
-		role?: 'group' | 'none' | 'presentation' | 'radiogroup';
+		role?: Signalish<
+			'group' | 'none' | 'presentation' | 'radiogroup' | undefined
+		>;
 	}
 
 	interface FigcaptionHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'group' | 'none' | 'presentation';
+		role?: Signalish<'group' | 'none' | 'presentation' | undefined>;
 	}
 
 	interface FooterHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?:
+		role?: Signalish<
 			| 'contentinfo'
 			| 'generic'
 			| 'group'
 			| 'none'
 			| 'presentation'
-			| 'doc-footnote';
+			| 'doc-footnote'
+			| undefined
+		>;
 	}
 
 	interface FormHTMLAttributes<T extends EventTarget = HTMLFormElement>
@@ -1781,13 +1793,15 @@ export namespace JSXInternal {
 		novalidate?: Signalish<boolean | undefined>;
 		noValidate?: Signalish<boolean | undefined>;
 		rel?: Signalish<string | undefined>;
-		role?: 'form' | 'none' | 'presentation' | 'search';
+		role?: Signalish<'form' | 'none' | 'presentation' | 'search' | undefined>;
 		target?: Signalish<string | undefined>;
 	}
 
 	interface HeadingHTMLAttributes<T extends EventTarget = HTMLHeadingElement>
 		extends HTMLAttributes<T> {
-		role?: 'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle';
+		role?: Signalish<
+			'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle' | undefined
+		>;
 	}
 
 	interface HeadHTMLAttributes<T extends EventTarget = HTMLHeadElement>
@@ -1797,17 +1811,21 @@ export namespace JSXInternal {
 
 	interface HeaderHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'banner' | 'generic' | 'group' | 'none' | 'presentation';
+		role?: Signalish<
+			'banner' | 'generic' | 'group' | 'none' | 'presentation' | undefined
+		>;
 	}
 
 	interface HrHTMLAttributes<T extends EventTarget = HTMLHRElement>
 		extends HTMLAttributes<T> {
-		role?: 'separator' | 'none' | 'presentation' | 'doc-pagebreak';
+		role?: Signalish<
+			'separator' | 'none' | 'presentation' | 'doc-pagebreak' | undefined
+		>;
 	}
 
 	interface HtmlHTMLAttributes<T extends EventTarget = HTMLHtmlElement>
 		extends HTMLAttributes<T> {
-		role?: 'document';
+		role?: Signalish<'document' | undefined>;
 	}
 
 	interface IframeHTMLAttributes<T extends EventTarget = HTMLIFrameElement>
@@ -1828,7 +1846,9 @@ export namespace JSXInternal {
 		name?: Signalish<string | undefined>;
 		referrerpolicy?: Signalish<HTMLAttributeReferrerPolicy | undefined>;
 		referrerPolicy?: Signalish<HTMLAttributeReferrerPolicy | undefined>;
-		role?: 'application' | 'document' | 'img' | 'none' | 'presentation';
+		role?: Signalish<
+			'application' | 'document' | 'img' | 'none' | 'presentation' | undefined
+		>;
 		sandbox?: Signalish<string | undefined>;
 		/** @deprecated */
 		scrolling?: Signalish<string | undefined>;
@@ -2001,7 +2021,7 @@ export namespace JSXInternal {
 
 	interface MainHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'main';
+		role?: Signalish<'main' | undefined>;
 	}
 
 	interface MapHTMLAttributes<T extends EventTarget = HTMLMapElement>
@@ -2080,19 +2100,21 @@ export namespace JSXInternal {
 		max?: Signalish<number | string | undefined>;
 		min?: Signalish<number | string | undefined>;
 		optimum?: Signalish<number | undefined>;
-		role?: 'meter';
+		role?: Signalish<'meter' | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
 
 	interface NavHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?:
+		role?: Signalish<
 			| 'navigation'
 			| 'menu'
 			| 'menubar'
 			| 'none'
 			| 'presentation'
-			| 'tablist';
+			| 'tablist'
+			| undefined
+		>;
 	}
 
 	interface NoScriptHTMLAttributes<T extends EventTarget = HTMLElement>
@@ -2107,7 +2129,7 @@ export namespace JSXInternal {
 		form?: Signalish<string | undefined>;
 		height?: Signalish<number | string | undefined>;
 		name?: Signalish<string | undefined>;
-		role?: 'application' | 'document' | 'img';
+		role?: Signalish<'application' | 'document' | 'img' | undefined>;
 		type?: Signalish<string | undefined>;
 		usemap?: Signalish<string | undefined>;
 		useMap?: Signalish<string | undefined>;
@@ -2118,7 +2140,7 @@ export namespace JSXInternal {
 	interface OlHTMLAttributes<T extends EventTarget = HTMLOListElement>
 		extends HTMLAttributes<T> {
 		reversed?: Signalish<boolean | undefined>;
-		role?:
+		role?: Signalish<
 			| 'list'
 			| 'group'
 			| 'listbox'
@@ -2129,7 +2151,9 @@ export namespace JSXInternal {
 			| 'radiogroup'
 			| 'tablist'
 			| 'toolbar'
-			| 'tree';
+			| 'tree'
+			| undefined
+		>;
 		start?: Signalish<number | undefined>;
 		type?: Signalish<'1' | 'a' | 'A' | 'i' | 'I' | undefined>;
 	}
@@ -2138,14 +2162,14 @@ export namespace JSXInternal {
 		extends HTMLAttributes<T> {
 		disabled?: Signalish<boolean | undefined>;
 		label?: Signalish<string | undefined>;
-		role?: 'group';
+		role?: Signalish<'group' | undefined>;
 	}
 
 	interface OptionHTMLAttributes<T extends EventTarget = HTMLOptionElement>
 		extends HTMLAttributes<T> {
 		disabled?: Signalish<boolean | undefined>;
 		label?: Signalish<string | undefined>;
-		role?: 'option';
+		role?: Signalish<'option' | undefined>;
 		selected?: Signalish<boolean | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
@@ -2173,7 +2197,7 @@ export namespace JSXInternal {
 	interface ProgressHTMLAttributes<T extends EventTarget = HTMLProgressElement>
 		extends HTMLAttributes<T> {
 		max?: Signalish<number | string | undefined>;
-		role?: 'progressbar';
+		role?: Signalish<'progressbar' | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
 
@@ -2204,7 +2228,15 @@ export namespace JSXInternal {
 
 	interface SearchHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'search' | 'form' | 'group' | 'none' | 'presentation' | 'region';
+		role?: Signalish<
+			| 'search'
+			| 'form'
+			| 'group'
+			| 'none'
+			| 'presentation'
+			| 'region'
+			| undefined
+		>;
 	}
 
 	interface SelectHTMLAttributes<T extends EventTarget = HTMLSelectElement>
@@ -2218,7 +2250,7 @@ export namespace JSXInternal {
 		name?: Signalish<string | undefined>;
 		required?: Signalish<boolean | undefined>;
 		// TODO: Select w/ multiple
-		role?:
+		role?: Signalish<
 			| 'region'
 			| 'generic'
 			| 'alert'
@@ -2268,7 +2300,9 @@ export namespace JSXInternal {
 			| 'doc-prologue'
 			| 'doc-pullquote'
 			| 'doc-qna'
-			| 'doc-toc';
+			| 'doc-toc'
+			| undefined
+		>;
 		size?: Signalish<number | undefined>;
 		value?: Signalish<string | number | undefined>;
 		onChange?: GenericEventHandler<T> | undefined;
@@ -2348,7 +2382,7 @@ export namespace JSXInternal {
 		placeholder?: Signalish<string | undefined>;
 		readOnly?: Signalish<boolean | undefined>;
 		required?: Signalish<boolean | undefined>;
-		role?: 'textbox';
+		role?: Signalish<'textbox' | undefined>;
 		rows?: Signalish<number | undefined>;
 		value?: Signalish<string | number | undefined>;
 		wrap?: Signalish<string | undefined>;
@@ -2392,7 +2426,7 @@ export namespace JSXInternal {
 
 	interface UlHTMLAttributes<T extends EventTarget = HTMLUListElement>
 		extends HTMLAttributes<T> {
-		role?:
+		role?: Signalish<
 			| 'list'
 			| 'group'
 			| 'listbox'
@@ -2403,7 +2437,9 @@ export namespace JSXInternal {
 			| 'radiogroup'
 			| 'tablist'
 			| 'toolbar'
-			| 'tree';
+			| 'tree'
+			| undefined
+		>;
 	}
 
 	interface VideoHTMLAttributes<T extends EventTarget = HTMLVideoElement>
@@ -2413,12 +2449,12 @@ export namespace JSXInternal {
 		width?: Signalish<number | string | undefined>;
 		disablePictureInPicture?: Signalish<boolean | undefined>;
 		disableRemotePlayback?: Signalish<boolean | undefined>;
-		role?: 'application';
+		role?: Signalish<'application' | undefined>;
 	}
 
 	interface WbrHTMLAttributes<T extends EventTarget = HTMLElement>
 		extends HTMLAttributes<T> {
-		role?: 'none' | 'presentation';
+		role?: Signalish<'none' | 'presentation' | undefined>;
 	}
 
 	export type DetailedHTMLProps<
diff --git a/test/ts/dom-attributes-test.tsx b/test/ts/dom-attributes-test.tsx
index bde40726be..29b0aaec98 100644
--- a/test/ts/dom-attributes-test.tsx
+++ b/test/ts/dom-attributes-test.tsx
@@ -15,6 +15,13 @@ function createSignal<T>(value: T): JSX.SignalLike<T> {
 // @ts-expect-error A button should not have a role of presentation
 const badAriaRole = <button role="presentation" />;
 const validAriaRole = <button role="slider" />;
+const signalBadAriaRole = (
+	// @ts-expect-error A button should not have a role of presentation
+	<button role={createSignal('presentation' as const)} />
+)
+const signalValidAriaRole = (
+	<button role={createSignal('slider' as const)} />
+)
 
 // @ts-expect-error We should correctly type aria attributes like autocomplete
 const badAriaValues = <div aria-autocomplete="bad-value" />;