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 9f2cb57 commit 3bb1113
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 34 deletions.
68 changes: 34 additions & 34 deletions src/jsx.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>;
}
Expand Down Expand Up @@ -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> {
Expand All @@ -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>;
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>;
Expand Down Expand Up @@ -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> {
Expand Down Expand Up @@ -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> {
Expand All @@ -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>;
Expand All @@ -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>;
}
Expand All @@ -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>;
}
Expand All @@ -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>;
}

Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -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>
Expand All @@ -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<
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 3bb1113

Please sign in to comment.