# eBay MIND Patterns

## eBay MIND Patterns

- [Introduction](https://ebay.gitbook.io/mindpatterns/master.md): Introducing the eBay MIND Patterns
- [Messaging](https://ebay.gitbook.io/mindpatterns/messaging.md): Patterns intended for the relaying of messages to the user. A form validation report, page level notices and dynamic 'as-you-type' feedback for example.
- [Alert Dialog](https://ebay.gitbook.io/mindpatterns/messaging/alert-dialog.md): A lightbox dialog that prompts user for acknowledgement.
- [Confirm Dialog](https://ebay.gitbook.io/mindpatterns/messaging/confirm-dialog.md): A lightbox dialog that prompts user to confirm or cancel an action.
- [File Preview Card](https://ebay.gitbook.io/mindpatterns/messaging/file-preview-card.md): File preview cards show
- [Form Validation](https://ebay.gitbook.io/mindpatterns/messaging/form-validation.md): Notification of invalid input after user has attempted to submit form.
- [Inline Notice](https://ebay.gitbook.io/mindpatterns/messaging/inline-notice.md): Context-level notice of confirmation, information or attention.
- [Input Meter](https://ebay.gitbook.io/mindpatterns/messaging/input-meter.md): A metering element that monitors and responds to user input.
- [Input Validation](https://ebay.gitbook.io/mindpatterns/messaging/input-validation.md): Validate user input before the form is submitted.
- [Page Notice](https://ebay.gitbook.io/mindpatterns/messaging/page-notice.md): A custom landmark which appears prominently at the top of the page.
- [Star Rating (static)](https://ebay.gitbook.io/mindpatterns/messaging/star-rating-static.md): A graphical feedback rating for a product or service
- [Time](https://ebay.gitbook.io/mindpatterns/messaging/time.md): Clocks, stopwatches & timers.
- [Toast Dialog](https://ebay.gitbook.io/mindpatterns/messaging/toast-dialog.md): A passively spawned non-modal dialog.
- [Tourtip](https://ebay.gitbook.io/mindpatterns/messaging/tourtip.md): Informs the user of some new feature or section on the page.
- [Input](https://ebay.gitbook.io/mindpatterns/input.md): Patterns intended for the capture of user input. Buttons, text boxes and menus for example.
- [Button](https://ebay.gitbook.io/mindpatterns/input/button.md): A control for executing JavaScript or submitting/resetting form values
- [Checkbox](https://ebay.gitbook.io/mindpatterns/input/checkbox.md): A control for storing multi-select form values.
- [Chips Combobox](https://ebay.gitbook.io/mindpatterns/input/chips-combobox.md): A quick way to add or remove chips
- [Combobox](https://ebay.gitbook.io/mindpatterns/input/combobox.md): Textbox with quick-entry ability via a list of values
- [Date Picker](https://ebay.gitbook.io/mindpatterns/input/date-picker.md): Date pickers allow users to choose a single date or a range of dates
- [File Input](https://ebay.gitbook.io/mindpatterns/input/file-input.md): Input field for uploading one or more files
- [Input Dialog](https://ebay.gitbook.io/mindpatterns/input/input-dialog.md): A lightbox dialog that prompts user for input.
- [Listbox](https://ebay.gitbook.io/mindpatterns/input/listbox.md): Allows selection of one or more items from a list of options.
- [Listbox Button](https://ebay.gitbook.io/mindpatterns/input/listbox-button.md): A button that expands to reveal a listbox in a flyout.
- [Menu](https://ebay.gitbook.io/mindpatterns/input/menu.md): Menu items trigger an immediate action within the current page.
- [Menu Button](https://ebay.gitbook.io/mindpatterns/input/menu-button.md): A button that expands to reveal a menu within a popover.
- [Number Input](https://ebay.gitbook.io/mindpatterns/input/number-input.md): A numeric input field with prominent increase/decrease buttons
- [Phone Input](https://ebay.gitbook.io/mindpatterns/input/phone-input.md): A composite component that allows for phone number input.
- [Radio](https://ebay.gitbook.io/mindpatterns/input/radio.md): A control for storing single-select form data.
- [Select](https://ebay.gitbook.io/mindpatterns/input/select.md): A control for storing single-select or multi-select form data.
- [Star Rating (interactive)](https://ebay.gitbook.io/mindpatterns/input/star-rating.md): Allows user to allocate a rating to a product or service
- [Switch](https://ebay.gitbook.io/mindpatterns/input/switch.md): Represents whether a function is activated or not (i.e. on or off).
- [Toggle Button](https://ebay.gitbook.io/mindpatterns/input/toggle-button.md): A button that can be toggled between two states.
- [Toggle Button Group](https://ebay.gitbook.io/mindpatterns/input/toggle-button-group.md): Non-form based single & multi-select (i.e. does not store form data)
- [Navigation](https://ebay.gitbook.io/mindpatterns/navigation.md): Patterns that allow the user to navigate to a different URL.
- [Breadcrumbs](https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs.md): A list of links representing current location in site hierarchy.
- [Fake Menu Button](https://ebay.gitbook.io/mindpatterns/navigation/fake-menu-button.md): A button which opens a single column of links in popover
- [Fake Tabs](https://ebay.gitbook.io/mindpatterns/navigation/fake-tabs.md): List of navigation links styled to look like tabs.
- [Link](https://ebay.gitbook.io/mindpatterns/navigation/link.md): We use links to navigate between URLs.
- [Pagination](https://ebay.gitbook.io/mindpatterns/navigation/pagination.md): Navigate between pages of results
- [Skip Navigation](https://ebay.gitbook.io/mindpatterns/navigation/skip-navigation.md): A link that allows keyboard users to skip past lengthy blocks of navigation.
- [Tile](https://ebay.gitbook.io/mindpatterns/navigation/tile.md): Large, "tap" friendly button or link
- [Disclosure](https://ebay.gitbook.io/mindpatterns/disclosure.md): Patterns that disclose/reveal content to the user only when needed. Expand/collapse, tabs and menu buttons for example.
- [Accordion](https://ebay.gitbook.io/mindpatterns/disclosure/accordion.md): A series of expanding/collapsing panels of content.
- [Carousel](https://ebay.gitbook.io/mindpatterns/disclosure/carousel.md): A horizontal viewport of grouped or ungrouped content.
- [Lightbox Dialog](https://ebay.gitbook.io/mindpatterns/disclosure/lightbox-dialog.md): A modal window which dims out the main page behind it.
- [Details](https://ebay.gitbook.io/mindpatterns/disclosure/details.md)
- [Popover](https://ebay.gitbook.io/mindpatterns/disclosure/popover.md): A non-modal overlay, showing contextually relevant content and/or actions.
- [Footnote](https://ebay.gitbook.io/mindpatterns/disclosure/footnote.md): Symbols that guide users towards another section of the document for additional information.
- [Infotip Button](https://ebay.gitbook.io/mindpatterns/disclosure/infotip.md): Reveals helpful information about a nearby non-interactive element or region of a page.
- [Panel Dialog](https://ebay.gitbook.io/mindpatterns/disclosure/panel-dialog.md): A modal dialog which sits flush to one edge of the viewport.
- [Pulldown List](https://ebay.gitbook.io/mindpatterns/disclosure/pulldown-list.md): aka. "Show More/Show Less"
- [Segmented Buttons](https://ebay.gitbook.io/mindpatterns/disclosure/segmented-buttons.md): Control the state of an object or the visibility of section content
- [Tabs](https://ebay.gitbook.io/mindpatterns/disclosure/tabs.md): Hide and disclose panels of content via a series of interactive tabs.
- [Tooltip](https://ebay.gitbook.io/mindpatterns/disclosure/tooltip.md): Describes the action/purpose of an icon button.
- [Structure](https://ebay.gitbook.io/mindpatterns/structure.md): Headings, landmarks, lists, forms and tables help us structure our page content into logical, navigable regions/sections.
- [Description List](https://ebay.gitbook.io/mindpatterns/structure/description-list.md): The \<dl>, \<dt> and \<dd> tags.
- [Form](https://ebay.gitbook.io/mindpatterns/structure/form.md): A collection of controls that capture, store and submit user input data.
- [Heading](https://ebay.gitbook.io/mindpatterns/structure/heading.md): Headings help create a quick visual and mental model of page content & structure.
- [Image](https://ebay.gitbook.io/mindpatterns/structure/image.md): Because the web would be pretty dull without images...
- [Item Card](https://ebay.gitbook.io/mindpatterns/structure/item-card.md): An item card is a specific type of card that groups key details of an item for further decision-making and quick comparison of similar item cards.
- [Layout Grid](https://ebay.gitbook.io/mindpatterns/structure/layout-grid.md): A generic responsive layout grid for repeating UI elements in a container. These could be purely visual elements or interactive. This component will lay out repeating elements based on internal rules.
- [Region](https://ebay.gitbook.io/mindpatterns/structure/region.md): A region of a page that is common across a specific website.
- [Table](https://ebay.gitbook.io/mindpatterns/structure/table.md): Represents tabular data in rows and columns ranging from basic usage to enhanced feature set for additional functionality.
- [Table Cell](https://ebay.gitbook.io/mindpatterns/structure/table-cell.md): Represents table cell types and available structures.
- [Techniques](https://ebay.gitbook.io/mindpatterns/techniques.md): Common techniques & sub-patterns.
- [Active Descendant](https://ebay.gitbook.io/mindpatterns/techniques/active-descendant.md): Provides additional keyboard navigation/selection without moving keyboard focus.
- [Ambiguous Label](https://ebay.gitbook.io/mindpatterns/techniques/ambiguous-label.md): An action that cannot easily be discerned from another on the same page.
- [Background Icon](https://ebay.gitbook.io/mindpatterns/techniques/icons.md): Icons that use CSS background-image, instead of SVG or IMG tag.
- [Keyboard Trap](https://ebay.gitbook.io/mindpatterns/techniques/keyboard-trap.md): Confine keyboard access within an element/region
- [Live Region](https://ebay.gitbook.io/mindpatterns/techniques/live-region.md): Announce dynamic changes to page without moving users location
- [Offscreen Text](https://ebay.gitbook.io/mindpatterns/techniques/offscreen-text.md): Create non-visual content exclusive to screen readers.
- [Roving Tabindex](https://ebay.gitbook.io/mindpatterns/techniques/roving-tabindex.md): Widget-like keyboard navigation using ARROW keys
- [Skip to Main Content](https://ebay.gitbook.io/mindpatterns/techniques/skip-to-main.md): Shortcut link for keyboard users.
- [Alternative Text](https://ebay.gitbook.io/mindpatterns/techniques/alttext.md): Provide text alternatives for images
- [Anti-Patterns](https://ebay.gitbook.io/mindpatterns/antipatterns.md): Patterns that are not good for accessibility (despite what you may think).
- [Disabling Pinch-to-Zoom](https://ebay.gitbook.io/mindpatterns/antipatterns/disabling-pinch-to-zoom.md): All text content must be zoomable.
- [Hand Cursor on Buttons](https://ebay.gitbook.io/mindpatterns/antipatterns/hand-cursor-on-buttons.md): Regular buttons don't need a hand
- [JavaScript HREF](https://ebay.gitbook.io/mindpatterns/antipatterns/javascript-href.md): You probably need a button, not a link.
- [Layout Table](https://ebay.gitbook.io/mindpatterns/antipatterns/layout-table.md): Tables are for tabular data only.
- [Mouse Hover on Static Elements](https://ebay.gitbook.io/mindpatterns/antipatterns/non-interactive-hover.md): Elements with non-interactive roles should not be hoverable or focusable
- [Open New Window](https://ebay.gitbook.io/mindpatterns/antipatterns/open-new-window.md): Let the user control their browser window/tab stack.
- [Setting Focus on Page Load](https://ebay.gitbook.io/mindpatterns/antipatterns/setting-focus-on-page-load.md): Most of the time... don't ever do this.
- [Tabindex-itis](https://ebay.gitbook.io/mindpatterns/antipatterns/tabindexitis.md): Not every element should be keyboard focusable!
- [Title Tooltip](https://ebay.gitbook.io/mindpatterns/antipatterns/title-tooltip.md): The "title" attribute is NOT an accessible "tooltip".
- [Appendix](https://ebay.gitbook.io/mindpatterns/appendix.md)
- [ARIA Essentials](https://ebay.gitbook.io/mindpatterns/appendix/aria-essentials.md): Overview of essential ARIA roles, states & properties that every developer should be familiar with.
- [Checklist](https://ebay.gitbook.io/mindpatterns/appendix/checklist.md)
- [FAQ](https://ebay.gitbook.io/mindpatterns/appendix/faq.md): Frequently asked questions
- [Keyboard Interface](https://ebay.gitbook.io/mindpatterns/appendix/keyboard-interface.md): Some general keyboard interaction guidance
- [Known Issues](https://ebay.gitbook.io/mindpatterns/appendix/known-issues.md): List of all known serious issues
- [Legacy Patterns](https://ebay.gitbook.io/mindpatterns/appendix/legacy-patterns.md): Patterns that are no longer recommend and supported.
- [Fullscreen Dialog](https://ebay.gitbook.io/mindpatterns/appendix/legacy-patterns/fullscreen-dialog.md): A modal dialog that covers the entire viewport
- [MIND Pattern Template](https://ebay.gitbook.io/mindpatterns/appendix/mind-pattern-template.md): This page is for internal adminisrative purposes only.
- [Pattern Naming Scheme](https://ebay.gitbook.io/mindpatterns/appendix/pattern-naming-scheme.md): How we choose our pattern names
- [References](https://ebay.gitbook.io/mindpatterns/appendix/references.md)
- [Utilities](https://ebay.gitbook.io/mindpatterns/appendix/utils.md)