Skip to content

Commit 4fb26f6

Browse files
rschristianrschristian
committed
refactor: Make roles signalish
1 parent d707458 commit 4fb26f6

File tree

2 files changed

+85
-42
lines changed

2 files changed

+85
-42
lines changed

‎src/jsx.d.ts

Lines changed: 78 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1568,20 +1568,22 @@ export namespace JSXInternal {
15681568

15691569
interface ArticleHTMLAttributes<T extends EventTarget = HTMLElement>
15701570
extends HTMLAttributes<T> {
1571-
role?:
1571+
role?: Signalish<
15721572
| 'article'
15731573
| 'application'
15741574
| 'document'
15751575
| 'feed'
15761576
| 'main'
15771577
| 'none'
15781578
| 'presentation'
1579-
| 'region';
1579+
| 'region'
1580+
| undefined
1581+
>;
15801582
}
15811583

15821584
interface AsideHTMLAttributes<T extends EventTarget = HTMLElement>
15831585
extends HTMLAttributes<T> {
1584-
role?:
1586+
role?: Signalish<
15851587
| 'complementary'
15861588
| 'feed'
15871589
| 'none'
@@ -1594,12 +1596,14 @@ export namespace JSXInternal {
15941596
| 'doc-footnote'
15951597
| 'doc-glossary'
15961598
| 'doc-pullquote'
1597-
| 'doc-tip';
1599+
| 'doc-tip'
1600+
| undefined
1601+
>;
15981602
}
15991603

16001604
interface AudioHTMLAttributes<T extends EventTarget = HTMLAudioElement>
16011605
extends MediaHTMLAttributes<T> {
1602-
role?: 'application';
1606+
role?: Signalish<'application' | undefined>;
16031607
}
16041608

16051609
interface BaseHTMLAttributes<T extends EventTarget = HTMLBaseElement>
@@ -1621,7 +1625,7 @@ export namespace JSXInternal {
16211625

16221626
interface BrHTMLAttributes<T extends EventTarget = HTMLBRElement>
16231627
extends HTMLAttributes<T> {
1624-
role?: 'none' | 'presentation';
1628+
role?: Signalish<'none' | 'presentation' | undefined>;
16251629
}
16261630

16271631
interface ButtonHTMLAttributes<T extends EventTarget = HTMLButtonElement>
@@ -1643,7 +1647,7 @@ export namespace JSXInternal {
16431647
popoverTarget?: Signalish<string | undefined>;
16441648
popovertargetaction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
16451649
popoverTargetAction?: Signalish<'hide' | 'show' | 'toggle' | undefined>;
1646-
role?:
1650+
role?: Signalish<
16471651
| 'button'
16481652
| 'checkbox'
16491653
| 'combobox'
@@ -1658,7 +1662,9 @@ export namespace JSXInternal {
16581662
| 'slider'
16591663
| 'switch'
16601664
| 'tab'
1661-
| 'treeitem';
1665+
| 'treeitem'
1666+
| undefined
1667+
>;
16621668
type?: Signalish<'submit' | 'reset' | 'button' | undefined>;
16631669
value?: Signalish<string | number | undefined>;
16641670
}
@@ -1694,7 +1700,7 @@ export namespace JSXInternal {
16941700

16951701
interface DataListHTMLAttributes<T extends EventTarget = HTMLDataListElement>
16961702
extends HTMLAttributes<T> {
1697-
role?: 'listbox';
1703+
role?: Signalish<'listbox' | undefined>;
16981704
}
16991705

17001706
interface DdHTMLAttributes<T extends EventTarget = HTMLElement>
@@ -1713,31 +1719,33 @@ export namespace JSXInternal {
17131719
extends HTMLAttributes<T> {
17141720
open?: Signalish<boolean | undefined>;
17151721
onToggle?: GenericEventHandler<T> | undefined;
1716-
role?: 'group';
1722+
role?: Signalish<'group' | undefined>;
17171723
}
17181724

17191725
interface DialogHTMLAttributes<T extends EventTarget = HTMLDialogElement>
17201726
extends HTMLAttributes<T> {
17211727
onCancel?: GenericEventHandler<T> | undefined;
17221728
onClose?: GenericEventHandler<T> | undefined;
17231729
open?: Signalish<boolean | undefined>;
1724-
role?: 'dialog' | 'alertdialog';
1730+
role?: Signalish<'dialog' | 'alertdialog' | undefined>;
17251731
}
17261732

17271733
interface DlHTMLAttributes<T extends EventTarget = HTMLDListElement>
17281734
extends HTMLAttributes<T> {
1729-
role?: 'group' | 'list' | 'none' | 'presentation';
1735+
role?: Signalish<'group' | 'list' | 'none' | 'presentation' | undefined>;
17301736
}
17311737

17321738
interface DtHTMLAttributes<T extends EventTarget = HTMLElement>
17331739
extends HTMLAttributes<T> {
1734-
role?: 'listitem';
1740+
role?: Signalish<'listitem' | undefined>;
17351741
}
17361742

17371743
interface EmbedHTMLAttributes<T extends EventTarget = HTMLEmbedElement>
17381744
extends HTMLAttributes<T> {
17391745
height?: Signalish<number | string | undefined>;
1740-
role?: 'application' | 'document' | 'img' | 'none' | 'presentation';
1746+
role?: Signalish<
1747+
'application' | 'document' | 'img' | 'none' | 'presentation' | undefined
1748+
>;
17411749
src?: Signalish<string | undefined>;
17421750
type?: Signalish<string | undefined>;
17431751
width?: Signalish<number | string | undefined>;
@@ -1748,23 +1756,27 @@ export namespace JSXInternal {
17481756
disabled?: Signalish<boolean | undefined>;
17491757
form?: Signalish<string | undefined>;
17501758
name?: Signalish<string | undefined>;
1751-
role?: 'group' | 'none' | 'presentation' | 'radiogroup';
1759+
role?: Signalish<
1760+
'group' | 'none' | 'presentation' | 'radiogroup' | undefined
1761+
>;
17521762
}
17531763

17541764
interface FigcaptionHTMLAttributes<T extends EventTarget = HTMLElement>
17551765
extends HTMLAttributes<T> {
1756-
role?: 'group' | 'none' | 'presentation';
1766+
role?: Signalish<'group' | 'none' | 'presentation' | undefined>;
17571767
}
17581768

17591769
interface FooterHTMLAttributes<T extends EventTarget = HTMLElement>
17601770
extends HTMLAttributes<T> {
1761-
role?:
1771+
role?: Signalish<
17621772
| 'contentinfo'
17631773
| 'generic'
17641774
| 'group'
17651775
| 'none'
17661776
| 'presentation'
1767-
| 'doc-footnote';
1777+
| 'doc-footnote'
1778+
| undefined
1779+
>;
17681780
}
17691781

17701782
interface FormHTMLAttributes<T extends EventTarget = HTMLFormElement>
@@ -1781,13 +1793,15 @@ export namespace JSXInternal {
17811793
novalidate?: Signalish<boolean | undefined>;
17821794
noValidate?: Signalish<boolean | undefined>;
17831795
rel?: Signalish<string | undefined>;
1784-
role?: 'form' | 'none' | 'presentation' | 'search';
1796+
role?: Signalish<'form' | 'none' | 'presentation' | 'search' | undefined>;
17851797
target?: Signalish<string | undefined>;
17861798
}
17871799

17881800
interface HeadingHTMLAttributes<T extends EventTarget = HTMLHeadingElement>
17891801
extends HTMLAttributes<T> {
1790-
role?: 'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle';
1802+
role?: Signalish<
1803+
'heading' | 'none' | 'presentation' | 'tab' | 'doc-subtitle' | undefined
1804+
>;
17911805
}
17921806

17931807
interface HeadHTMLAttributes<T extends EventTarget = HTMLHeadElement>
@@ -1797,17 +1811,21 @@ export namespace JSXInternal {
17971811

17981812
interface HeaderHTMLAttributes<T extends EventTarget = HTMLElement>
17991813
extends HTMLAttributes<T> {
1800-
role?: 'banner' | 'generic' | 'group' | 'none' | 'presentation';
1814+
role?: Signalish<
1815+
'banner' | 'generic' | 'group' | 'none' | 'presentation' | undefined
1816+
>;
18011817
}
18021818

18031819
interface HrHTMLAttributes<T extends EventTarget = HTMLHRElement>
18041820
extends HTMLAttributes<T> {
1805-
role?: 'separator' | 'none' | 'presentation' | 'doc-pagebreak';
1821+
role?: Signalish<
1822+
'separator' | 'none' | 'presentation' | 'doc-pagebreak' | undefined
1823+
>;
18061824
}
18071825

18081826
interface HtmlHTMLAttributes<T extends EventTarget = HTMLHtmlElement>
18091827
extends HTMLAttributes<T> {
1810-
role?: 'document';
1828+
role?: Signalish<'document' | undefined>;
18111829
}
18121830

18131831
interface IframeHTMLAttributes<T extends EventTarget = HTMLIFrameElement>
@@ -1828,7 +1846,9 @@ export namespace JSXInternal {
18281846
name?: Signalish<string | undefined>;
18291847
referrerpolicy?: Signalish<HTMLAttributeReferrerPolicy | undefined>;
18301848
referrerPolicy?: Signalish<HTMLAttributeReferrerPolicy | undefined>;
1831-
role?: 'application' | 'document' | 'img' | 'none' | 'presentation';
1849+
role?: Signalish<
1850+
'application' | 'document' | 'img' | 'none' | 'presentation' | undefined
1851+
>;
18321852
sandbox?: Signalish<string | undefined>;
18331853
/** @deprecated */
18341854
scrolling?: Signalish<string | undefined>;
@@ -2001,7 +2021,7 @@ export namespace JSXInternal {
20012021

20022022
interface MainHTMLAttributes<T extends EventTarget = HTMLElement>
20032023
extends HTMLAttributes<T> {
2004-
role?: 'main';
2024+
role?: Signalish<'main' | undefined>;
20052025
}
20062026

20072027
interface MapHTMLAttributes<T extends EventTarget = HTMLMapElement>
@@ -2080,19 +2100,21 @@ export namespace JSXInternal {
20802100
max?: Signalish<number | string | undefined>;
20812101
min?: Signalish<number | string | undefined>;
20822102
optimum?: Signalish<number | undefined>;
2083-
role?: 'meter';
2103+
role?: Signalish<'meter' | undefined>;
20842104
value?: Signalish<string | number | undefined>;
20852105
}
20862106

20872107
interface NavHTMLAttributes<T extends EventTarget = HTMLElement>
20882108
extends HTMLAttributes<T> {
2089-
role?:
2109+
role?: Signalish<
20902110
| 'navigation'
20912111
| 'menu'
20922112
| 'menubar'
20932113
| 'none'
20942114
| 'presentation'
2095-
| 'tablist';
2115+
| 'tablist'
2116+
| undefined
2117+
>;
20962118
}
20972119

20982120
interface NoScriptHTMLAttributes<T extends EventTarget = HTMLElement>
@@ -2107,7 +2129,7 @@ export namespace JSXInternal {
21072129
form?: Signalish<string | undefined>;
21082130
height?: Signalish<number | string | undefined>;
21092131
name?: Signalish<string | undefined>;
2110-
role?: 'application' | 'document' | 'img';
2132+
role?: Signalish<'application' | 'document' | 'img' | undefined>;
21112133
type?: Signalish<string | undefined>;
21122134
usemap?: Signalish<string | undefined>;
21132135
useMap?: Signalish<string | undefined>;
@@ -2118,7 +2140,7 @@ export namespace JSXInternal {
21182140
interface OlHTMLAttributes<T extends EventTarget = HTMLOListElement>
21192141
extends HTMLAttributes<T> {
21202142
reversed?: Signalish<boolean | undefined>;
2121-
role?:
2143+
role?: Signalish<
21222144
| 'list'
21232145
| 'group'
21242146
| 'listbox'
@@ -2129,7 +2151,9 @@ export namespace JSXInternal {
21292151
| 'radiogroup'
21302152
| 'tablist'
21312153
| 'toolbar'
2132-
| 'tree';
2154+
| 'tree'
2155+
| undefined
2156+
>;
21332157
start?: Signalish<number | undefined>;
21342158
type?: Signalish<'1' | 'a' | 'A' | 'i' | 'I' | undefined>;
21352159
}
@@ -2138,14 +2162,14 @@ export namespace JSXInternal {
21382162
extends HTMLAttributes<T> {
21392163
disabled?: Signalish<boolean | undefined>;
21402164
label?: Signalish<string | undefined>;
2141-
role?: 'group';
2165+
role?: Signalish<'group' | undefined>;
21422166
}
21432167

21442168
interface OptionHTMLAttributes<T extends EventTarget = HTMLOptionElement>
21452169
extends HTMLAttributes<T> {
21462170
disabled?: Signalish<boolean | undefined>;
21472171
label?: Signalish<string | undefined>;
2148-
role?: 'option';
2172+
role?: Signalish<'option' | undefined>;
21492173
selected?: Signalish<boolean | undefined>;
21502174
value?: Signalish<string | number | undefined>;
21512175
}
@@ -2173,7 +2197,7 @@ export namespace JSXInternal {
21732197
interface ProgressHTMLAttributes<T extends EventTarget = HTMLProgressElement>
21742198
extends HTMLAttributes<T> {
21752199
max?: Signalish<number | string | undefined>;
2176-
role?: 'progressbar';
2200+
role?: Signalish<'progressbar' | undefined>;
21772201
value?: Signalish<string | number | undefined>;
21782202
}
21792203

@@ -2204,7 +2228,15 @@ export namespace JSXInternal {
22042228

22052229
interface SearchHTMLAttributes<T extends EventTarget = HTMLElement>
22062230
extends HTMLAttributes<T> {
2207-
role?: 'search' | 'form' | 'group' | 'none' | 'presentation' | 'region';
2231+
role?: Signalish<
2232+
| 'search'
2233+
| 'form'
2234+
| 'group'
2235+
| 'none'
2236+
| 'presentation'
2237+
| 'region'
2238+
| undefined
2239+
>;
22082240
}
22092241

22102242
interface SelectHTMLAttributes<T extends EventTarget = HTMLSelectElement>
@@ -2218,7 +2250,7 @@ export namespace JSXInternal {
22182250
name?: Signalish<string | undefined>;
22192251
required?: Signalish<boolean | undefined>;
22202252
// TODO: Select w/ multiple
2221-
role?:
2253+
role?: Signalish<
22222254
| 'region'
22232255
| 'generic'
22242256
| 'alert'
@@ -2268,7 +2300,9 @@ export namespace JSXInternal {
22682300
| 'doc-prologue'
22692301
| 'doc-pullquote'
22702302
| 'doc-qna'
2271-
| 'doc-toc';
2303+
| 'doc-toc'
2304+
| undefined
2305+
>;
22722306
size?: Signalish<number | undefined>;
22732307
value?: Signalish<string | number | undefined>;
22742308
onChange?: GenericEventHandler<T> | undefined;
@@ -2348,7 +2382,7 @@ export namespace JSXInternal {
23482382
placeholder?: Signalish<string | undefined>;
23492383
readOnly?: Signalish<boolean | undefined>;
23502384
required?: Signalish<boolean | undefined>;
2351-
role?: 'textbox';
2385+
role?: Signalish<'textbox' | undefined>;
23522386
rows?: Signalish<number | undefined>;
23532387
value?: Signalish<string | number | undefined>;
23542388
wrap?: Signalish<string | undefined>;
@@ -2392,7 +2426,7 @@ export namespace JSXInternal {
23922426

23932427
interface UlHTMLAttributes<T extends EventTarget = HTMLUListElement>
23942428
extends HTMLAttributes<T> {
2395-
role?:
2429+
role?: Signalish<
23962430
| 'list'
23972431
| 'group'
23982432
| 'listbox'
@@ -2403,7 +2437,9 @@ export namespace JSXInternal {
24032437
| 'radiogroup'
24042438
| 'tablist'
24052439
| 'toolbar'
2406-
| 'tree';
2440+
| 'tree'
2441+
| undefined
2442+
>;
24072443
}
24082444

24092445
interface VideoHTMLAttributes<T extends EventTarget = HTMLVideoElement>
@@ -2413,12 +2449,12 @@ export namespace JSXInternal {
24132449
width?: Signalish<number | string | undefined>;
24142450
disablePictureInPicture?: Signalish<boolean | undefined>;
24152451
disableRemotePlayback?: Signalish<boolean | undefined>;
2416-
role?: 'application';
2452+
role?: Signalish<'application' | undefined>;
24172453
}
24182454

24192455
interface WbrHTMLAttributes<T extends EventTarget = HTMLElement>
24202456
extends HTMLAttributes<T> {
2421-
role?: 'none' | 'presentation';
2457+
role?: Signalish<'none' | 'presentation' | undefined>;
24222458
}
24232459

24242460
export type DetailedHTMLProps<

‎test/ts/dom-attributes-test.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ function createSignal<T>(value: T): JSX.SignalLike<T> {
1515
// @ts-expect-error A button should not have a role of presentation
1616
const badAriaRole = <button role="presentation" />;
1717
const validAriaRole = <button role="slider" />;
18+
const signalBadAriaRole = (
19+
// @ts-expect-error A button should not have a role of presentation
20+
<button role={createSignal('presentation' as const)} />
21+
)
22+
const signalValidAriaRole = (
23+
<button role={createSignal('slider' as const)} />
24+
)
1825

1926
// @ts-expect-error We should correctly type aria attributes like autocomplete
2027
const badAriaValues = <div aria-autocomplete="bad-value" />;

0 commit comments

Comments
 (0)