In addition to automatic accessibility testing of our components, we can perform manual tests to ensure that each component is build using standard accessibility guidelines. Our goal is to ensure that the component functions for all users. All Vue component variants and states should be evaluated. ## Methods and tools - VoiceOver + Safari (latest version) on macOS - NVDA + Chrome (latest version) on Windows - Visual review - Keyboarding - Semantics (assisted by axe DevTools browser extension) ## Evaluation criteria Accessibility compliance will depend on the specific component, but a general checklist includes: - Satisfies applicable WCAG 2.2 (level AA) success criteria. - All actions and functionality can be done with a [keyboard](https://design.gitlab.com/accessibility-audits/2-keyboard-only). - Links, buttons, and controls have a visible [focus state](https://design.gitlab.com/accessibility-audits/2-keyboard-only#focus-states). - All content is presented in text or with a text equivalent. For example, alt text for SVG, or `aria-label` for icons that have meaning or perform actions. - Changes in a component’s state are announced by a screen reader. For example, changing `aria-expanded="false"` to `aria-expanded="true"` when an accordion is expanded. - Color combinations have [sufficient contrast](https://design.gitlab.com/product-foundations/colors#accessibility). - Review component specific accessibility guidelines for how attributes and component should behave. - Automated tests exist and are passing. - Accessibility violations in Storybook are addressed. ## Completing the evaluation Once the evaluations is complete: * Promote the evaluation issue to an epic (a sub-epic of this main one) and create an issue under it for each item that needs addressed. * Create follow up issues to update the component, documentation, or both as needed. * Fix each issue and retest using the same methods and tools used in the initial evaluation. * Address any lingering problems that may arise. * Close the evaluation issue. * Close the epic once all issues are closed. # Status |Component|Initial eval|Issues addressed|Notes| |---------|--------------------|--------------|----| |[Accordion](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2896) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | [Original eval](https://gitlab.com/groups/gitlab-org/-/epics/5663) — a new one was created to validate the current state. | |[Alert](https://gitlab.com/groups/gitlab-org/-/epics/7538) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | The original eval has been updated as part of component health and component maturity efforts. | |[Avatar](https://gitlab.com/groups/gitlab-org/-/epics/6953) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | The original eval has been updated as part of component health and component maturity efforts. | |[Badge](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2899) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | [Original eval](https://gitlab.com/groups/gitlab-org/-/epics/5664) — a new one was created to validate the current state. | |[Banner](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2678) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | [Original eval](https://gitlab.com/groups/gitlab-org/-/epics/8404) — a new one was created to validate the current state. | |[Breadcrumb](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2900) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | [Original eval](https://gitlab.com/groups/gitlab-org/-/epics/6879) — a new one was created to validate the current state. | |[Broadcast message](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2704) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | [Original eval](https://gitlab.com/groups/gitlab-org/-/epics/7659) — a new one was created to validate the current state. | |[Button](https://gitlab.com/groups/gitlab-org/-/epics/7310) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | The original eval has been updated as part of component health and component maturity efforts. | |[Button group](https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/26) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Card_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | _Final design not in GitLab UI to test_ | |[Checkbox](https://gitlab.com/groups/gitlab-org/-/epics/7796) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Color picker_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | _Vue component unavailable to test_ | |Date picker | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | Needs to be migrated away from Pickaday, see https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1890. | |[Drawer](https://gitlab.com/groups/gitlab-org/-/epics/8063) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Dropdown - Disclosure_| <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Dropdown - Listbox_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Dropdown - Combobox_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Filter](https://gitlab.com/groups/gitlab-org/-/epics/8179) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Form](https://gitlab.com/groups/gitlab-org/-/epics/8500)| <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Infinite scroll](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1196) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | Outcome is to deprecate infinite scroll | |[Label](https://gitlab.com/groups/gitlab-org/-/epics/7527) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Modal](https://gitlab.com/groups/gitlab-org/-/epics/6945) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Pagination](https://gitlab.com/groups/gitlab-org/-/epics/7544) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Path](https://gitlab.com/groups/gitlab-org/-/epics/8512)| <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Popover](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1202) | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | The popover uses Bootstrap Vue Popover, which behaves more like a tooltip and has other accessibility concerns that are discussed in the issue. | |_Progress bar_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | _Final design not in GitLab UI to test_ | |[Radio button](https://gitlab.com/groups/gitlab-org/-/epics/7797) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Search](https://gitlab.com/groups/gitlab-org/-/epics/8176) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Segmented control](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1206) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | Component deprecated | |[Skeleton loader](https://gitlab.com/groups/gitlab-org/-/epics/8392) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |Sorting | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | Considering moving to buttons | |[Spinner](https://gitlab.com/groups/gitlab-org/-/epics/7306) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | | |[Table](https://gitlab.com/groups/gitlab-org/-/epics/7635) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Tabs](https://gitlab.com/groups/gitlab-org/-/epics/6875) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Toast](https://gitlab.com/groups/gitlab-org/-/epics/7672) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Toggle](https://gitlab.com/groups/gitlab-org/-/epics/6905) | <ul><li>[x] Complete</li><ul> | <ul><li>[x] Complete</li><ul> | | |[Token](https://gitlab.com/groups/gitlab-org/-/epics/8168) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |[Tooltip](https://gitlab.com/groups/gitlab-org/-/epics/7294) | <ul><li>[x] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | | |_Tree_ | <ul><li>[ ] Complete</li><ul> | <ul><li>[ ] Complete</li><ul> | _Vue component unavailable to test_ |