Accessible design patterns
Part of the challenge of making interactive design patters like dropdown menus, tabs, accordions, etc... accessible is that it requires listening for user interaction, keeping track of the state of the DOM, and then updating the DOM to reflect the change in state. Keyboard navigation in particular is a huge part of making components accessible for those that use assistive technologies (AT) or unable to navigate with a mouse. One of the biggest strengths of frameworks like React is that it makes keeping track of state much easier. Instead of attaching event listeners to elements and updating the DOM based on interactions (clicks, and keyboard events), your components can keep track of their own state. So, toggling attributes that convey meaning to AT like,
aria-selected becomes trivial. This concept of DOM state as data is what kinda got me excited about digging into React.
I find it much easier to learn a topic if I have a focused task to use as a reason to learn it so I decided to try and create an accessible React version of a pretty common design pattern—a collabsible section.
This is a pretty quick and dirty example, but I learned alot about React and how it makes composing components easy. I also realy like how everything is a component in React. This particular pattern could be improved more keyboard features like using up and down arrows to move through the each
<Panel> inside a
<PanelGroup>. I'll keep working on it. 🙂