Skip to content
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

Add support for ARIA attributes (props) #37

Merged
merged 5 commits into from
Jun 25, 2024
Merged

Conversation

gasi
Copy link
Collaborator

@gasi gasi commented May 13, 2024

This will allow us to improve accessibility of certain features, e.g. breadcrumbs from Bootstrap: https://getbootstrap.com/docs/4.6/components/breadcrumb/

@gasi gasi changed the title Add support for ARIA element properties Add support for ARIA element attributes May 13, 2024
@gasi gasi changed the title Add support for ARIA element attributes Add support for ARIA attributes (props) May 13, 2024
@gasi gasi requested a review from fsoikin May 13, 2024 12:51
For now, they are all given the `String` type. After spot checking a few
on MDN, that is mostly accurate, even for seemingly numeric values such
`aria-valuemin`:
https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaValueMin#value

NOTE: Despite React using `camelCase` for most props, ARIA props are
indeed `kebab-case`:
- https://react.dev/learn/writing-markup-with-jsx#3-camelcase-salls-most-of-the-things:~:text=the%20browser%20console.-,Pitfall,-For%20historical%20reasons
- https://legacy.reactjs.org/docs/accessibility.html#wai-aria

This could be improved with the following type definitions, but we’ll
leave this to the implementing developer now to check support in the
browser:
https://use-form.netlify.app/interfaces/_node_modules__types_react_index_d_.react.ariaattributes
@gasi gasi force-pushed the aria-accessibility branch from 57d372b to ae4fdbf Compare May 13, 2024 12:52
codegen/html.js Outdated Show resolved Hide resolved
Co-authored-by: Fyodor Soikin <[email protected]>
@gasi gasi force-pushed the aria-accessibility branch from 386b5f4 to 0f68f80 Compare May 13, 2024 13:18
Copy link
Contributor

@vineshay vineshay left a comment

Choose a reason for hiding this comment

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

I've tested this locally and the attributes are able to be used and work as expected

Copy link
Collaborator

@fsoikin fsoikin left a comment

Choose a reason for hiding this comment

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

👍

@vineshay vineshay merged commit adc1fd4 into master Jun 25, 2024
2 checks passed
@vineshay vineshay deleted the aria-accessibility branch June 25, 2024 15:35
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.

3 participants