Mini Cart block: Create native Drawer component

[Aljullu]

In the first iteration of the Mini Cart block, it will open in a drawer that will slide in from the right side of the screen (left side in RTL languages). This issue is about creating a component we can use for this. Ideally, this component should not require React given that we want the drawer to open instantly even if React is not yet executed.

Tasks

• Functionality:
  • Open the drawer when clicking the Mini Cart button.
  • Make it possible to close the drawer when clicking on the close button.
  • Make it possible to close the drawer when clicking outside of it.
• Styling:
  • Slide in the drawer from the right (from the left in RTL languages).
• Accessibility:
  • Capture focus inside the drawer and move it back to the content when closed.
  • Alert screen readers when the drawer is opened/closed.

[senadir]

Is the plan to lazy load, mount and render React once the drawer is open?

[Aljullu]

Is the plan to lazy load, mount and render React once the drawer is open?

More or less, the idea is to start loading React and rendering the components as soon as the shopper hovers the Mini Cart button (see #4600), but there is the chance that they will click on it before React has finished loading, that's why ideally the drawer component should not rely on React.

[Aljullu]

Heads-up that in #4608 I applied a middle-ground solution. There is a native HTML element to render the drawer skeleton instantly, but then it's replaced with a Gutenberg Modal on the fly so we get all accessibility perks from it.