Password Generator App | Solidjs - Typescript - Postcss

Hello everyone 😊. This is my solution for the Password Generator App challenge.

It is the second time I use solid-js and it went pretty smooth! I love the framework. It feels like an hybrid between React and Vanilla JS.

I added two little bonus :

• Generate only strict passwords (at least one character of each selected rules).
• Toast notifications success/error (copied to clipboard).

Regarding accessibility as always I tried to do my best but this time I used a new pattern.

I tried to not use the disabled HTML attribute but work with the aria-disabled instead. It means that I i am required to check for the validity of the inputs in the JavaScript because the buttons are actually clickable even with the "disable" style.

It might sound like more work but it is not! Why? Because I do it anyway.. You can remove the disabled attribute from the developer console (F12) and break the app if the only check you have is a "disabled" button.

I also added a tooltip to explain why the button is "disabled" for a better UX.

For users using keyboard navigation & screen readers it is a big + ! Because the button is still focusable and they know why the action fails.

Anyway. That is a long message. So if you are interested here is a link to a blog post on that subject.

Feel free to share any improvement you want to see implemented in this project.

Thank you for your time. Have a nice day/night. Peace 👌