Skip to content

Commit

Permalink
refactor: Make roles signalish
Browse files Browse the repository at this point in the history
  • Loading branch information
@rschristian
rschristian committed Dec 13, 2024
1 parent d707458 commit 4fb26f6
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 42 deletions.
120 changes: 78 additions & 42 deletions src/jsx.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1568,20 +1568,22 @@ export namespace JSXInternal {

interface ArticleHTMLAttributes<T extends EventTarget = HTMLElement>
extends HTMLAttributes<T> {
role?:
role?: Signalish<
| 'article'
| 'application'
| 'document'
| 'feed'
| 'main'
| 'none'
| 'presentation'
| 'region';
| 'region'
| undefined
>;
}

interface AsideHTMLAttributes<T extends EventTarget = HTMLElement>
extends HTMLAttributes<T> {
role?:
role?: Signalish<
| 'complementary'
| 'feed'
| 'none'
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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'
Expand All @@ -1658,7 +1662,9 @@ export namespace JSXInternal {
| 'slider'
| 'switch'
| 'tab'
| 'treeitem';
| 'treeitem'
| undefined
>;
type?: Signalish<'submit' | 'reset' | 'button' | undefined>;
value?: Signalish<string | number | undefined>;
}
Expand Down Expand Up @@ -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>
Expand All @@ -1713,31 +1719,33 @@ 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>
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 = 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>;
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>;
Expand All @@ -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'
Expand All @@ -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>;
}
Expand All @@ -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>;
}
Expand Down Expand Up @@ -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>;
}

Expand Down Expand Up @@ -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>
Expand All @@ -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'
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -2392,7 +2426,7 @@ export namespace JSXInternal {

interface UlHTMLAttributes<T extends EventTarget = HTMLUListElement>
extends HTMLAttributes<T> {
role?:
role?: Signalish<
| 'list'
| 'group'
| 'listbox'
Expand All @@ -2403,7 +2437,9 @@ export namespace JSXInternal {
| 'radiogroup'
| 'tablist'
| 'toolbar'
| 'tree';
| 'tree'
| undefined
>;
}

interface VideoHTMLAttributes<T extends EventTarget = HTMLVideoElement>
Expand All @@ -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<
Expand Down
7 changes: 7 additions & 0 deletions test/ts/dom-attributes-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />;
Expand Down

0 comments on commit 4fb26f6

Please sign in to comment.