Accessibility
CallDock, CallDockControls, CallDockDetails, CallDockError, CallDockSkeleton from @prepared911/ui/blocks/call-dock.
The tray is a section named by label, which exposes a region landmark. While open is false there is no landmark at all. The rule between details and controls is a vertical separator and is in the accessibility tree only while the tray holds both parts. The parts are whatever the module renders, so the module names its own buttons.
Every control is a tab stop in document order. Tab and Shift+Tab move between them. There is no focus trap, no dismiss key and no arrow-key navigation. CallDock never moves focus. When open turns false the tray is inert from the first frame of its exit, so a control that held focus loses it; the shell moves focus to where the person works next.
CallDockSkeleton is aria-hidden and holds no text, so it announces nothing; the tray's region name is all that is read while the module loads.
CallDockError puts its glyph and message in a single role="status" region (polite, atomic by default), so the message is announced once when the state appears and again only if the message changes. The glyph is decorative. Retry is outside the region, a Button with its own name and a tab stop. The region is rendered with its message, so the first paint holds the message; a screen reader that announces a live region only when its content changes after it exists may read it in browse mode instead.
A Tooltip or Menu opened from a dock control portals outside the dock and renders in the page appearance. Their own contrast and focus behavior hold; they are not inside the tray's inverted region.
Under prefers-reduced-motion: reduce, or data-motion="reduced" on the html element, nothing travels and the fade stays, so the tray is complete at rest. While it leaves, the tray is inert, so Tab skips it and a pointer cannot press it, and once the exit has played nothing of it remains in the accessibility tree. The inverted surface keeps text and icons at WCAG AA in both page appearances: the default text is --color-fg-transient-default and the quieter tiers clear 4.5:1 on the surface. The tray keeps a 1px border (CanvasText under forced colors), so its edge is visible where shadows are dropped, and the rule between the groups keeps its border. Focus rings come from Button. Controls meet the 24 by 24 CSS px target size, and 44 by 44 under a coarse pointer, through Button.
The parts wrap inside the tray instead of scrolling sideways, so the tray reflows at 320 CSS px.