Skip to content

Commit

Permalink
docs(accessibility): fix issue where esc key would not close navigati…
Browse files Browse the repository at this point in the history
…on drawer (#1107)
  • Loading branch information
scurker authored Jul 12, 2023
1 parent 88ca386 commit 9657be3
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion docs/components/Drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function Drawer({
onClose = () => null
}: DrawerProps) {
const drawerRef = useRef<HTMLDivElement>(null);
const triggerElement = useRef<HTMLElement | null>(null);

const handleClickOutside = () => {
if (!open) {
Expand All @@ -34,14 +35,15 @@ export default function Drawer({
const listener = (e: KeyboardEvent) => {
if (e.which === 27 && open) {
onClose();
triggerElement.current?.focus();
}
};

document.body.addEventListener('keydown', listener);
return () => {
document.body.removeEventListener('keydown', listener);
};
}, []);
}, [open]);

// Ensure that focusable elements aren't focusable when the drawer is closed
useEffect(() => {
Expand All @@ -54,6 +56,7 @@ export default function Drawer({
(element as HTMLInputElement).tabIndex = -1;
});
} else {
triggerElement.current = document.activeElement as HTMLElement;
Array.from(elements).forEach(element => {
const tabIndexAttr = Number(element.getAttribute('tabindex'));
(element as HTMLInputElement).tabIndex =
Expand Down

0 comments on commit 9657be3

Please sign in to comment.