Branchline

mara-okafor/drawer-kit

Public
README.md reba updated 2 days ago · 3f81c2e

drawer-kit

tests214 passing gzip4.21 kB licenseMIT

A focus-managed drawer primitive for the DOM you already have. No portal, no provider, no peer dependencies. Ships as one ES module; the whole trap logic is 180 lines you can read over coffee.

Install

# npm 10+
npm i drawer-kit

Usage

import { createDrawer } from "drawer-kit";

const drawer = createDrawer("#cart", {
  returnFocus: true,   // back to the trigger on Escape
  lockScroll: "padded" // compensates scrollbar width
});

Focus is trapped with a sentinel pair, not a keydown walker, so it survives VoiceOver rotor jumps and Firefox caret browsing. Tested against 214 cases across Chromium and WebKit.

About

Accessible drawer & sheet primitive. 4.21 kB, zero dependencies.

a11yfocus-trapdrawervanilla-jstypescript

Stars
4,382
Forks
291
Used by
2.1k
Release
v3.2.0 · Jun 28

  • Focus escapes drawer when VoiceOver rotor jumps to headings bug a11y

    #218 opened 3 days ago by tomasz-w

    14

  • iOS 17.4 rubber-band scroll leaks through the backdrop bug ios

    #214 opened Jul 2 by kenji-f · has linked PR

    9

  • Docs: SSR example flashes the drawer open for one frame docs

    #209 opened Jun 24 by reba

    3

  • Use inert on background instead of the aria-hidden walk enhancement

    #204 opened Jun 19 by mara-okafor · milestone v4

    21

  • fix: trap focus inside drawer, return to trigger on close

    #241 · fix/drawer-focus-trap → main · all checks passing

    6

  • chore: replace Karma with Vitest browser mode

    #236 · chore/vitest-migration → main · draft

    11

  • fix: rubber-band scroll leak on iOS 17.4 backdrop

    #238 · fix/ios-overscroll → main · closes #214

    4

381 contributions in the last 29 weeks

Mara ships in bursts. The quiet band in February was the v3 rewrite happening on a branch; everything since May is drawer-kit and review duty on eleven downstream forks.

Longest streak
23 days
Busiest day
Jun 30 · 14 commits
Reviews given
67

Less More

Open

fix: trap focus inside drawer, return to trigger on close #241

mara-okafor wants to merge 3 commits into main from fix/drawer-focus-trap

+412 −87 6 files changed
  • src/focus-trap.ts+188 −41
  • src/drawer.ts+64 −22
  • tests/focus-trap.spec.ts+141 −18
  • docs/migration-v3.md+19 −6

All checks have passed 4 successful checks

  • build ubuntu-24.04 · node 20 1m 12s
  • test chromium + webkit · 214 passed 38s
  • lint / typecheck strict, no any 21s
  • bundle-size 4.21 kB gzip (+38 B) 9s
Squash and merge · 3 commits will become one
mara@fern - zsh - 92×28
~/code/drawer-kit (fix/drawer-focus-trap)
$ npx vitest run tests/focus-trap.spec.ts
PASS  tests/focus-trap.spec.ts  (52 tests, 1.9s)

$ git add src/focus-trap.ts src/drawer.ts
$ git commit -m "fix: return focus to trigger on Escape"
[fix/drawer-focus-trap 3f81c2e] fix: return focus to trigger on Escape
 2 files changed, 47 insertions(+), 9 deletions(-)

$ git push origin fix/drawer-focus-trap
Enumerating objects: 11, done.
Writing objects: 100% (6/6), 1.84 KiB | 1.8 MiB/s, done.
remote: Resolving deltas: 100% (4/4), completed with 4 local objects.
remote:
remote: Create a pull request for 'fix/drawer-focus-trap' on Branchline:
remote:   branchline.local/mara-okafor/drawer-kit/pull/new
remote:
To branchline:mara-okafor/drawer-kit.git
   9c2e11d..3f81c2e  fix/drawer-focus-trap -> fix/drawer-focus-trap
$