Design System Carnival! One accessible component, many pretty masks.

A presentation at ReactJSDay in in Verona, VR, Italy by Kathleen McMahon

Design-systems are a Carnival! One accessible component Many pretty masks | Kathleen McMahon @resource11

Design-systems are a Carnival! One accessible component Many pretty masks | Kathleen McMahon @resource11

https://noti.st/resource11

https://noti.st/resource11

@resource11 Twitter | Instagram | GitHub

@resource11 Twitter | Instagram | GitHub

Who are you, again?

Who are you, again?

Kathleen McMahon | Engineer • Designer • Speaker

Kathleen McMahon | Engineer • Designer • Speaker

image: Me on a cyclocross bike, hopping over barriers and riding through mud.

image: Me on a cyclocross bike, hopping over barriers and riding through mud.

image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes

image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes

image: Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose

image: Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose

image: Group of penguins gathered on an iceberg with a few swimming and jumping in the ocean. One penguin attempts to jump atop an iceberg to join their penguin friends — and fails — splashing back into the water in ungraceful fashion.

image: Group of penguins gathered on an iceberg with a few swimming and jumping in the ocean. One penguin attempts to jump atop an iceberg to join their penguin friends — and fails — splashing back into the water in ungraceful fashion.

 image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases

image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases

image: Thor, my floofy beige-striped cat, rests in his bed in my colorfully-lit office

image: Thor, my floofy beige-striped cat, rests in his bed in my colorfully-lit office

 image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.

image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.

 image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.

image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.

image: Otis and Thor — in perfect light and dark fur contrast — nestle together atop a soft red flannel throw.

image: Otis and Thor — in perfect light and dark fur contrast — nestle together atop a soft red flannel throw.

image: A wide-planked boardwalk  — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide

image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide

image: Lush green foliage surrounding fiberglass boardwalk leading to the ocean at dawn. The bright orange "Public access 1" sign accenting the way to ocean bliss.

image: Lush green foliage surrounding fiberglass boardwalk leading to the ocean at dawn. The bright orange "Public access 1" sign accenting the way to ocean bliss.

image: Weathered wooden railings surround a raised boardwalk leading to an expanse of beach at low tide. Two individuals sit in beach chairs nearby glancing at the calm ocean water.

image: Weathered wooden railings surround a raised boardwalk leading to an expanse of beach at low tide. Two individuals sit in beach chairs nearby glancing at the calm ocean water.

image: Weathered beige wooden railings  and tall sea grass surround soft light beige sand leading to a calm surf at peak low tide. The late morning sun reflecting off of wispy cirrus clouds.

image: Weathered beige wooden railings and tall sea grass surround soft light beige sand leading to a calm surf at peak low tide. The late morning sun reflecting off of wispy cirrus clouds.

image: Dark gray weathered wooden railing and tall sage green sea grass surround a fiberglass boardwalk leading to a deep blue ocean at low tide in the late afternoon. Two fluffy white clouds sail across the clear blue sky.

image: Dark gray weathered wooden railing and tall sage green sea grass surround a fiberglass boardwalk leading to a deep blue ocean at low tide in the late afternoon. Two fluffy white clouds sail across the clear blue sky.

image: Calm waves lapping against the sand

image: Calm waves lapping against the sand

image: Dark beige wet sand, ready to reveal a baby sand dollar

image: Dark beige wet sand, ready to reveal a baby sand dollar

image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool.

image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool.

image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.

image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.

image: A tiny pearlescent shell sits on the side of a dark gray sand dollar in the palm of my hand. Beneath my hand is the cool waters of a very crowded tidal pool full of rocks, shells and ocean water.

image: A tiny pearlescent shell sits on the side of a dark gray sand dollar in the palm of my hand. Beneath my hand is the cool waters of a very crowded tidal pool full of rocks, shells and ocean water.

image: A gathering of cream-colored sand dollars and a large periwinkle shell in a large open clam shell sitting atop a brown wooden bench at the beach

