* feat(ui): add Ask AI to code block controls menu
Add an "Ask AI" option to the code controls dropdown menu on all code
blocks. Uses data-ask-ai-query attribute if provided by the template,
otherwise builds a query from the code content. Delegates to the
existing Kapa widget integration via the ask-ai-open click handler.
* fix(ui): fix Ask AI code control and add e2e tests
## Summary
- Add "Ask AI" option to the code controls dropdown (three-dot menu) on all code blocks
- Uses `data-ask-ai-query` attribute from the template if available, otherwise builds a query from the code content
- Delegates to the existing Kapa widget via the `ask-ai-open` click handler contract
- Reorder menu items: Copy → Ask AI → Fill window
## Bug fix
Fix Ask AI button not opening the Kapa widget. jQuery `.trigger('click')`
doesn't dispatch native DOM events, so the native
`document.addEventListener` in ask-ai-trigger.js never received the click.
Switch to native `.click()` and remove `href="#"` to prevent scroll-to-top.
## Tests
Add Cypress e2e test suite (`code-controls.cy.js`) with 16 tests covering:
- Initialization: code blocks wrapped, controls appended, menu item order
- Toggle: open/close on click, close on outside click, independent menus
- Copy to clipboard: success lifecycle, revert after timeout
- Fullscreen: modal open/close, body scroll lock, placeholder restore
- Ask AI: Kapa modal opens, query built with code content (MutationObserver)
* fix(ui): apply icon spacing to all code control menu items
Move .cf-icon margin-right rule from .copy-code and .fullscreen-toggle
to the shared li level so it applies to all menu items including Ask AI.
* Potential fix for pull request finding
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* fix(ui): add keyboard accessibility to code controls menu
Replace clickable <span> and <li> elements with proper <button> elements
and ARIA roles for keyboard and assistive-technology access:
- Toggle: <span> → <button> with aria-label and aria-expanded
- Menu items: <li> → <li role="none"><button role="menuitem">
- Menu: <ul> gets role="menu"
- SCSS: add :focus-visible styles, reset button defaults
- JS: toggle handler updates aria-expanded on open/close
Also fix tests to match actual behavior:
- Remove bogus "close other menus" test that manually closed first menu
before opening second (tested nothing)
- Remove duplicate "close on re-click" test (same as outside-click)
- Add "keep menu open when copy is clicked" (stopPropagation behavior)
- Add accessibility markup validation test
---------
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
ab8223d11e