apps/web/tests/shared/ui · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web tests shared ui

3 files

pouriade.com · Share relative timestamps as TimeAgo · 4d ago

Share relative timestamps as TimeAgo

The menus on a chat, a reply, a table, and the conversation header are one shared Menu in shared/ui, imported as `import * as Menu`: a Root holding open and onOpenChange, a Trigger that is an IconButton, a Popup, Items, and a Separator, after the WAI-ARIA menu button pattern. The arrow keys, Home, and End move between items, Tab closes a menu and moves on, Escape closes it back on its button, and choosing an item closes it and returns the focus unless the item moved it, even when the focus was on the page, as in Safari. A reply's details now open as their own card from More rather than as a menu view. The account menu stays a popover, now opening on Settings and giving the focus back on Escape. IconButton gains action, row, and firm tones, with toggle, row, and small sizes, which the hand-built sidebar, header, and message action buttons now use, so MenuItem, ToolButton, and iconAction are gone. usePopover takes a Placement of align, anchored, and portal that Menu.Popup shares, along with its dismiss and focus rules.

Select.test.tsx

A Select given searchLabel opens a list of eight options or more, about as many as it shows before scrolling, with a search box named by it, and the model select gives "Search models", which finds a model by its name, its ID, or its provider through the options' new keywords. The box takes the focus as the list opens, except on a touch screen, where it waits for a tap so its keyboard doesn't cover the list. Typing narrows the options to those holding every word typed, in any case, moves to the first that matches, and says "No matches" through a status that is there from the start, so screen readers hear it. The arrow keys, Page Up, Page Down, and Enter work from the box while Home, End, and Space stay the field's, Escape closes the list and Tab moves on, each from the button, which takes the focus back as after a pick, and a letter typed on the closed button opens the list searching for it. An option's id comes from its place among every option, so the active id changes with each move and screen readers and the scroll into view follow it. The list's heading and search box sit over the options, which alone scroll, and usePlacement measures the room the reader can see, following the visual viewport as an on-screen keyboard comes and goes. touchOnly is shared with the composer from shared/touch.ts. The styling and web UI specs describe it, with tests and an acceptance criterion.