Design-Name - Accessible-Name Dictionary

dictionary.md

Design Name	Accessible Name	Code Example	Reference Materials	Notes
Floating action button (fab)	Button	<button>		don't give it a tabindex higher than zero
Slider	Input, Range	<input type='range'/>
Switch	Checkbox	<input type="checkbox">
Breadcrumb	Link	<a href="some-step">
Stepper	there isn't one			focus on describing the experience and make the step contents semantic, maybe use anchor links
Tabs	ARIA Tabpanel, Tablist, Tab		Tabs example
Card	doesn't exist			focus on making its content semantic, and if it's a list of cards, make sure the list is semantic and parsable, or use article if it makes sense
Accordion	doesn't exist		Accordion example	focus on making its content semantic and navigable
Progress-bar	doesn't exist			just give the user periodic text updates on their progress
Modal	Dialog	aria-role="dialog"
Snackbar	Alert, Dialog, Alertdialog	aria-role="alert", aria-role="dialog", aria-role="alertdialog"
Avatar	Button, Image	<button>, <img>
Badge	Text			it's just text, if attached to an icon, just make it an aria-describedby
Chip	Text, Button	<button>		if clickable - button, if static - text
Pill	Text, Button	<button>		if clickable - button, if static - text
Tooltip	Title, ARIA	title, aria-describedby	Tooltip example	title or just use text via aria-describedby
Popper	Select	<select>
Popover	Dialog	aria-role="dialog"
Toggle button	Button, Radiobutton	<button>, <input type="radio">
Carousel	doesn't exist, ARIA region	<li>	Carousel example	ensure items are in a navigable list
Jumbotron	doesn't exist	<section>
Bottomsheet	Dialog	aria-role="dialog"
Actionsheet	Dialog	aria-role="dialog"
Context-menu	Select	<select>
Datepicker	Select, Input	<select>, <input type="date">
Picker	Select	<select>
Segmented control	Radiobutton	<input type="radio">
Divider	Horizontal line	<hr/>		decorative, so maybe hide from screen reader
Dropdown	Select	<select>
Expansion panel	doesn't exist			focus on making its content semantic and navigable
Hero section	doesn't exist	<section>
Combobox	Input, ARIA Combobox	<input>, role="combobox"	Combobox example