refactor: Make roles signalish

Author: rschristian

src/jsx.d.ts

@@ -1568,17 +1568,17 @@ export namespace JSXInternal {
 
 	interface ArticleHTMLAttributes<T extends EventTarget>
 		extends HTMLAttributes<T> {
-		role?: 'article' | 'application' | 'document' | 'feed' | 'main' | 'none' | 'presentation' | 'region';
+		role?: Signalish<'article' | 'application' | 'document' | 'feed' | 'main' | 'none' | 'presentation' | 'region' | undefined>;
 	}
 
 	interface AsideHTMLAttributes<T extends EventTarget>
 		extends HTMLAttributes<T> {
-		role?: 'complementary' | 'feed' | 'none' | 'note' | 'presentation' | 'region' | 'search' | 'doc-dedication' | 'doc-example' | 'doc-footnote' | 'doc-glossary' | 'doc-pullquote' | 'doc-tip';
+		role?: Signalish<'complementary' | 'feed' | 'none' | 'note' | 'presentation' | 'region' | 'search' | 'doc-dedication' | 'doc-example' | 'doc-footnote' | 'doc-glossary' | 'doc-pullquote' | 'doc-tip' | undefined>;
 	}
 
 	interface AudioHTMLAttributes<T extends EventTarget>
 		extends MediaHTMLAttributes<T> {
-		role?: 'application';
+		role?: Signalish<'application' | undefined>;
 	}
 
 	interface BaseHTMLAttributes<T extends EventTarget>
@@ -1598,7 +1598,7 @@ export namespace JSXInternal {
 	}
 
 	interface BrHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'none' | 'presentation';
+		role?: Signalish<'none' | 'presentation' | undefined>;
 	}
 
 	interface ButtonHTMLAttributes<T extends EventTarget>
@@ -1620,7 +1620,7 @@ export namespace JSXInternal {
 		popoverTarget?: Signalish<string | undefined>;
 		popovertargetaction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
 		popoverTargetAction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
-		role?: 'button' | 'checkbox' | 'combobox' | 'gridcell' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'separator' | 'slider' | 'switch' | 'tab' | 'treeitem';
+		role?: Signalish<'button' | 'checkbox' | 'combobox' | 'gridcell' | 'link' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'separator' | 'slider' | 'switch' | 'tab' | 'treeitem' | undefined>;
 		type?: Signalish<'submit' | 'reset' | 'button' | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
@@ -1653,7 +1653,7 @@ export namespace JSXInternal {
 	}
 
 	interface DataListHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'listbox';
+		role?: Signalish<'listbox' | undefined>;
 	}
 
 	interface DdHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
@@ -1670,29 +1670,29 @@ 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>
 		extends HTMLAttributes<T> {
 		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> extends HTMLAttributes<T> {
-		role?: 'group' | 'list' | 'none' | 'presentation';
+		role?: Signalish<'group' | 'list' | 'none' | 'presentation' | undefined>;
 	}
 
 	interface DtHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'listitem';
+		role?: Signalish<'listitem' | undefined>;
 	}
 
 	interface EmbedHTMLAttributes<T extends EventTarget>
 		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>;
@@ -1703,15 +1703,15 @@ 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> extends HTMLAttributes<T> {
-		role?: 'group' | 'none' | 'presentation';
+		role?: Signalish<'group' | 'none' | 'presentation' | undefined>;
 	}
 
 	interface FooterHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'contentinfo' | 'generic' | 'group' | 'none' | 'presentation' | 'doc-footnote';
+		role?: Signalish<'contentinfo' | 'generic' | 'group' | 'none' | 'presentation' | 'doc-footnote' | undefined>;
 	}
 
 	interface FormHTMLAttributes<T extends EventTarget>
@@ -1728,28 +1728,28 @@ 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> extends HTMLAttributes<T> {
-		role?: 'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle';
+		role?: Signalish<'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle' | undefined>;
 	}
 
 	interface HeadHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
 		role: never;
 	}
 
 	interface HeaderHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'banner' | 'generic' | 'group' | 'none' | 'presentation';
+		role?: Signalish<'banner' | 'generic' | 'group' | 'none' | 'presentation' | undefined>;
 	}
 
 	interface HrHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'separator' | 'none' | 'presentation' | 'doc-pagebreak';
+		role?: Signalish<'separator' | 'none' | 'presentation' | 'doc-pagebreak' | undefined>;
 	}
 
 	interface HtmlHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'document';
+		role?: Signalish<'document' | undefined>;
 	}
 
 	interface IframeHTMLAttributes<T extends EventTarget>
