Refer to the [parent epic description](https://gitlab.com/groups/gitlab-org/-/epics/5387) for more information on this effort. ## Purpose Audit the accessibility of the GitLab UI Drawer component in all variants and states in order to identify any problems and provide more documentation on the component’s page in Pajamas. ## Component description A drawer presents context-specific information and/or actions without leaving the current page. It's similar to a modal, but at larger breakpoints doesn't block all content or prevent interaction with some page elements. ## Initial Methods and Tools Review the [initial testing methods in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#initial-methods-and-tools). List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic. * Review the Drawer examples in [GitLab UI](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-drawer--default&globals=backgrounds.value:!hex(F8F8F8)). * Visual review for contrast and states * Semantic review to align with [WAI-ARIA Authoring Guidelines for a dialog (modal)](https://www.w3.org/TR/wai-aria-practices/#dialog_modal) * Keyboard only * Screen reader: VoiceOver + Safari on macOS * Screen reader: NVDA + Chrome on Windows * axe DevTools extension in browser ## Audit Criteria Review the [general audit criteria in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#audit-criteria). Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. **A check indicates that the audit has been performed, not that it passes.** * [x] All actions and functionality can be done with a [keyboard](https://design.gitlab.com/accessibility-audits/2-keyboard-only). * [x] Links, buttons, and controls have a visible [focus state](https://design.gitlab.com/accessibility-audits/2-keyboard-only#focus-states). * [x] 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. * [x] 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. * [x] Color combinations have [sufficient contrast](https://design.gitlab.com/product-foundations/colors#accessibility). ## Results | **Problem** | **Solution** | **Related Issues/MR** | | ----------- | ------------ | -------------- | | The current drawer implementation that overlays content is effectively a "modal" drawer and should use the same constructs as a modal. | Update the current drawer to align with [WAI-ARIA Authoring Guidelines for a dialog (modal)](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1807+ | | Drawer container uses the `<aside>` HTML element, but `role="dialog"` is not permitted on an aside. The `dialog` role isn't used in the current state, but is part of another recommended update.  | Use a `<div>` element instead. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1807+ | | Focus can be moved to elements hidden by the drawer.  | Like a modal, contain focus within the drawer when it's open until the `esc` key has been pressed or the close button activated. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1807+ | | No state change is announced when activating the button.  | Clearly communicate that the drawer is open or closed. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1807+ | | Focus doesn't move into the drawer when expanded. Focus doesn't return to the activating button when the drawer is closed.  | Like a modal, focus should be placed within the drawer when opened, and returned to the button when closed. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1807+ | | If a drawer contains a text input and there is static content under it that overflows the drawer, a keyboard user may not be able to scroll to access that content since focus on a text input prevents the arrow keys from scrolling.  | Add documentation to keep this as a UX consideration. | https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1346+ | ## Resources - https://gitlab.com/groups/gitlab-org/-/epics/6945+ - [172.16.123.1_9001-Drawer-test-2022-05-13.json](/uploads/dffe625cb42de5ba17dc41d8a9fd8785/172.16.123.1_9001-Drawer-test-2022-05-13.json) - [Material Design modal drawer example](https://material.io/components/navigation-drawer#modal-drawer) - Culture Amp [modal vs. drawer comparison](https://cultureamp.design/components/drawer/#modals-vs-drawers) ## Completing the audit After the solutions have been explored and applied, review the [completing the audit section in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#completing-the-audit). Complete all items prior to closing this issue. gitlab-ui~2677490 ~"Category:FE/UX Foundations" ~"component:drawer"