webui: [a11y] fix keyboard navigation issues in chat interface and sidebar

[vignesh191]

Overview

This PR fixes a bunch of keyboard navigation bugs in the chat UI and sidebar (see details below).

The main issues: some elements had two tab stops when they should've had one, some focusable elements were invisible until you hovered them (so keyboard users couldn't see where they were making them inaccessible), and the kebab menu on sidebar conversations wasn't reachable by keyboard at all.

Affects action icons, model and stat badges, attachment thumbnails, the horizontal scroll carousel, the model selector dropdown, and the conversation sidebar.

This addresses issues described by #13531 and #20832

Demo demonstrating keyboard navigation (I'm Tabbing and Shift+Tabbing around), this can also be tested using the local Storybook:

shiftdemoing.mov

Additional information

• Double tab stops from Tooltip.Trigger: <Tooltip.Trigger> renders its own <button> by default, so wrapping it around something that's already a button (or link, or another trigger) gave you two tab stops and nested <button> elements, which is invalid HTML. Fixed by using bits-ui's child snippet, which is the same fix applied in webui : [ChatFormActionAdd][a11y] fix accessibility issues in add menu trigger and items #22736. Applied in ActionIcon, BadgeInfo, ChatMessageStatistics, ChatMessageStatisticsBadge, ModelBadge, ModelsSelectorDropdown, DropdownMenuActions, and the fork-icon link in SidebarNavigationConversationItem. In ChatMessageStatistics, the 4 view-switcher buttons were also extracted into a single viewButton snippet to avoid duplicating the trigger pattern four times
• Hover-only controls now show on focus too: the sidebar conversation kebab and the X button on attachment thumbnails were opacity-0 until you hovered, so tabbing to them did nothing visible. Added :focus-within / group-focus-within:opacity-100 next to the existing hover rules in SidebarNavigationConversationItem, ChatAttachmentsListItemThumbnailFile, and ChatAttachmentsListItemThumbnailImage.
• Carousel arrows no longer focusable when hidden: in HorizontalScrollCarousel, the scroll arrows were hidden with opacity-0 pointer-events-none when there was nothing to scroll, but they were still in the tab order. Now they use disabled as the single source of truth, with disabled:opacity-0 disabled:pointer-events-none handling the styling. This same disabled pattern was used in ChatScreenActionScrollDown.svelte too because it was causing a ghost focus when Shift+Tabbing from the initial chat <textarea>.
• Conversation kebab now mounts on keyboard focus: the kebab only rendered on mouseover, so keyboard focus had nothing to land on. Added onfocusin to mount it when focused, and onfocusout with a relatedTarget.contains check so it only unmounts once focus has actually left the row.
• Carousel arrows now respond to size changes: canScrollLeft / canScrollRight only updated on mount or scroll, so resizing the window or collapsing the sidebar wouldn't refresh them. Swapped the setTimeout for a ResizeObserver on the scroll container.
• BadgeInfo API tweak: extended its props with HTMLButtonAttributes and added a ...rest spread so the child snippet pattern can forward trigger props through it. Needed for the tooltip fix to work on ChatMessageStatisticsBadge and ModelBadge.

Requirements

• I have read and agree with the contributing guidelines
• AI usage disclosure: Yes, AI was used to the UI component libraries patterns/usage and actually make the code diff, after a viable solution for each were decided upon

[vignesh191]

@allozaur I would appreciate it greatly if you can take a look at this PR when you can 😄. This PR makes keyboard navigation from/to the chat input and chat history sidebar to work correctly. I've detailed the changes in the PR description and have left comments throughout the PR to clarify less obvious changes.

Do note that I didn't open an issue for this since it's a collection of small cleanups/fixes. Splitting them into separate issues/PRs felt heavier than the changes warranted imho.

[allozaur]

hey @vignesh191, i will have it reviewed this week

[allozaur]

Hey, @vignesh191 great job overall! Please just rebase and i think we good to go :)

[vignesh191]

@allozaur pulled and rebased, thanks for looking!

[allozaur]

@ServeurpersoCom please also review this and test on ur end :)

[ServeurpersoCom]

Keyboard selection testing + quick non-reg test on latest Firefox / stock Edge / Chrome mobile. LGTM