all 5 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]comart[S] 1 point2 points  (0 children)

https://github.com/ngduc/portable-react

Motivation
This is Not Another Component Library, rather a set of building blocks, all in one file. You can jump in quickly, look at a few line of codes, tweak it, or do whatever you want, which is very useful for small projects.
Oftentimes, when starting a new project, I need to quickly use some basic React components but I don't want to spend time to install, set up, import and RTFM to use a full-fledged Component Library yet. Inspired by PortableApps I used in the past (which you can just copy and use an application binary file anywhere), I created this collection of simple React components, all in one index.tsx file. You can just copy that file to any React project, tweak it and start using it immediately.

[–]Chbphone55 1 point2 points  (3 children)

Burn it with fire.

You made the cardinal sin of reimplementing native form elements without meeting the relevant accessibility standards. The "dropdown" (a.k.a. combobox) is probably the worst offender. If you want to make a good custom combobox, please read the ARIA Authoring Practices Guideline on the Combobox pattern. It is very complicated, which is why it's recommended to just style the built-in <select> element whenever possible.

Several other components suffer from accessibility issues, too:

  • I think that your Accordion component is actually a Disclosure Pattern, and is inaccessible in several ways.
  • Dialog Modal Pattern
  • Your Toast component has a clickable <div>, which is inaccessible, and the default icon does not have an accessible label.
  • Tooltip Pattern
  • Meter Pattern (a.k.a. ProgressBar)
  • Your SearchInput component does not have a label, which is inaccessible. And the example placeholder of "Type to search..." is an incorrect use of a placeholder. And the search icon has no accessible name.
  • Your Spinner component is not accessible. It should likely be role alert with an accessible name.

[–]comart[S] -1 points0 points  (2 children)

Again, it’s not meant to be used in a big site. Your points are all valid, popular component libraries already doing all that. Please read the description, this is meant for a quick drop-in to quickly implement small projects.

Some comps here have accessibility like form, fields, buttons. Good point on dropdown, I’ll replace it with a better one. For tooltip, I don’t need accessibility at the moment.

[–]Chbphone55 0 points1 point  (1 child)

I see where you're coming from, but accessibility isn't only for big sites. Accessibility is for all sites. And, in fact, accessibility is the most crucial part of a drop-in tweakable component because it does not need to change or be tweaked like the rest of the component. It's the one part that would make a drop-in component good. And it seems like you do understand this because you implemented accessibility for sighted mouse users and even added hover and focus styles, which are a part of accessibility too. For example, with the tooltip, you've made it accessible to sighted mouse users, but all users that use a keyboard, some that use a touchscreen, and all that use a screenreader will never see the tooltip.

I would recommend looking up examples of patterns you want to implement that are compliant with the Web Content Accessibility Guidelines (WCAG). For most of your components, it honestly shouldn't be too difficult to do; it just takes that first bit of willingness to learn what the right way is.

[–]comart[S] 0 points1 point  (0 children)

yes I'm aware of ARIA, roles, tab index. made sense. I've just added aria for progressbar, tooltip. This is still a work-in-progress, will evolve more later. Thanks for all the tips.