A presentation at CityJS London 2024 in in London, UK by Kathleen McMahon
Design System components are like guests at a Venetian Carnival, enjoying the festivities. One guest — the disclosure widget — wears three distinct masks, elevating a Carnival to a Masquerade Ball. Or… is it? What kind of Carnival are you attending if those masks get mixed? Join me to learn the secret to creating a reusable component and give your component library access to the best Carnival attractions.
The following resources were mentioned during the presentation or are useful additional information.
The report on the accessibility of the top 1,000,000 home pages from 2019 through 2024
The WHATWG living standard for the HTML popover attribute. Stable in all modern browsers as of April 16, 2024.
Learn about the Popover API
Scott O’Hara links to an article he co-wrote with Hidde DeVries about the accessibility attributes of the popover attribute, their ongoing work in the Open UI group, and more great articles.
A general explainer of the popover attribute feature.
What does “built-in accessibility” mean for browsers supporting popover? Hidde DeVries and Scott O’Hara have written this excellent article to give you the details.
With the new popover attribute in HTML, we can put elements in the top layer and allow them to disappear with ‘light dismiss’. This attribute adds behaviour, not semantics: you’re supposed to add your own when it makes sense. In this post, we’ll look at different semantics that could make sense for your popover-behaved elements. — Hidde DeVries
A Javascript-free popover demo using the Open Ui Popover API, created by Una Kravets
Design Systems are a popular way to bake your product. An often-missing ingredient, however, is accessible UI components. In this talk, you’ll learn the recipe for a delectably inclusive design system by mixing accessibility flavor into some commonly-used React components including icons, buttons, inputs, and disclosure patterns. You’ll also learn how to spice up your design system’s documentation with approachable, accessibility best-practices guidance including interactive examples, and component dos and don’ts. Even if you’ve never seen React before, join me to learn how to make your design system delicious.
Here’s what was said about this presentation on social media.