@@ -1770,7 +1770,7 @@ 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>;
@@ -1938,7 +1938,7 @@ export namespace JSXInternal {
 	}
 
 	interface MainHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'main';
+		role?: Signalish<'main' | undefined>;
 	}
 
 	interface MapHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
@@ -2005,12 +2005,12 @@ 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> extends HTMLAttributes<T> {
-		role?: 'navigation' | 'menu' | 'menubar' | 'none' | 'presentation' | 'tablist';
+		role?: Signalish<'navigation' | 'menu' | 'menubar' | 'none' | 'presentation' | 'tablist' | undefined>;
 	}
 
 	interface NoScriptHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
@@ -2024,7 +2024,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>;
@@ -2034,7 +2034,7 @@ export namespace JSXInternal {
 
 	interface OlHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
 		reversed?: Signalish<boolean | undefined>;
-		role?: 'list' | 'group' | 'listbox' | 'menu' | 'menubar' | 'none' | 'presentation' | 'radiogroup' | 'tablist' | 'toolbar' | 'tree';
+		role?: Signalish<'list' | 'group' | 'listbox' | 'menu' | 'menubar' | 'none' | 'presentation' | 'radiogroup' | 'tablist' | 'toolbar' | 'tree' | undefined>;
 		start?: Signalish<number | undefined>;
 		type?: Signalish<'1' | 'a' | 'A' | 'i' | 'I' | undefined>;
 	}
@@ -2043,14 +2043,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>
 		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>;
 	}
@@ -2077,7 +2077,7 @@ export namespace JSXInternal {
 	interface ProgressHTMLAttributes<T extends EventTarget>
 		extends HTMLAttributes<T> {
 		max?: Signalish<number | string | undefined>;
-		role?: 'progressbar';
+		role?: Signalish<'progressbar' | undefined>;
 		value?: Signalish<string | number | undefined>;
 	}
 
@@ -2107,7 +2107,7 @@ export namespace JSXInternal {
 	}
 
 	interface SearchHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'search' | 'form' | 'group' | 'none' | 'presentation' | 'region';
+		role?: Signalish<'search' | 'form' | 'group' | 'none' | 'presentation' | 'region' | undefined>;
 	}
 
 	interface SelectHTMLAttributes<T extends EventTarget>
@@ -2121,7 +2121,7 @@ export namespace JSXInternal {
 		name?: Signalish<string | undefined>;
 		required?: Signalish<boolean | undefined>;
 		// TODO: Select w/ multiple
-		role?: 'region' | 'generic' | 'alert' | 'alertdialog' | 'application' | 'banner' | 'complementary' | 'contentinfo' | 'dialog' | 'document' | 'feed' | 'group' | 'log' | 'main' | 'marquee' | 'navigation' | 'none' | 'note' | 'presentation' | 'search' | 'status' | 'tabpanel' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-bibliography' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-foreword' | 'doc-glossary' | 'doc-index' | 'doc-introduction' | 'doc-notice' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-toc';
+		role?: Signalish<'region' | 'generic' | 'alert' | 'alertdialog' | 'application' | 'banner' | 'complementary' | 'contentinfo' | 'dialog' | 'document' | 'feed' | 'group' | 'log' | 'main' | 'marquee' | 'navigation' | 'none' | 'note' | 'presentation' | 'search' | 'status' | 'tabpanel' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-bibliography' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-foreword' | 'doc-glossary' | 'doc-index' | 'doc-introduction' | 'doc-notice' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-toc' | undefined>;
 		size?: Signalish<number | undefined>;
 		value?: Signalish<string | number | undefined>;
 		onChange?: GenericEventHandler<T> | undefined;
@@ -2199,7 +2199,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>;
@@ -2240,7 +2240,7 @@ export namespace JSXInternal {
 	}
 
 	interface UlHTMLAttributes<T extends EventTarget> extends HTMLAttributes<T> {
-		role?: 'list' | 'group' | 'listbox' | 'menu' | 'menubar' | 'none' | 'presentation' | 'radiogroup' | 'tablist' | 'toolbar' | 'tree';
+		role?: Signalish<'list' | 'group' | 'listbox' | 'menu' | 'menubar' | 'none' | 'presentation' | 'radiogroup' | 'tablist' | 'toolbar' | 'tree' | undefined>;
 	}
 
 	interface VideoHTMLAttributes<T extends EventTarget>
@@ -2250,11 +2250,11 @@ 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> extends HTMLAttributes<T> {
-		role?: 'none' | 'presentation';
+		role?: Signalish<'none' | 'presentation' | undefined>;
 	}
 
 	export type DetailedHTMLProps<

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" />;