-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: Restrict aria roles by element type #4607
base: main
Are you sure you want to change the base?
Conversation
3bb1113
to
4fb26f6
Compare
e52b2b0
to
29a30e0
Compare
alt?: Signalish<string | undefined>; | ||
coords?: Signalish<string | undefined>; | ||
download?: Signalish<any>; | ||
href?: Signalish<string | undefined>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When an incorrect role is applied, if we're restricting via more complex intersection types, our Signalish
helper seems to cause error messages to blow up if the particular intersection key can be found on the base interface.
This isn't an issue in all cases, but to be somewhat consistent, I've stripped these from the base interfaces. Take the following example:
<input type="checkbox" role="slider /> // I'm invalid!
With type?: Signalish<HTMLInputTypeAttribute | undefined>
set, you get this error:
Type '{ type: "checkbox"; role: "slider"; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
Types of property 'type' are incompatible.
Type '"checkbox"' is not assignable to type '(Signalish<HTMLInputTypeAttribute | undefined> & Signalish<"button">) | (Signalish<HTMLInputTypeAttribute | undefined> & Signalish<...>) | (Signalish<...> & Signalish<...>) | (Signalish<...> & Signalish<...>) | (Signalish<...> & Signalish<...>)'. (tsserver 2322)
Without, you get this:
Type '{ type: "checkbox"; role: "slider"; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
Types of property 'type' are incompatible.
Type '"checkbox"' is not assignable to type 'Signalish<"button"> | Signalish<"image"> | Signalish<"range"> | Signalish<"reset"> | Signalish<"submit">'. (tsserver 2322)
Not an expert here, but the latter is a lot better.
src/jsx.d.ts
Outdated
> & | ||
AnchorAriaRoles; | ||
|
||
interface PartialAreaHTMLAttributes<T> extends HTMLAttributes<T> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Partial...
might be a poor name, very much open to suggestions.
// Spec states this branch is limited to "no `multiple` attribute AND no `size` attribute greater than 1". | ||
// We can't really express that in TS though so we'll just ignore `size` for now. | ||
//size?: never; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth calling out, we can't quite adhere to this spec but might be better than nothing. Can also just revert too, treat it like others we can't support via types and just allow any aria role.
Starting to take a look at #3853, seems role restriction should be simple enough for most elements. Spec Doc
Edit: Unfortunately I've been told these roles are a bit iffy in reality... there's situations in which the spec should be ignored. This presents an issue here: adding stricter types might dissuade people against using the correct role on some elements because the spec (and therefore our types) don't allow it.
There are some roles that we can't limit via types, mainly due to descendant restrictions ("If not a descendant of
<article>
,<aside>
,<main>
, ..., etc.) or specific attribute values ("Ifsize
attribute is greater than 1"), but this does get most elements/roles.With this I think I'm all typed out for the foreseeable future 😅