Accessibility: improve mobile drawers

[HussainTaj-arbisoft]

In mobile view, our drawers are "hidden" by moving them off of the screen. The drawers are not "display: none" or removed from the DOM (or accessibility tree). This causes the screen readers to perceive them.

There are two drawers, the one on the left with the outline and the one on the right with the course info.

Please take a look at the video for reference.

reference.mp4

Expected Behavior

On mobile, screen readers should not read the drawer content until it is opened and in view.

Current Behavior

On mobile, screen readers read the content of the drawers when the drawers are not in view.

Steps to Reproduce

1. Open any course page with the drawers.
2. Read the entire screen with your screen reader assistant.

Possible Solution

There are many ways to hide content from screen readers.

In general, we would have to rewrite the drawer toggle and animation logic.

We can either use: display: none, aria-hidden="true", or remove the drawers from DOM when they are not in view.