{"id":13761421,"url":"https://github.com/ianmcburnie/bones","last_synced_at":"2026-01-28T00:35:39.249Z","repository":{"id":27096200,"uuid":"30563423","full_name":"ianmcburnie/bones","owner":"ianmcburnie","description":"Accessible HTML code patterns for common UI widgets such as tabs, menus, dialogs, etc.","archived":false,"fork":false,"pushed_at":"2024-06-07T16:51:35.000Z","size":72,"stargazers_count":87,"open_issues_count":0,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-13T03:12:17.567Z","etag":null,"topics":["a11y","accessibility","html"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ianmcburnie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-02-09T22:58:31.000Z","updated_at":"2024-12-24T15:07:42.000Z","dependencies_parsed_at":"2024-08-03T13:18:20.563Z","dependency_job_id":null,"html_url":"https://github.com/ianmcburnie/bones","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmcburnie%2Fbones","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmcburnie%2Fbones/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmcburnie%2Fbones/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianmcburnie%2Fbones/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianmcburnie","download_url":"https://codeload.github.com/ianmcburnie/bones/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241533644,"owners_count":19977826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","html"],"created_at":"2024-08-03T13:01:54.029Z","updated_at":"2026-01-28T00:35:39.233Z","avatar_url":"https://github.com/ianmcburnie.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# BONES\n\n\u003e Widgets are stronger with bones. Does *your* widget have bones?\n\n## Contents\n\n1. [Introduction](#user-content-introduction)\n1. [Accordion](#user-content-accordion)\n1. [Alert Dialog](#user-content-alert-dialog)\n1. [Breadcrumbs](#user-content-breadcrumbs)\n1. [Carousel](#user-content-carousel)\n1. [Checkbox](#user-content-checkbox)\n1. [Combobox](#user-content-combobox)\n1. [Confirm Dialog](#user-content-confirm-dialog)\n1. [Details](#user-content-details)\n1. [Fake Menu](#user-content-fake-menu)\n1. [Fake Tabs](#user-content-fake-tabs)\n1. [Flyout](#user-content-flyout)\n1. [Icon Button](#user-content-icon-button)\n1. [Infotip](#user-content-infotip)\n1. [Inline Notice](#user-content-inline-notice)\n1. [Input Dialog](#user-content-input-dialog)\n1. [Input Validation](#user-content-input-validation)\n1. [Lightbox Dialog](#user-content-lightbox-dialog)\n1. [Listbox](#user-content-listbox)\n1. [Listbox Button](#user-content-listbox-button)\n1. [Menu](#user-content-menu)\n1. [Menu Button](#user-content-menu-button)\n1. [Page Notice](#user-content-page-notice)\n1. [Pagination](#user-content-pagination)\n1. [Panel Dialog](#user-content-panel-dialog)\n1. [Radio](#user-content-radio)\n1. [Select](#user-content-select)\n1. [Switch](#user-content-switch)\n1. [Tabs](#user-content-tabs)\n1. [Toast Dialog](#user-content-toast-dialog)\n1. [Tooltip](#user-content-tooltip)\n1. [Tourtip](#user-content-tourtip)\n\n## Introduction\n\nBones provides lean, mean, semantic HTML markup for widgets; ensuring maximum Accessibility, SEO and Site Speed performance. Bones markup uses [ARIA](http://www.w3.org/WAI/intro/aria) only where strictly necessary.\n\nBones is not intended to be an exhaustive set of instructions for creating accessible components. The primary intention of bones is to detail the structural and semantic markup requirements. For further guidance, please visit [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns) and/or [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1).\n\nBones advocates the [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) web-design strategy; building the web in a layered fashion that allows **everyone** to access the **most important** content and functionality.\n\nBones favors the the [BEM](http://getbem.com) (block, element, modifier) methodology and naming convention.\n\n## [Accordion](https://ebay.gitbooks.io/mindpatterns/content/disclosure/accordion.html)\n\nThe accordion is simply a list of [details](#user-content-details) widgets. Each details summary should include a relevant heading-level tag.\n\n```html\n\u003cul class=\"accordion\" role=\"list\" aria-roledescription=\"accordion\"\u003e\n    \u003cli\u003e\n        \u003cdetails class=\"details\"\u003e\n            \u003csummary\u003e\u003ch3\u003ePanel 1\u003c/h3\u003e\u003c/summary\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 3\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/details\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cdetails class=\"details\"\u003e\n            \u003csummary\u003e\u003ch3\u003ePanel 2\u003c/h3\u003e\u003c/summary\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eItem 3\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/details\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## [Alert Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/alert-dialog.html)\n\nA [lightbox dialog](#user-content-lightbox-dialog) with a single button to acknowledge the alert content.\n\nTry to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.\n\n```html\n\u003cbody\u003e\n    \u003cdiv\u003e\n        \u003c!-- main page content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"alert-dialog\" role=\"alertdialog\" aria-labelledby=\"alert-dialog-title\" aria-modal=\"true\" hidden\u003e\n        \u003cdiv class=\"alert-dialog__window\"\u003e\n            \u003cdiv class=\"alert-dialog__header\"\u003e\n                \u003ch2 class=\"alert-dialog__title\" id=\"dialog-title\"\u003eAlert Dialog Title\u003c/h2\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"alert-dialog__main\"\u003e\n                \u003c!-- alert dialog content goes here --\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"alert-dialog__footer\"\u003e\n                \u003cbutton class=\"alert-dialog__acknowledge\" type=\"button\"\u003eOK\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n## [Breadcrumbs](https://ebay.gitbooks.io/mindpatterns/content/navigation/breadcrumbs.html)\n\nThe content is an ordered list of links inside a navigation landmark region.\n\n```html\n\u003cnav class=\"breadcrumbs\" aria-labelledby=\"breadcrumbs_heading\" role=\"navigation\"\u003e\n    \u003ch2 class=\"clipped\" id=\"breadcrumbs_heading\"\u003eYou are here\u003c/h2\u003e\n    \u003col\u003e\n        \u003cli\u003e\n            \u003ca href=\"http://www.ebay.com\"\u003eGreat Grandparent Page\u003c/a\u003e\n            \u003csvg focusable=\"false\" height=\"10\" width=\"10\" aria-hidden=\"true\"\u003e\n                \u003cuse xlink:href=\"#icon-breadcrumb\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"http://www.ebay.com\"\u003eGrandparent Page\u003c/a\u003e\n            \u003csvg focusable=\"false\" height=\"10\" width=\"10\" aria-hidden=\"true\"\u003e\n                \u003cuse xlink:href=\"#icon-breadcrumb\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"http://www.ebay.com\"\u003eParent Page\u003c/a\u003e\n            \u003csvg focusable=\"false\" height=\"10\" width=\"10\" aria-hidden=\"true\"\u003e\n                \u003cuse xlink:href=\"#icon-breadcrumb\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca aria-current=\"page\"\u003eCurrent Page\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ol\u003e\n\u003c/nav\u003e\n```\n\nWhile CSS can be used to generate a separator image or glyph using the `::after` pseudo element, we find that inline SVG offers a more accessible and flexible approach.\n\n## [Carousel](https://ebay.gitbooks.io/mindpatterns/content/disclosure/carousel.html)\n\nA carousel is a list of items. These items may contain anything - text, images, links, tiles, cards, etc. - but each item is responsible for managing its own markup and accessibility (e.g. tab-order, semantics, etc).\n\n```html\n\u003cdiv class=\"carousel\" role=\"group\" aria-labelledby=\"carousel-title\" aria-roledescription=\"carousel\"\u003e\n    \u003cbutton aria-label=\"Previous slide\"\u003e\n        \u003c!-- SVG icon --\u003e\n    \u003c/button\u003e\n    \u003cul\u003e\n        \u003c!-- onscreen items --\u003e\n        \u003cli aria-hidden=\"false\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"false\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"false\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"false\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"false\"\u003e...\u003c/li\u003e\n        \u003c!-- offscreen items --\u003e\n        \u003cli aria-hidden=\"true\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"true\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"true\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"true\"\u003e...\u003c/li\u003e\n        \u003cli aria-hidden=\"true\"\u003e...\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cbutton aria-label=\"Next slide\"\u003e\n        \u003c!-- SVG icon --\u003e\n    \u003c/button\u003e\n\u003c/div\u003e\n```\n\nJavaScript must maintain the tabindex and aria-hidden state of items as they scroll in and out of view.\n\n## [Checkbox](https://ebay.gitbooks.io/mindpatterns/content/input/checkbox.html)\n\nNative HTML checkboxes are 100% accessible by default.\n\nTo ensure correct grouping semantics, checkboxes should be placed inside of a fieldset with legend.\n\n```html\n\u003cfieldset\u003e\n    \u003clegend\u003eAuction Type\u003c/legend\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"freeshipping\" type=\"checkbox\" name=\"freeshipping\" /\u003e\n        \u003clabel for=\"freeshipping\"\u003eFree Shipping\u003c/label\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"endssoon\" type=\"checkbox\" name=\"endssoon\" /\u003e\n        \u003clabel for=\"endssoon\"\u003eEnds soon\u003c/label\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"zerobids\" type=\"checkbox\" name=\"zerobids\" /\u003e\n        \u003clabel for=\"zerobids\"\u003eZero bids\u003c/label\u003e\n    \u003c/span\u003e\n\u003c/fieldset\u003e\n```\n\nFor vertically stacked checkboxes, simply switch the spans to divs.\n\n### Custom Checkbox Icon\n\nA foreground SVG, combined with CSS, can be used as a facade over the real checkbox.\n\n```html\n\u003cspan class=\"checkbox\"\u003e\n    \u003cinput class=\"checkbox__control\" id=\"freeshipping\" type=\"checkbox\" name=\"freeshipping\" /\u003e\n    \u003cspan class=\"checkbox__icon\" hidden\u003e\n        \u003csvg aria-hidden=\"true\" class=\"checkbox__unchecked\" focusable=\"false\"\u003e\n            \u003cuse xlink:href=\"#icon-checkbox-unchecked\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n        \u003csvg aria-hidden=\"true\" class=\"checkbox__checked\" focusable=\"false\"\u003e\n            \u003cuse xlink:href=\"#icon-checkbox-checked\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/span\u003e\n\u003c/span\u003e\n```\n\nThis markup assumes that the symbol definitions for `#icon-checkbox-unchecked` and `#icon-checkbox-checked` exist on the page. The hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property should be over-ridden by CSS.\n\n## [Combobox](https://ebay.gitbooks.io/mindpatterns/content/input/combobox.html)\n\nA textbox plus listbox combination.\n\n### Collapsed State\n\n```html\n\u003cdiv class=\"combobox\" id=\"combobox-1\"\u003e\n    \u003cspan class=\"combobox__control\"\u003e\n        \u003cinput name=\"combobox-1-name\" type=\"text\" role=\"combobox\" autocomplete=\"off\" aria-expanded=\"false\" aria-owns=\"combobox-1-listbox\" /\u003e\n    \u003c/span\u003e\n    \u003cdiv class=\"combobox__overlay\"\u003e\n        \u003cul id=\"combobox-1-listbox\" role=\"listbox\"\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-1\"\u003eOption 1\u003c/li\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-2\"\u003eOption 2\u003c/li\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-3\"\u003eOption 3\u003c/li\u003e\n            ...\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Expanded State\n\n```html\n\u003cdiv class=\"combobox combobox--expanded\" id=\"combobox-1\"\u003e\n    \u003cspan class=\"combobox__control\"\u003e\n        \u003cinput name=\"combobox-1-name\" type=\"text\" role=\"combobox\" autocomplete=\"off\" aria-expanded=\"true\" aria-owns=\"combobox-1-listbox\" /\u003e\n    \u003c/span\u003e\n    \u003cdiv class=\"combobox__overlay\"\u003e\n        \u003cul id=\"combobox-1-listbox\" role=\"listbox\"\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-1\"\u003eOption 1\u003c/li\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-2\"\u003eOption 2\u003c/li\u003e\n            \u003cli role=\"option\" id=\"combobox-1-option-3\"\u003eOption 3\u003c/li\u003e\n            ...\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nJavaScript must update the `aria-activedescendant` attribute on the textbox to reflect the state of the currently active descendant listbox item.\n\n## [Confirm Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/confirm-dialog.html)\n\nA [lightbox dialog](#user-content-lightbox-dialog) with buttons to cancel or confirm an action.\n\nTry to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.\n\n```html\n\u003cbody\u003e\n    \u003cdiv\u003e\n        \u003c!-- main page content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"confirm-dialog\" role=\"dialog\" aria-labelledby=\"confirm-dialog-title\" aria-modal=\"true\" hidden\u003e\n        \u003cdiv class=\"confirm-dialog__window\"\u003e\n            \u003cdiv class=\"confirm-dialog__header\"\u003e\n                \u003ch2 class=\"confirm-dialog__title\" id=\"confirm-dialog-title\"\u003eConfirm Dialog Title\u003c/h2\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"confirm-dialog__main\"\u003e\n                \u003c!-- confirm dialog content goes here --\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"confirm-dialog__footer\"\u003e\n                \u003cbutton class=\"confirm-dialog__cancel\" type=\"button\"\u003eCancel\u003c/button\u003e\n                \u003cbutton class=\"confirm-dialog__confirm\" type=\"button\"\u003eOK\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n## [Details](https://ebay.gitbooks.io/mindpatterns/content/disclosure/details.html)\n\nUses the native HTML `\u003cdetails\u003e` tag.\n\n```html\n\u003cdetails class=\"details\"\u003e\n    \u003csummary\u003eDetails\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eLink 1\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eLink 2\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"http://www.ebay.com\"\u003eLink 3\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/details\u003e\n```\n\n## [Fake Menu](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-menu.html)\n\nA fake menu is styled like a regular menu, but it contains a list of links and/or buttons instead of menu items.\n\n```html\n\u003cul\u003e\n    \u003cli\u003e\n        \u003ca href=\"http://www.ebay.com\"\u003eLink Text\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cbutton type=\"button\"\u003eButton Text\u003c/button\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"http://www.ebay.com\"\u003eLink Text\u003c/a\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nIf the `href` value of a fake menu item matches the current page url, then add `aria-current=\"page\"` to that anchor tag.\n\n## [Fake-Menu Button](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-menu-button.html)\n\nA button that opens a fake menu.\n\n```html\n\u003cdiv class=\"fake-menu\"\u003e\n    \u003cbutton aria-expanded=\"false\"\u003eFake Menu\u003c/button\u003e\n    \u003cdiv\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.ebay.com\"\u003eLink Text\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003cbutton type=\"button\"\u003eButton Text\u003c/button\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca href=\"http://www.ebay.com\"\u003eLink Text\u003c/a\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Fake Tabs](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-tabs.html)\n\nFake tabs are simply a list of links styled to look like tabs.\n\n```html\n\u003cnav aria-labelledby=\"fake-tabs-title\" class=\"fake-tabs\" role=\"navigation\"\u003e\n    \u003ch2 class=\"clipped\" id=\"fake-tabs-title\"\u003eFake Tabs Heading\u003c/h2\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ca aria-current=\"page\" href=\"http://www.ebay.com/1\"\u003ePage 1\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"http://www.ebay.com/2\"\u003ePage 2\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"http://www.ebay.com/3\"\u003ePage 3\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n## [Flyout](https://ebay.gitbooks.io/mindpatterns/content/disclosure/flyout.html)\n\nA flyout might open on click, focus or hover, on any kind of host button, input or link.\n\nFor correct reading order, and to minimize accessibility defects, the overlay element and its content should always immediately follow the host element in the DOM.\n\n```html\n\u003cdiv class=\"flyout\"\u003e\n    \u003cbutton class=\"flyout__host\" aria-expanded=\"false\"\u003eHost Button\u003c/button\u003e\n    \u003cdiv class=\"flyout__overlay\"\u003e\n        \u003c!-- overlay content --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf the overlay element cannot be immediately adjacent to the button element, then an additional class will be required for styling purposes:\n\n```html\n\u003cdiv class=\"flyout flyout--expanded\"\u003e\n    \u003cdiv\u003e\n        \u003cbutton class=\"flyout__host\" aria-expanded=\"true\"\u003eHost Button\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"flyout__overlay\"\u003e\n        \u003c!-- overlay content --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nNote that Menu Button, Listbox Button, Tooltip \u0026 Combobox are special instances of flyouts, but follow the same general pattern and rules.\n\n## [Icon Button](https://ebay.gitbooks.io/mindpatterns/content/input/icon-button.html)\n\nUsing a hamburger menu as an example, for button behaviour:\n\n```html\n\u003cbutton class=\"icon-btn\" type=\"button\" aria-label=\"Menu\"\u003e\n    \u003csvg class=\"icon icon--menu\" focusable=\"false\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\n        \u003cuse xlink:href=\"icons.svg#icon-menu\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n\u003c/button\u003e\n```\n\nFor link behaviour:\n\n```html\n\u003ca class=\"icon-link\" href=\"http://www.ebay.com\" aria-label=\"Menu\"\u003e\n    \u003csvg class=\"icon icon--menu\" focusable=\"false\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\n        \u003cuse xlink:href=\"icons.svg#icon-menu\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n\u003c/a\u003e\n```\n\n## [Infotip](https://ebay.gitbooks.io/mindpatterns/content/disclosure/infotip.html)\n\nAn infotip is expanded and visible on click event of host element.\n\nInfotip is a specific type of [flyout](#user-content-flyout). The markup becomes a little more convoluted due to the presence of a visual \"pointer\". This additional markup allows enough hooks for styling \u0026 masking with CSS.\n\n```html\n\u003cspan class=\"infotip\"\u003e\n    \u003cbutton class=\"infotip__host\" type=\"button\" aria-expanded=\"false\" aria-label=\"Help\"\u003e\n        \u003csvg focusable=\"false\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\n            \u003cuse xlink:href=\"#icon-information-small\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"infotip__overlay\"\u003e\n        \u003cspan class=\"infotip__pointer infotip__pointer--bottom-center\"\u003e\u003c/span\u003e\n        \u003cdiv class=\"infotip__mask\"\u003e\n            \u003cdiv class=\"infotip__cell\"\u003e\n                \u003cdiv class=\"infotip__content\"\u003e\n                    \u003ch3 class=\"infotip__heading\"\u003eInfotip Title\u003c/h3\u003e\n                    \u003c!-- content --\u003e\n                \u003c/div\u003e\n                \u003cbutton class=\"infotip__close\" type=\"button\" aria-label=\"Dismiss infotip\"\u003e\n                    \u003csvg focusable=\"false\" height=\"24\" width=\"24\" aria-hidden=\"true\"\u003e\n                        \u003cuse xlink:href=\"#icon-close\"\u003e\u003c/use\u003e\n                    \u003c/svg\u003e\n                \u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/span\u003e\n```\n\n## [Inline-Notice](https://ebay.gitbooks.io/mindpatterns/content/messaging/inline-notice.html)\n\nIf the inline notice is rendered or updated on the client, wrap it within a [live-region](https://ebay.gitbook.io/mindpatterns/techniques/live-region) element.\n\n```html\n\u003cdiv class=\"inline-notice inline-notice--confirmation\"\u003e\n    \u003cspan class=\"inline-notice__header\"\u003e\n        \u003csvg focusable=\"false\" class=\"icon icon--confirmation-filled\" height=\"16\" width=\"16\" role=\"img\" aria-label=\"Confirmation\"\u003e\n            \u003cuse xlink:href=\"#icon-confirmation-filled\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/span\u003e\n    \u003cspan class=\"inline-notice__main\"\u003e\n        \u003cp\u003eNotice Copy\u003c/p\u003e\n    \u003c/span\u003e\n\u003c/div\u003e\n```\n\n## [Input Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/input-dialog.html)\n\nA [lightbox dialog](#user-content-lightbox-dialog) with one or more form inputs.\n\nTry to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.\n\n```html\n\u003cbody\u003e\n    \u003cdiv\u003e\n        \u003c!-- main page content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-dialog\" role=\"dialog\" aria-labelledby=\"input-dialog-title\" aria-modal=\"true\"\u003e\n        \u003cdiv class=\"input-dialog__window\"\u003e\n            \u003cdiv class=\"input-dialog__header\"\u003e\n                \u003ch2 class=\"input-dialog__title\" id=\"input-dialog-title\"\u003eInput Dialog Title\u003c/h2\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"input-dialog__main\"\u003e\n                \u003clabel for=\"foo\"\u003eInput Label\u003c/label\u003e\n                \u003cinput id=\"foo\" type=\"text\" name=\"foo\" /\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"input-dialog__footer\"\u003e\n                \u003cbutton class=\"input-dialog__cancel\" type=\"button\"\u003eCancel\u003c/button\u003e\n                \u003cbutton class=\"input-dialog__submit\" type=\"button\"\u003eSubmit\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n## [Input Validation](https://ebay.gitbooks.io/mindpatterns/content/messaging/input-validation.html)\n\nInput validation messages rendered on the client are considered an *enhancement* to full, server-side form validation.\n\n### Valid State\n\nThe error message container is a live-region, and can be primed and ready in the server-side code, or injected dynamically at error-time with client-side JavaScript.\n\n```html\n\u003cdiv class=\"input-validation\"\u003e\n    \u003cspan\u003e\n        \u003clabel for=\"input1\"\u003eInput 1\u003c/label\u003e\n        \u003cinput aria-describedby=\"input1-description\" aria-invalid=\"false\" id=\"input1\" name=\"input1\" type=\"text\" /\u003e\n    \u003c/span\u003e\n    \u003cspan aria-live=\"polite\" class=\"input-validation__status\" role=\"status\"\u003e\n        \u003cspan class=\"input-validation__description\" id=\"input1-description\" \u003e\n            \u003c!-- this content should be empty in a valid state, populated in an invalid state --\u003e\n        \u003c/span\u003e\n    \u003c/span\u003e\n\u003c/div\u003e\n```\n\nFor Voiceover to correctly detect live-region updates, the updates must happen on direct-descendant(s) of the live-region, not on the live-region itself.\n\n### Invalid State\n\nChanging the content of a directly-descendant element will trigger a live-region update.\n\n```html\n\u003cdiv class=\"input-validation\"\u003e\n    \u003cspan\u003e\n        \u003clabel for=\"input1\"\u003eInput 1\u003c/label\u003e\n        \u003cinput aria-describedby=\"input1-description\" aria-invalid=\"true\" id=\"input1\" name=\"input1\" type=\"text\" /\u003e\n    \u003c/span\u003e\n    \u003cspan aria-live=\"polite\" class=\"input-validation__status\" role=\"status\"\u003e\n        \u003cspan class=\"input-validation__description\" id=\"input1-description\"\u003e\n            \u003c!-- this content should be empty in a valid state, populated in an invalid state --\u003e\n        \u003c/span\u003e\n    \u003c/span\u003e\n\u003c/div\u003e\n```\n\nNotice that the `aria-described` attribute supplements the live-region, by using the same live-region content as a *description* for the input.\n\n## [Lightbox Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/lightbox-dialog.html)\n\nA lightbox dialog is always modal. Other types of lightbox dialog include: [alert dialog](#user-content-alert-dialog), [confirm dialog](#user-content-confirm-dialog) \u0026 [input dialog](#user-content-input-dialog).\n\nTry to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.\n\n```html\n\u003cdiv class=\"lightbox-dialog\" role=\"dialog\" aria-labelledby=\"lightbox-dialog-title\" aria-modal=\"true\"\u003e\n    \u003cdiv class=\"lightbox-dialog__window\"\u003e\n        \u003cdiv class=\"lightbox-dialog__header\"\u003e\n            \u003ch2 class=\"lightbox-dialog__title\" id=\"lightbox-dialog-title\"\u003eDialog Title\u003c/h2\u003e\n            \u003cbutton aria-label=\"Close dialog\" class=\"lightbox-dialog__close\" type=\"button\"\u003e\u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"lightbox-dialog__main\"\u003e\n            \u003c!-- lightbox dialog content goes here --\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Listbox](https://ebay.gitbooks.io/mindpatterns/content/input/listbox.html)\n\nThe listbox pattern is intended as a JavaScript alternative to the `multiselect` state of the HTML select.\n\n```html\n\u003cspan class=\"listbox\"\u003e\n    \u003cdiv role=\"listbox\" tabindex=\"0\"\u003e\n        \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n            \u003cspan\u003eOption 1\u003c/span\u003e\n            \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n            \u003cspan\u003eOption 2\u003c/span\u003e\n            \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n            \u003cspan\u003eOption 3\u003c/span\u003e\n            \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/span\u003e\n```\n\nWhen a single-select listbox receives focus for the first time, the first option should be selected if the user does not specify a selection.\n\nAn initial selection can be specified by applying the `aria-selected` state to one or more options.\n\n## [Listbox Button](https://ebay.gitbooks.io/mindpatterns/content/input/listbox-button.html)\n\nOpens a [listbox](#user-content-listbox) via a host button.\n\n```html\n\u003cspan class=\"listbox-button\"\u003e\n    \u003cbutton class=\"listbox-button__button\" aria-expanded=\"false\" aria-haspopup=\"listbox\"\u003e\n        \u003cspan\u003e\n            \u003cspan\u003eOption 1\u003c/span\u003e\n            \u003cspan class=\"listbox-button__icon-expand\"\u003e\u003c/span\u003e\n        \u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"listbox-button__listbox\" hidden\u003e\n        \u003cdiv role=\"listbox\" tabindex=\"0\"\u003e\n            \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n                \u003cspan\u003eOption 1\u003c/span\u003e\n                \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n                \u003cspan\u003eOption 2\u003c/span\u003e\n                \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"listbox__option\" role=\"option\"\u003e\n                \u003cspan\u003eOption 3\u003c/span\u003e\n                \u003cspan class=\"listbox__status\"\u003e\u003c/span\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/span\u003e\n```\n\n## [Menu](https://ebay.gitbooks.io/mindpatterns/content/input/menu.html)\n\nA menu contains one or more groups of commands (`menuitem`, `menuitemradio`, or `menuitemcheckbox`) that execute JavaScript.\n\n### Single Group\n\n```html\n\u003cdiv class=\"menu\"\u003e\n    \u003cdiv role=\"menu\"\u003e\n        \u003cdiv role=\"menuitem\" tabindex=\"0\"\u003eButton 1\u003c/div\u003e\n        \u003cdiv role=\"menuitem\" tabindex=\"-1\"\u003eButton 2\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Multiple Groups\n\n```html\n\u003cdiv class=\"menu\"\u003e\n    \u003cdiv role=\"menu\"\u003e\n        \u003cdiv role=\"presentation\"\u003e\n            \u003cdiv role=\"menuitem\" tabindex=\"0\"\u003eButton 1\u003c/div\u003e\n            \u003cdiv role=\"menuitem\" tabindex=\"-1\"\u003eButton 2\u003c/div\u003e\n        \u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv role=\"presentation\"\u003e\n            \u003cdiv aria-checked=\"true\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 1\u003c/div\u003e\n            \u003cdiv aria-checked=\"false\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 2 \u003c/div\u003e\n            \u003cdiv aria-checked=\"false\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 3\u003c/div\u003e\n        \u003c/div\u003e\n        \u003chr /\u003e\n        \u003cdiv role=\"presentation\"\u003e\n            \u003cdiv aria-checked=\"true\" role=\"menuitemcheckbox\" tabindex=\"-1\"\u003eCheckbox 1\u003c/div\u003e\n            \u003cdiv aria-checked=\"true\" role=\"menuitemcheckbox\"  tabindex=\"-1\"\u003eCheckbox 2\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Menu Button](https://ebay.gitbooks.io/mindpatterns/content/input/menu-button.html)\n\nA menu button opens a [menu](#user-content-menu) in a [flyout](#user-content-flyout).\n\n```html\n\u003cdiv class=\"menu-button\"\u003e\n    \u003cbutton aria-expanded=\"false\" aria-haspopup=\"true\" class=\"menu-button__button\"\u003e\n        \u003cspan\u003e\n            \u003cspan\u003eOpen Menu\u003c/span\u003e\n            \u003cspan class=\"menu-button__icon-expand\"\u003e\u003c/span\u003e\n        \u003c/span\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"menu-button__menu\" hidden\u003e\n        \u003cdiv role=\"menu\"\u003e\n            \u003cdiv role=\"presentation\"\u003e\n                \u003cdiv role=\"menuitem\" tabindex=\"0\"\u003eButton 1\u003c/div\u003e\n                \u003cdiv role=\"menuitem\" tabindex=\"-1\"\u003eButton 2\u003c/div\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv role=\"presentation\"\u003e\n                \u003cdiv aria-checked=\"true\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 1 (checked)\u003c/div\u003e\n                \u003cdiv aria-checked=\"false\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 2 \u003c/div\u003e\n                \u003cdiv aria-checked=\"false\" role=\"menuitemradio\" tabindex=\"-1\"\u003eRadio Button 3\u003c/div\u003e\n            \u003c/div\u003e\n            \u003chr /\u003e\n            \u003cdiv role=\"presentation\"\u003e\n                \u003cdiv aria-checked=\"true\" role=\"menuitemcheckbox\" tabindex=\"-1\"\u003eCheckbox 1 (checked)\u003c/div\u003e\n                \u003cdiv aria-checked=\"true\" role=\"menuitemcheckbox\"  tabindex=\"-1\"\u003eCheckbox 2 (checked)\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Page Notice](http://ianmcburnie.github.io/mindpatterns/messaging/page-notice/)\n\nPage notices are common and prominent visual landmarks on any website. A labelled landmark element (i.e. `\u003csection\u003e`) increases affordance for assistive technology.\n\nA live-region ensure dynamic updates on the client are picked up by assistive technology. This live-region can be removed or set to \"off\" if the page notice is only ever rendered once on the server without any further client-side changes or updates.\n\n```html\n\u003cspan aria-live=\"polite\"\u003e\n    \u003csection class=\"page-notice page-notice--information\" role=\"region\" aria-label=\"Information\"\u003e\n        \u003cdiv class=\"page-notice__header\"\u003e\n            \u003csvg focusable=\"false\" height=\"24\" width=\"24\" role=\"img\" aria-label=\"Information\"\u003e\n                \u003cuse xlink:href=\"#icon-information\"\u003e\u003c/use\u003e\n            \u003c/svg\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"page-notice__main\"\u003e\n            \u003ch2 class=\"page-notice__title\"\u003eTitle\u003c/h2\u003e\n            \u003cp\u003eCopy\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"page-notice__footer\"\u003e\n            \u003ca href=\"https://www.ebay.com\" class=\"page-notice__cta\"\u003eCall to action\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\u003c/span\u003e\n```\n\n## [Pagination](http://ianmcburnie.github.io/mindpatterns/pagination/)\n\nPagination is an important means of site navigation. A labelled landmark element (i.e. `\u003cnav\u003e`) increases affordance for assistive technology.\n\n```html\n\u003cnav class=\"pagination\" aria-labelledby=\"pagination-heading\" role=\"navigation\"\u003e\n    \u003cspan aria-live=\"off\"\u003e\n        \u003ch2 id=\"pagination-heading\" class=\"clipped\"\u003eResults Pagination - Page 1\u003c/h2\u003e\n    \u003c/span\u003e\n    \u003ca aria-disabled=\"true\" aria-label=\"Previous Page\" class=\"pagination__previous\" href=\"1.html\"\u003e\n        \u003csvg aria-hidden=\"true\"\u003e\n            \u003cuse xlink:href=\"#icon-chevron-light-left\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/a\u003e\n    \u003col\u003e\n        \u003cli\u003e\n            \u003ca aria-current=\"page\" href=\"1.html\"\u003e1\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"2.html\"\u003e2\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"3.html\"\u003e3\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ol\u003e\n    \u003ca aria-label=\"Next Page\" class=\"pagination__next\" href=\"2.html\"\u003e\n        \u003csvg aria-hidden=\"true\"\u003e\n            \u003cuse xlink:href=\"#icon-chevron-light-right\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/a\u003e\n\u003c/nav\u003e\n```\n\n**NOTE:** The ARIA live-region need only be enabled (set from \"off\" to \"polite\") if client-side pagination is implemented.\n\n## [Panel Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/panel-dialog.html)\n\nA modal dialog that sits flush to one side of the screen.\n\nTry to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.\n\n```html\n\u003cdiv aria-labelledby=\"dialog-title\" aria-modal=\"true\" class=\"panel-dialog\" hidden id=\"dialog-left-panel-0\" role=\"dialog\"\u003e\n    \u003cdiv class=\"panel-dialog__window\"\u003e\n        \u003cdiv class=\"panel-dialog__header\"\u003e\n            \u003ch2 id=\"dialog-title\" class=\"panel-dialog__title\"\u003ePanel Dialog Title\u003c/h2\u003e\n            \u003cbutton aria-label=\"Close dialog\" class=\"icon-btn panel-dialog__close\" type=\"button\"\u003e\n                \u003csvg aria-hidden=\"true\" class=\"icon icon--close\" focusable=\"false\" height=\"16\" width=\"16\"\u003e\n                    \u003cuse xlink:href=\"#icon-close\"\u003e\u003c/use\u003e\n                \u003c/svg\u003e\n            \u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"panel-dialog__main\"\u003e\n            \u003c!-- content --\u003e\n        \u003c/div\u003e\n        \u003c!-- optional --\u003e\n        \u003cdiv class=\"panel-dialog__footer\"\u003e\n            \u003c!-- content --\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Radio](https://ebay.gitbooks.io/mindpatterns/content/input/radio.html)\n\nNative HTML radio buttons are 100% accessible by default.\n\nTo ensure correct grouping semantics, radio buttons should be placed inside of a fieldset with legend.\n\n```html\n\u003cfieldset\u003e\n    \u003clegend\u003eRadio Group Title\u003c/legend\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"radio-group1_input1\" name=\"radio-group1\" type=\"radio\" value=\"1\" checked /\u003e\n        \u003clabel for=\"radio-group1_input1\"\u003eInput 1\u003c/label\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"radio-group1_input2\" name=\"radio-group1\" type=\"radio\" value=\"2\" /\u003e\n        \u003clabel for=\"radio-group1_input2\"\u003eInput 2\u003c/label\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cinput id=\"radio-group1_input3\" name=\"radio-group1\" type=\"radio\" value=\"3\" /\u003e\n        \u003clabel for=\"radio-group1_input3\"\u003eInput 3\u003c/label\u003e\n    \u003c/span\u003e\n\u003c/fieldset\u003e\n```\n\nFor vertically stacked radios, simply switch the spans to divs.\n\n### Custom Radios\n\nForeground SVG can be used as a facade over the real radio.\n\n```HTML\n\u003cspan class=\"radio\" hidden\u003e\n    \u003cinput class=\"radio__control\" id=\"radio-group1_input1\" type=\"radio\" value=\"3\" name=\"radio-group-1\" /\u003e\n    \u003csvg aria-hidden=\"true\" class=\"radio__unchecked\" focusable=\"false\"\u003e\n        \u003cuse xlink:href=\"#icon-radio-unchecked\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \u003csvg aria-hidden=\"true\" class=\"radio__checked\" focusable=\"false\"\u003e\n        \u003cuse xlink:href=\"#icon-confirmation\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n\u003c/span\u003e\n```\n\nThe hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property should be overriden by CSS.\n\n## [Select](https://ebay.gitbooks.io/mindpatterns/content/input/select.html)\n\nA native HTML select is 100% accessible by default. The \"button\" can be styled with CSS; the \"dropdown\" not so much.\n\n```html\n\u003cspan class=\"select\"\u003e\n    \u003cselect name=\"options\"\u003e\n        \u003coption value=\"item1\"\u003eOption 1\u003c/option\u003e\n        \u003coption value=\"item2\"\u003eOption 2\u003c/option\u003e\n        \u003coption value=\"item3\"\u003eOption 3\u003c/option\u003e\n    \u003c/select\u003e\n    \u003csvg class=\"icon icon--dropdown\" focusable=\"false\" height=\"8\" width=\"8\" aria-hidden=\"true\"\u003e\n        \u003cuse xlink:href=\"#icon-dropdown\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n\u003c/span\u003e\n```\n\n## [Switch](https://ebay.gitbooks.io/mindpatterns/content/input/switch.html)\n\nA switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload).\n\n```html\n\u003cspan class=\"switch\"\u003e\n    \u003cspan class=\"switch__control\" role=\"switch\" tabindex=\"0\" aria-checked=\"false\"\u003e\u003c/span\u003e\n    \u003cspan class=\"switch__button\"\u003e\u003c/span\u003e\n\u003c/span\u003e\n```\n\nThe following version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead.\n\n```html\n\u003cspan class=\"switch\"\u003e\n    \u003cinput class=\"switch__control\" role=\"switch\" type=\"checkbox\" aria-checked=\"false\" /\u003e\n    \u003cspan class=\"switch__button\"\u003e\u003c/span\u003e\n\u003c/span\u003e\n```\n\n## [Tabs](https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html)\n\n```html\n\u003cdiv class=\"tabs\" id=\"tabs-1\"\u003e\n    \u003ch2 class=\"clipped\"\u003eTabs Heading\u003c/h2\u003e\n    \u003cdiv class=\"tabs__items\" role=\"tablist\"\u003e\n        \u003cdiv class=\"tabs__item\" role=\"tab\" aria-controls=\"tabs-1-panel-1\" aria-selected=\"true\" id=\"tabs1_tab1\" tabindex=\"0\"\u003e\n            \u003cspan\u003eTab 1\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"tabs__item\" role=\"tab\" aria-controls=\"tabs-1-panel-2\" aria-selected=\"false\" id=\"tabs1_tab2\" tabindex=\"-1\"\u003e\n            \u003cspan\u003eTab 2\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"tabs__item\" role=\"tab\" aria-controls=\"tabs-1-panel-3\" aria-selected=\"false\" id=\"tabs1_tab3\" tabindex=\"-1\"\u003e\n            \u003cspan\u003eTab 3\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"tabs__content\"\u003e\n        \u003cdiv aria-labelledby=\"tabs1_tab1\" class=\"tabs__panel\" role=\"tabpanel\" id=\"tabs-1-panel-1\"\u003e\n            \u003ch3\u003ePanel 1 heading\u003c/h3\u003e\n            \u003c!-- panel content --\u003e\n        \u003c/div\u003e\n        \u003cdiv aria-labelledby=\"tabs1_tab2\" class=\"tabs__panel\" role=\"tabpanel\" hidden id=\"tabs-1-panel-2\"\u003e\n            \u003ch3\u003ePanel 2 heading\u003c/h3\u003e\n            \u003c!-- panel content --\u003e\n        \u003c/div\u003e\n        \u003cdiv aria-labelledby=\"tabs1_tab3\" class=\"tabs__panel\" role=\"tabpanel\" hidden id=\"tabs-1-panel-3\"\u003e\n            \u003ch3\u003ePanel 3 heading\u003c/h3\u003e\n            \u003c!-- panel content --\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## [Toast Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/toast-dialog.html)\n\nToast dialog is non-modal and should not steal or trap keyboard focus.\n\nTry to position the dialog immediately after the currently focussed element (i.e. the `document.activeElement`) for optimal reading and tabbing order.\n\nThe live-region container should be non-hidden at server render time. Toggling the `hidden` property on the dialog will trigger the live region change.\n\n```html\n\u003cdiv role=\"status\"\u003e\n    \u003caside aria-label=\"Notification\" aria-modal=\"false\" class=\"toast-dialog\" role=\"dialog\" hidden\u003e\n        \u003cdiv class=\"toast-dialog__window\"\u003e\n            \u003cdiv class=\"toast-dialog__header\"\u003e\n                \u003ch2 class=\"toast-dialog__title\"\u003e\n                    \u003c!-- heading --\u003e\n                \u003c/h2\u003e\n                \u003cbutton class=\"toast-dialog__close\" type=\"button\" aria-label=\"Close notification dialog\"\u003e\n                    \u003csvg focusable=\"false\" height=\"24\" width=\"24\" aria-hidden=\"true\"\u003e\n                        \u003cuse xlink:href=\"#icon-close\"\u003e\u003c/use\u003e\n                    \u003c/svg\u003e\n                \u003c/button\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"toast-dialog__main\"\u003e\n                \u003c!-- content --\u003e\n            \u003c/div\u003e\n            \u003c!-- optional footer with cta --\u003e\n            \u003cdiv class=\"toast-dialog__footer\"\u003e\n                \u003ca accesskey=\"a\" class=\"toast-dialog__cta\" href=\"http://www.ebay.com\"\u003eAction\u003c/a\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/aside\u003e\n\u003c/div\u003e\n```\n\nIf using the optional footer with call-to-action link or button, the first letter of the CTA will define the `accesskey` property.\n\n## [Tooltip](https://ebay.gitbooks.io/mindpatterns/content/disclosure/tooltip.html)\n\nA tooltip is expanded and visible on hover and focus of host element.\n\nTooltip structure is almost identical to [flyout](#user-content-flyout) structure. The markup becomes a little more convoluted due to the presence of a visual \"pointer\". This additional markup allows enough hooks for styling \u0026 masking with CSS.\n\n```html\n\u003cspan class=\"tooltip\"\u003e\n    \u003cbutton class=\"tooltip__host\" aria-describedby=\"tooltip-0\" aria-expanded=\"false\" aria-label=\"Settings\"\u003e\n        \u003csvg focusable=\"false\" height=\"16\" width=\"16\" aria-hidden=\"true\"\u003e\n            \u003cuse xlink:href=\"#icon-settings\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"tooltip__overlay\" id=\"tooltip-0\" role=\"tooltip\"\u003e\n        \u003cspan class=\"tooltip__pointer\"\u003e\u003c/span\u003e\n        \u003cdiv class=\"tooltip__mask\"\u003e\n            \u003cdiv class=\"tooltip__cell\"\u003e\n                \u003cdiv class=\"tooltip__content\"\u003e\n                    \u003c!-- content --\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/span\u003e\n```\n\n## [Tourtip](https://ebay.gitbooks.io/mindpatterns/content/messaging/tourtip.html)\n\nA tourtip is expanded and visible on page load.\n\nTourtip structure is almost identical to [flyout](#user-content-flyout) structure. The markup becomes a little more convoluted due to the presence of a visual \"pointer\". This additional markup allows enough hooks for styling \u0026 masking with CSS.\n\n```html\n\u003cdiv class=\"tourtip tourtip--expanded\"\u003e\n    \u003cbutton class=\"tourtip__host\" aria-label=\"Settings\"\u003e\n        \u003csvg focusable=\"false\" height=\"16\" width=\"16\" aria-hidden=\"true\"\u003e\n            \u003cuse xlink:href=\"#icon-settings\"\u003e\u003c/use\u003e\n        \u003c/svg\u003e\n    \u003c/button\u003e\n    \u003cdiv class=\"tourtip__overlay\" role=\"region\" aria-labelledby=\"tourtip-label\"\u003e\n        \u003cspan class=\"tourtip__pointer\"\u003e\u003c/span\u003e\n        \u003cdiv class=\"tourtip__mask\"\u003e\n            \u003cdiv class=\"tourtip__cell\"\u003e\n                \u003cspan class=\"tourtip__content\"\u003e\n                    \u003ch2 class=\"tourtip__heading\" id=\"tourtip-label\"\u003eTourtip Title\u003c/h2\u003e\n                    \u003c!-- content --\u003e\n                \u003c/span\u003e\n                \u003cbutton class=\"tourtip__close\" type=\"button\" aria-label=\"Dismiss tip\"\u003e\n                    \u003csvg focusable=\"false\" height=\"24\" width=\"24\" aria-hidden=\"true\"\u003e\n                        \u003cuse xlink:href=\"#icon-close\"\u003e\u003c/use\u003e\n                    \u003c/svg\u003e\n                \u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianmcburnie%2Fbones","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianmcburnie%2Fbones","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianmcburnie%2Fbones/lists"}