We decided to adopt Gatsby for Sentry’s customer-facing documentation - well, I should say that I decided. We were already using it successfully for a variety of static marketing content, and I knew it had a lot of hype, so after a brief proof-of-concept it seemed like a safe choice.
By adding key handling, a tab index, a role and an aria-label, this div essentially becomes an accessible button and then we can add whatever content we want within the button. This solution works great for simple components that actually look and function like a button.
Although in that case, it likely makes more sense to use the more semantic button. Unfortunately, this approach is less effective with complex components. Let’s take another look at the account card component mentioned above.
React menu components for easy and fast web development.
- Unlimited levels of submenu
- Supports context menu
- Customisable styling
- Comprehensive keyboard interactions.
- Adheres to WAI-ARIA Authoring Practices.
A practical deep dive into building, scaling and maintaining high-quality design systems - for software engineers.