Skip to content

feat(jsx): add support for aria-* attributes in JSX typings#6221

Merged
christian-bromann merged 1 commit intostenciljs:mainfrom
AlirezaEbrahimkhani:feat/jsx-aria-attributes
Apr 2, 2025
Merged

feat(jsx): add support for aria-* attributes in JSX typings#6221
christian-bromann merged 1 commit intostenciljs:mainfrom
AlirezaEbrahimkhani:feat/jsx-aria-attributes

Conversation

@AlirezaEbrahimkhani
Copy link
Copy Markdown
Contributor

@AlirezaEbrahimkhani AlirezaEbrahimkhani commented Apr 2, 2025 •
edited
Loading

Add typings for ARIA attributes like aria-labelledby, aria-hidden, etc., to the DOMAttributes interface. This allows better accessibility support and developer experience via type safety and IntelliSense.

fixes: #6182

What is the current behavior?

GitHub Issue Number: #6182
Currently, JSX attributes with ARIA prefixes such as aria-label, aria-hidden, etc., are not typed, leading to missing IntelliSense and potential type errors in TypeScript.

What is the new behavior?

JSX ARIA attributes are now explicitly typed in the DOMAttributes interface, enabling proper IntelliSense, autocomplete, and validation in IDEs and TypeScript-aware tooling.
This includes support for all standard ARIA attributes, and optionally, a generic index signature for custom aria-* values.

Documentation

Does this introduce a breaking change?

  • Yes
  • No

Testing

Other information

@AlirezaEbrahimkhani AlirezaEbrahimkhani requested a review from a team as a code owner April 2, 2025 13:39
christian-bromann
christian-bromann approved these changes Apr 2, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

christian-bromann
christian-bromann requested changes Apr 2, 2025
View reviewed changes
@christian-bromann christian-bromann mentioned this pull request Apr 2, 2025
Merged
2 tasks
@AlirezaEbrahimkhani
feat(jsx): add support for aria-* attributes in JSX typings
044a600 
Add typings for ARIA attributes like `aria-labelledby`, `aria-hidden`, etc.,
to the DOMAttributes interface. This allows better accessibility support and
developer experience via type safety and IntelliSense.

fixes: stenciljs#6182
@AlirezaEbrahimkhani AlirezaEbrahimkhani force-pushed the feat/jsx-aria-attributes branch from 3fc53e6 to 044a600 Compare April 2, 2025 20:06
christian-bromann
christian-bromann approved these changes Apr 2, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@christian-bromann christian-bromann merged commit 6e748ec into stenciljs:main Apr 2, 2025
141 of 142 checks passed
@duhem-s
Copy link
Copy Markdown

duhem-s commented Apr 15, 2025

Is there a way to ignore this ?

One of our components have a ariaDescribedbyIDs props, typed as string[] but since this change we cannot build because it expect to have string | boolean type on aria* attributes.

Maybe it would be better to list the existing aria-* attributes ? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes

@christian-bromann
Copy link
Copy Markdown
Member

christian-bromann commented Apr 15, 2025

@duhem-s would you mind raising a PR for this, happy to merge and release it.

@AlirezaEbrahimkhani AlirezaEbrahimkhani mentioned this pull request Apr 19, 2025
Closed
2 tasks
@artursopelnik artursopelnik mentioned this pull request Apr 24, 2025
Closed
3 tasks
@cvanderleij-ilionx cvanderleij-ilionx mentioned this pull request May 6, 2025
Merged
8 tasks
@danyball
Copy link
Copy Markdown

danyball commented Jan 12, 2026

@AlirezaEbrahimkhani Thanks for this fix. Do you see a possibility to type some aria attributes a bit stronger? Because TS ARIAMixin interface has some attributes which are not "string | boolean | null": E.g. ariaActiveDescendantElement: Element | null;.
Just asking because we use this type outside of JSX: props: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement> and when using props object its valid to use props.ariaNotExisting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@christian-bromann christian-bromann christian-bromann approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feat: ARIA attribute JSX types are missing

4 participants

@AlirezaEbrahimkhani @duhem-s @christian-bromann @danyball