zsp/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-06-14 20:21:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(skills): clarify modal focus restoration scope in frontend-a11y

Browse Source
This commit is contained in:
hjkim0905
2026-05-25 00:12:17 +09:00
parent b54a4fc2d0
commit 85b4114248
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/frontend-a11y/SKILL.md
+5 -1
View File
@@ -308,7 +308,9 @@ export function Dropdown({ options, onSelect }: { options: string[]; onSelect: (
Focus must move logically when UI state changes — especially for modals and route transitions. Focus must move logically when UI state changes — especially for modals and route transitions.
### Modal Focus Trap ### Modal Focus Restoration
> This example covers initial focus and restoration. For a full focus trap (Tab/Shift+Tab cycling within the modal), use a library like [`focus-trap-react`](https://github.com/focus-trap/focus-trap-react) which handles edge cases like dynamic content and nested portals.
```tsx ```tsx
export function Modal({ isOpen, onClose, title, children }: { isOpen: boolean; onClose: () => void; title: string; children: React.ReactNode }) { export function Modal({ isOpen, onClose, title, children }: { isOpen: boolean; onClose: () => void; title: string; children: React.ReactNode }) {
@@ -317,9 +319,11 @@ export function Modal({ isOpen, onClose, title, children }: { isOpen: boolean; o
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
// Save currently focused element and move focus into modal
previousFocusRef.current = document.activeElement as HTMLElement; previousFocusRef.current = document.activeElement as HTMLElement;
modalRef.current?.focus(); modalRef.current?.focus();
} else { } else {
// Restore focus to the element that opened the modal
previousFocusRef.current?.focus(); previousFocusRef.current?.focus();
} }
}, [isOpen]); }, [isOpen]);