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.
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.
https://github.com/mitodl/ocw-hugo-themes/assets/71316217/bafec908-bc35-47f4-8248-5ca68068e541
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
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.