Drawer > Follow WAI-ARIA Authoring Guidelines for a dialog

In &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). Refer to &8063 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).
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. CleanShot_2022-05-13_at_10.29.55	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.