I released an extremely polished browser extension, Random Bookmark From Folder 2.0 (Firefox, Chrome, source code). It’s basically an entirely new product, as nothing except the icon could be ported from the legacy Firefox version. As a Web developer, I think it’s a wonderful piece of frontend engineering, and I learned a lot that I’d like to share.
- WAI-ARIA Authoring Practices is an excellent guide to making many kinds of widgets accessible. It describes not only how to use WAI-ARIA features, but also what keyboard controls to implement. I’m proud to say RBFF follows every recommendation for Tree Views except type-ahead.
- CSS Grid is an amazingly natural fit for tree view widgets. Place the expander in the first row & first column, specify that the children container spans all other columns, and do whatever else you want.
- When creating user interfaces that can be controlled by either mouse or keyboard (such as those recommended by WAI-ARIA Authoring Practices), it can be useful to add elements that can only be focused by keyboard (
tabindex="0"in HTML and
pointer-events: none;in CSS), and make sure that any of their mouse counterparts that can otherwise be focused have
tabindex="-1". This makes it trivial to detect when the user is using a keyboard instead of a mouse, so that you know when to do things such as display non-standard keyboard controls. If the for-keyboards element is part of a CSS Grid, it can be positioned to overlap whichever grid cells make sense for the focus outline.