image: A gathering of cream-colored sand dollars and a large periwinkle shell in a large open clam shell sitting atop a brown wooden bench at the beach

image: A gathering of a dark gray sand dollar, large and small periwinkle shells in a large open clam shell sitting atop a weathered gray wooden bench at the beach

image: A gathering of a dark gray sand dollar, large and small periwinkle shells in a large open clam shell sitting atop a weathered gray wooden bench at the beach

image: A gathering of sand dollars of many colors and sizes in a large open clam shell sitting atop the sand next to some seaweed at the beach

image: A gathering of sand dollars of many colors and sizes in a large open clam shell sitting atop the sand next to some seaweed at the beach

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.

image: Otis — black cat of magic — lovingly gazing at me with golden eyes while lying upside down. Paws outstretched.

image: Otis — black cat of magic — lovingly gazing at me with golden eyes while lying upside down. Paws outstretched.

image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table

image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table

 image: Otis, the black wonder cat, steps into the frame of my crystal collection

image: Otis, the black wonder cat, steps into the frame of my crystal collection

image: Otis' paws walk through my crystal arrangement on the kitchen table

image: Otis' paws walk through my crystal arrangement on the kitchen table

image: grouping of citrine, amethyst, and celestite glowing in the sunshine-washed windowsill

image: grouping of citrine, amethyst, and celestite glowing in the sunshine-washed windowsill

image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.

image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.

image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.

image: Otis — always insistent black cat — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.

image: Otis — always insistent black cat — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.

image: Thor — ever curious fluffy beige Manx cat of Wonder — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.

image: Thor — ever curious fluffy beige Manx cat of Wonder — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.

image: Thor bravely places his white-mittened beige paw on the windowsill gathering of sand dollars.

image: Thor bravely places his white-mittened beige paw on the windowsill gathering of sand dollars.

image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..

image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..

image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.

image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.

image: Otis looking very cute as he lays upside down on my bed, gazing at me.

image: Otis looking very cute as he lays upside down on my bed, gazing at me.

image: Otis expectantly gazing at me from his cat tree perch.

image: Otis expectantly gazing at me from his cat tree perch.

 image: Penguin — running forward on an icy tundra — skids to a stop.

image: Penguin — running forward on an icy tundra — skids to a stop.

image: Group of penguins on tundra running away

image: Group of penguins on tundra running away

 image: Penguin — running forward on an icy tundra — skids to a stop.

image: Penguin — running forward on an icy tundra — skids to a stop.

Thanks for your patience

Thanks for your patience

Northwestern Mutual

Northwestern Mutual

Design Systems are ALWAYS the hotness image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.

Design Systems are ALWAYS the hotness image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.

image: Visual of the various intersecting parts of a design system.

image: Visual of the various intersecting parts of a design system.

image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success

image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success

Design-systems are a Carnival!

Design-systems are a Carnival!

image: Mannequin wearing Bauta mask adorned with navy Tabarro

image: Mannequin wearing Bauta mask adorned with navy Tabarro

image: Mannequin wearing plague doctor mask in muted purple costume

image: Mannequin wearing plague doctor mask in muted purple costume

image: A crowd of Jester masks hanging in a Venetian vendor's market

image: A crowd of Jester masks hanging in a Venetian vendor's market

image: Rows of brightly-colored porcelain masks handing on a Venetian market wall

image: Rows of brightly-colored porcelain masks handing on a Venetian market wall

image: A group of very elaborate and detailed bespoke masquerade art pieces in a Venetian gallery

image: A group of very elaborate and detailed bespoke masquerade art pieces in a Venetian gallery

image: Four tiny jester mask magnets hanging in a Venetian shop doorway

image: Four tiny jester mask magnets hanging in a Venetian shop doorway

image: a white red and orange painted paper mache mask with ribbon ties on a paint-spattered newspapered table

