mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-08-04 13:51:13 +00:00
5c9e73f371
* feat(web-shell): add keyboard-nav and IME-safe filter hooks Two reusable hooks for list-style dialogs: - useListboxKeyboard: Arrow/Home/End/Enter navigation driven by an active index, with a "keyboard mode" flag to suppress hover. Yields modified-key combos (Cmd/Ctrl/Alt/Shift), Home/End in text inputs, and Enter on focused buttons/links to native handling. - useFilterInput: IME-composition-safe search state so a filtered list does not refire on every intermediate pinyin character (commits on compositionend). * feat(web-shell): DialogShell Escape/backdrop close and focus management Give every dialog shared, accessible dismissal and focus behaviour: - Escape closes (guarded during IME composition so it cancels the composition, not the dialog) - click on the backdrop closes - Tab is trapped within the panel, wrapping at both ends - focus moves into the dialog on open and is restored to the opener on close * feat(web-shell): overhaul list-dialog interaction and accessibility Unify interaction across the model, theme, approval, resume, tools, delete, release and rewind dialogs: - keyboard navigation via useListboxKeyboard, with a roving highlight that opens on the current value and does not fight the mouse - consistent selection visuals: a single roving highlight plus a persistent "current" accent bar + checkmark; options are role=option divs (no stray focus ring) - IME-safe search via useFilterInput; fix Chinese-input jitter in the resume/delete/release search boxes - accessibility: role=listbox/option, aria-activedescendant, and aria-selected bound to the current value rather than the roving highlight - destructive dialogs keep Enter non-destructive where a confirm button is the commit (delete/release); rewind confirms on Enter like a single-select picker Refactors: - extract shared SessionRow used by resume/delete/release - rename resume-picker-* CSS primitives to picker-* (they are shared by all list dialogs, not resume-specific) Adds regression tests for the model duplicate-current fix, release hover selection, rewind Enter, the listbox/aria wiring, and the shared hooks. * fix(web-shell): address dialog interaction review feedback Follow-up fixes from upstream review: - DialogShell closes on completed backdrop clicks instead of mousedown, and its Tab trap now also catches the panel-focused fallback case - ToolsDialog now has full listbox semantics (ids, aria-activedescendant, aria-expanded) - Rewind keeps the roving cursor separate from the confirmed target; Enter only confirms, and the danger button executes the rewind - Model/Approval aria-selected now reflects the actual current value; model highlights stay in bounds when the model list shrinks - Home/End and modified arrow-key combos yield to native text navigation in search inputs; Escape yields to IME composition in DialogShell - Dead picker CSS and duplicate declarations removed; extra regression tests added for reviewer-raised edge cases * fix(web-shell): harden shared dialog keyboard and IME handling * fix(web-shell): tighten dialog shell focus, stacking, and backdrop behavior * fix(web-shell): align list dialog selection semantics and add coverage
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
import { act } from 'react';
|
|
import { createRoot, type Root } from 'react-dom/client';
|
|
import { I18nProvider } from '../../i18n';
|
|
|
|
Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
|
|
|
|
if (!Element.prototype.scrollIntoView) {
|
|
Element.prototype.scrollIntoView = () => {};
|
|
}
|
|
|
|
const tools = [
|
|
{ name: 'tool-a', displayName: 'Tool A', enabled: true, description: 'A' },
|
|
{ name: 'tool-b', displayName: 'Tool B', enabled: false },
|
|
];
|
|
|
|
vi.mock('@qwen-code/webui/daemon-react-sdk', () => ({
|
|
useTools: () => ({
|
|
status: { errors: [] },
|
|
tools,
|
|
loading: false,
|
|
error: undefined,
|
|
}),
|
|
}));
|
|
|
|
const { ToolsDialog } = await import('./ToolsDialog');
|
|
|
|
let container: HTMLDivElement | null = null;
|
|
let root: Root | null = null;
|
|
|
|
function mount() {
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
act(() => {
|
|
root!.render(
|
|
<I18nProvider language="en">
|
|
<ToolsDialog />
|
|
</I18nProvider>,
|
|
);
|
|
});
|
|
}
|
|
|
|
function press(key: string) {
|
|
act(() => {
|
|
window.dispatchEvent(
|
|
new KeyboardEvent('keydown', { key, cancelable: true }),
|
|
);
|
|
});
|
|
}
|
|
|
|
afterEach(() => {
|
|
act(() => root?.unmount());
|
|
container?.remove();
|
|
root = null;
|
|
container = null;
|
|
});
|
|
|
|
describe('ToolsDialog a11y wiring', () => {
|
|
it('exposes a listbox with option ids, aria-activedescendant and aria-expanded', () => {
|
|
mount();
|
|
|
|
const list = container!.querySelector<HTMLElement>('[role="listbox"]');
|
|
expect(list).not.toBeNull();
|
|
expect(list!.getAttribute('aria-activedescendant')).toBe(
|
|
'tools-list-opt-0',
|
|
);
|
|
|
|
const options = Array.from(
|
|
container!.querySelectorAll<HTMLElement>('[role="option"]'),
|
|
);
|
|
expect(options).toHaveLength(2);
|
|
expect(options[0]!.id).toBe('tools-list-opt-0');
|
|
expect(options[0]!.getAttribute('aria-expanded')).toBe('false');
|
|
expect(options[1]!.getAttribute('aria-expanded')).toBeNull();
|
|
|
|
press('ArrowDown');
|
|
expect(list!.getAttribute('aria-activedescendant')).toBe(
|
|
'tools-list-opt-1',
|
|
);
|
|
|
|
// Move back and expand the first tool via Enter.
|
|
press('ArrowUp');
|
|
press('Enter');
|
|
expect(options[0]!.getAttribute('aria-expanded')).toBe('true');
|
|
});
|
|
});
|