Skip to content

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

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

Conversation

AlirezaEbrahimkhani
Copy link
Contributor

@AlirezaEbrahimkhani AlirezaEbrahimkhani commented Apr 2, 2025

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
Copy link
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 👍

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
Copy link
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

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
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: ARIA attribute JSX types are missing
3 participants