image: a white red and orange painted paper mache mask with ribbon ties on a paint-spattered newspapered table

image: a person wearing a Jester mask smiling

image: a person wearing a Jester mask smiling

image:  A gathering of people in 18th century costume dancing at the Giacoma Casanova Carnival

image: A gathering of people in 18th century costume dancing at the Giacoma Casanova Carnival

image: man walking through a corridor wearing a Baùta and Tabarro

image: man walking through a corridor wearing a Baùta and Tabarro

image: red-haired woman wearing a small oval mask, made of Velvet, which is held with the mouth thanks to a button.

image: red-haired woman wearing a small oval mask, made of Velvet, which is held with the mouth thanks to a button.

image: man and woman in 18th-century costume wearing cat masks

image: man and woman in 18th-century costume wearing cat masks

image: A man in a Harlequin mask surrounded by two surprised woman and an amused man in 19th-century clothing

image: A man in a Harlequin mask surrounded by two surprised woman and an amused man in 19th-century clothing

image: Venetians row during the Carnival masquerade parade on the Venetian Grand Canal.

image: Venetians row during the Carnival masquerade parade on the Venetian Grand Canal.

Why accessible components?

Why accessible components?

Our users are diverse

Our users are diverse

One pattern, many uses

One pattern, many uses

Primitive masks

Primitive masks

Anatomy of a disclosure widget

Anatomy of a disclosure widget

A button that opens and closes a sibling container and returns focus to the button

A button that opens and closes a sibling container and returns focus to the button

Primary keyboard interactions

Primary keyboard interactions

<button />

<button />

&lt;button&gt;

<button>

ARIA support

ARIA support

State &amp; click handlers

State & click handlers

Focus management

Focus management

CSS focus states

CSS focus states

Mouse click management

Mouse click management

Toggle tips

Toggle tips

Toggle tips are NOT Tooltips

Toggle tips are NOT Tooltips

Toggletips

Toggletips

Toggle tips

Toggle tips

Toggle tips

Toggle tips

Many pretty masks

Many pretty masks

Icons Informative or decorative

Icons Informative or decorative

What does an icon mean, anyway?

What does an icon mean, anyway?

Pair icons with text …when possible

Pair icons with text …when possible

image: a heart and star icon, each labeled as &quot;favorite&quot;

image: a heart and star icon, each labeled as "favorite"

Toggle tip

Toggle tip

ToggleSearch

ToggleSearch

Targeted focus management

Targeted focus management

Embedded search widget

Embedded search widget

Menu lists

Menu lists

Demo

Demo

image: brown squirrel sitting on a picnic table, shouting with outstretched paws

image: brown squirrel sitting on a picnic table, shouting with outstretched paws

image: Shrimp and lime jello mold, plated with apple slices

image: Shrimp and lime jello mold, plated with apple slices

image: Red squirrel with one paw outstretched in a &quot;please stop!&quot; gesture

image: Red squirrel with one paw outstretched in a "please stop!" gesture

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

Wrap-up

Wrap-up

Design-systems are a Carnival!

Design-systems are a Carnival!

Our users are diverse

Our users are diverse

image: Red squirrel with one paw outstretched in a &quot;please stop!&quot; gesture

image: Red squirrel with one paw outstretched in a "please stop!" gesture

image: Shrimp and lime jello mold, plated with apple slices

image: Shrimp and lime jello mold, plated with apple slices

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

 image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.

image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.

Thank you.

Thank you.

https://noti.st/resource11/

https://noti.st/resource11/

Design System components are like guests at the Venetian Carnival — enjoying the festivities, and attending the Masquerade Balls. One guest in particular — the dropdown widget — is powerful yet elusive, and is known for wearing many distinct masks including the tooltip, dropdown, popover menus, and more. Their appearance at the party turns a simple masquerade into a Grand Ball.

In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many, and give your component library access to the most exclusive of Carnival attractions.

Buzz and feedback

Here’s what was said about this presentation on social media.