Nice detail including prefers-reduced-motion. One more that bites on mobile: animate the panel with transform/translateX rather than width, and set aria-expanded on the toggle. The transform avoids layout thrash, and screen readers announce the menu state correctly.
Thank you for the comment. The panel slides with translate-x-0 and translate-x-full, and Tailwind v4 applies translate as a transform, so it doesn’t trigger layout the way animating width would, I have that one covered. Setting aria-expanded on the toggle is good a call, I will add that one in, I appreciate the comment, thanks again.
Glad the translate approach landed well. Pair aria-expanded with aria-controls pointing at the panel's id, so screen readers link the toggle to the exact element being shown. Small addition, big clarity.
Rishabh Mishra
Nice detail including prefers-reduced-motion. One more that bites on mobile: animate the panel with transform/translateX rather than width, and set aria-expanded on the toggle. The transform avoids layout thrash, and screen readers announce the menu state correctly.