Homework — an accessible dialog.

1. Focus trap. Create js/a11y.js with trapFocus and hideBackground. Use them in modal.js's openModal/closeModal.
2. Test with the KEYBOARD. Open the modal, press Tab many times — focus should cycle inside, never leave to the background. Close with Esc — focus returns to the button that opened it.
3. Reproduce the bug. Comment out trapFocus. Tab from the modal now goes to the nav behind it. Capture it (the focus ring is visible in the background). Restore it.
4. Background for screen readers. With hideBackground, check (DevTools → Elements) that the other body children get aria-hidden="true" while the modal is open, and lose it on close.
5. Star keyboard. makeRadioGroup — move with arrows, pick with Space. Verify you can set a rating with no mouse.
6. Toasts + confirm. Add toast.js (a transient message) and confirm.js (a confirmation using the same trapFocus).

Required tests:

• Trap test: Tab cycles in the modal; without trapFocus — it escapes.
• Restore test: on close, focus returns to the opening button.
• Keyboard test: you set the star rating with arrows.

To submit: a video (using ONLY the keyboard): (1) focus cycles in the modal, (2) it returns on close, (3) the stars via arrows; + a short note on why this is WCAG, not "polish".

Next. We have the whole UI — but it's still on one URL. In lesson 14 we build a router by hand: hash routes, deep links, a working Back button, and search synced into the URL. And you'll understand what a real router does for you.