search

willmartian / hdot

A zero-dependency, buildless, terse, and type-safe way to write HTML in JavaScript.
https://hdot.dev/
34 stars 0 forks source link

Allow aria attributes #2

Closed rothsandro closed 2 years ago

rothsandro commented 2 years ago

Is your feature request related to a problem? Please describe. hdot should support ARIA attributes to improve accessibility of a site.

Describe the solution you'd like ARIA Attributes should be supported similar to data attributes using camelCase.

h.button.ariaLabel('Close`)();

Describe alternatives you've considered The only workaround right now is using [aria-xyz] which is not a very nice syntax (and no TS support):

h.button['aria-label']('Close')`button`,
willmartian commented 2 years ago

Thank you for the issue! Agreed, this is a very important feature the library is lacking and I am currently working on it for the next release.

willmartian commented 2 years ago

Hey @rothsandro, thanks again for the issue. Support for aria attributes was added in v0.0.5 here. Work still needs to be done to better document the type def and restrict possible aria attributes based on the role of the element, but this is a start!

rothsandro commented 2 years ago

@willmartian Thanks 👍

In the following example dataTest works correct (generates data-test) but the aria attribute is added as arialabel instead of aria-label:

h.button.dataTest("123").ariaLabel("Hello")`Click Me`;
willmartian commented 2 years ago

Oops, that is my bad. Fixed this in v0.0.7 and added a unit test to cover myself in the future. You can find a link of your code snippet working properly here.

Thanks again for being an early tester of this project! :)

rothsandro commented 2 years ago

Great, looks good now 🎉 Thanks