Hacker News Reader

Comment by andrewingram | Hacker News Reader

We use Ant Design, but I've been regretting the decision because many of the components haven't been built with keyboard navigation (and from the looks of things, other accessibility features) in mind. It's a shame because the default appearance is very attractive.

View on HN

The previous version was not really good on the accessibility side of things.

See this article for example: https://darekkay.com/blog/accessible-ui-frameworks/

Maybe it has improved now?

Ooh, I hadn't seen this before, this is a great resource.

We already improve accessibility and keyboard support of some components in 4.0: Select/TreeSelect/DatePicker/TimePicker, and we will improve it consistently.

Does it make sense to have a badge on each component that shows accessibility is tested on it?

Does anyone have keyboard shortcut fatigue? I am overwhelmed by these things.

Knowing and remembering shortcuts for every webapp you visit is impossible for anyone one person. Photoshop has its own shortcuts, so does Sublime Text. Open VSCode...oh yeah, you can map Sublime Text keymap but it has its own as well! Then you're SSH into a machine and you have to use vim.

Keyboard shortcuts across apps needs to be standardized in some kind of an ISO standard. It is only creating noise. I don't want to remember Pintrest shortcuts or Twitter keyboard map. Ok, its good to have them I guess if someone needs to learn it and its not necessary to use the app - so that's good. I just think that some of these shortcuts are all over the place.

I am pretty sure the complaint above was about keyboard navigation, i.e. the possibility to navigate a page and its components with the tab, enter, space and arrow keys.

If you do switch what would you switch to?

I work on Elastic's UI[1][2], which is Apache 2 licensed. We look a little different than Ant, and are more tailored to data projects and content creation since we use it for Kibana. That means we have lots of tables, autocompleters, sliders, data grids, and specialized form controls.

All of our components are built for keyboard / screenreader support and accessibility was one of our primary goals since the beginning. We take it serious and it's baked into our review process. It's fairly mature and is now two and a half years old with a solid team working on it full time. At the very least you might find some ideas for your projects. It's also TypeScript-backed and themable through a Sass layer with native dark mode support.

We welcome contributions and if there's any students out there thinking about hacking on a component library for summer of code you can find some projects over here[3].

Other projects out there similar to ours that are pretty mature are Microsoft's Fabric[4] and Atalassian's Atlas Kit[5]. Both of which are open source as well. Generally we tend to have more features, and they might be a little easier to theme or modularize. Chakra UI[6] is a new comer that is smaller, but people seem to like as well. There are a lot of options these days and most of them are tailored towards a certain use case, since it's hard to target everything.

I research this stuff a lot so if anyone has any questions about component libs give a yell.

[1]: https://github.com/elastic/eui [2]: https://elastic.github.io/eui/#/ [3]: https://github.com/elastic/gsoc [4]: https://developer.microsoft.com/en-us/fabric#/ [5]: https://atlaskit.atlassian.com/ [6]: https://chakra-ui.com/

Most of the "good" component libraries are what i'd consider to be open source for PR purposes, e.g. Atlassian's Atlaskit. You wouldn't use them unless you really want your UI to look like another company's.

I'm intrigued by Tailwind UI though, it looks like it might be the right balance between feature set and brand agnosticism.

I actually am in the process of removing antd (previous version) from my website and am not planning to upgrade to 4.0. The reason being is because you still run into the same issues as using any framework -- customizing it ends up overriding a lot of the base styles and implementations (line heights, grid, etc). Thankfully I saw this coming so a lot of the components in my app (React) are labeled as `Wrapped<ant component name>`, which I quite literally just wrap the component and add any additional props/styling that I'd like.

I'm loving Uber's Base Web for React. It has accessibility built-in. It is themeable and highly customizable due to its "overrides" feature. The project is highly active with frequent releases.

https://baseweb.design/

Why not Semantic-ui-react? Surprised it isn't getting more of a mention here, using it at my company and it's been fantastic.

I had to make a choice on UI framework several months back and Semantic UI looked nice, but wasn't as comprehensive as Ant. Do you use some sort of add-on to fill in the rest or do you just roll your own components in that case? E.g., I was looking for a tree component and couldn't find with Semantic UI.

check out https://github.com/dimitropoulos/react-ui-roundup for a pretty good jumping off point for a list of options to explore!

material-ui

Reply on news.ycombinator.com