test(transcription): cover 44px touch target on mention search input
For issue #380 NFR. The transcriber audience is 60+ on laptops/tablets; the search input must meet WCAG 2.2 AA touch target dimensions just like the existing person result rows. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -77,6 +77,18 @@ describe('MentionDropdown — search input', () => {
|
|||||||
await expect.element(page.getByText(m.person_mention_search_prompt())).not.toBeInTheDocument();
|
await expect.element(page.getByText(m.person_mention_search_prompt())).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('search input wrapper meets the 44px touch target (WCAG 2.2 AA)', async () => {
|
||||||
|
render(MentionDropdown, {
|
||||||
|
model: makeModel(),
|
||||||
|
editorQuery: '',
|
||||||
|
onSearch: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
const input = document.querySelector('[data-test-search-input]') as HTMLElement;
|
||||||
|
expect(input).not.toBeNull();
|
||||||
|
expect(input.className).toContain('min-h-[44px]');
|
||||||
|
});
|
||||||
|
|
||||||
it('invokes onSearch with the current value whenever the user types', async () => {
|
it('invokes onSearch with the current value whenever the user types', async () => {
|
||||||
const onSearch = vi.fn();
|
const onSearch = vi.fn();
|
||||||
render(MentionDropdown, {
|
render(MentionDropdown, {
|
||||||
|
|||||||
Reference in New Issue
Block a user