Add accessibility semantics and focus management to Modal component

[Copilot]

The Modal component was missing ARIA attributes and focus management, breaking keyboard and screen reader navigation.

Changes

ARIA semantics:

• role="dialog", aria-modal="true", aria-labelledby on modal container
• aria-label on close button, aria-hidden on backdrop
• tabIndex={-1} for programmatic focus

Focus management:

• Save/restore focus to trigger element on open/close
• Focus modal container on open for screen reader context

Focus trap:

• Tab/Shift+Tab cycles between focusable elements within modal
• Comprehensive selector handles buttons, links, inputs, contenteditable, media controls
• Guards for empty focusable lists

// Before: no semantic markup
<div className="...">
  <h3>{title}</h3>
  <button onClick={onClose}>×</button>
</div>

// After: full accessibility
<div
  ref={modalRef}
  role="dialog"
  aria-modal="true"
  aria-labelledby={titleId}
  tabIndex={-1}
>
  <h3 id={titleId}>{title}</h3>
  <button onClick={onClose} aria-label="Close modal">×</button>
</div>

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
string-v2	Ready	Preview, Comment	Feb 12, 2026 4:07pm