In https://gitlab.com/groups/gitlab-org/-/epics/8063 all of the issues uncovered for the current drawer component could be solved by following the [WAI-ARIA Authoring Guidelines for a dialog (modal)](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). Refer to https://gitlab.com/groups/gitlab-org/-/epics/8063#resources for more information about why a drawer shares similarities with a modal and aligns with the dialog implementation. | **Problem** | **Solution** | | ----------- | ------------ | | 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). | | 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. | | 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. | | No state change is announced when activating the button.  | Clearly communicate that the drawer is open or closed. | | 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. |