webui : [ChatFormActionAdd][a11y] fix accessibility issues in add menu trigger and items

[vignesh191]

Overview

Hello! I found some more keyboard navigation issues in the webui. These changes are for the ChatFormActionAdd component. These changes fix two a11y issues:

1. Tab must be pressed three times on the "+" button before moving to the next focusable element. Tab should only be pressed once to navigate out of the element.
2. When the "+" button is clicked and the menu item is shown, disabled menu rows (Images, Audio Files when the model lacks vision/audio) receive keyboard focus and visually highlight. Focus should be placed on the first non-disabled focusable menu item.

Both these issues originate from the same root cause: the Tooltip.Trigger element. Tooltip.Trigger renders a focusable <button> by default. Wrapping it around another focusable element (<Button>, <DropdownMenu.Item>, or anything else) produced nested focusable elements and makes extra tab stops for keyboard nav, and ghost wrappers that disrupt mouse events and break focus. Tabbing inception.

Additional information

This can be reproduced in the local Storybook instance (ChatScreenForm) component. Tab through the "+" button and notice, Tab must be pressed 3 times before moving onto the next focusable element. Click on the "+" button and notice focus is incorrectly placed on a disabled menu item.

IMO the correct fix for this issue is to use the child snippet pattern from bits-ui. We can use it to pass Tooltip.Trigger's props directly onto the real underlying element without any wrappers, and prevent Tooltip.Trigger from making its own <button> element. I actually was inspired to use this pattern from existing code that already uses this pattern: ModelsSelectorDropdown.svelte :)

Requirements

• I have read and agree with the contributing guidelines
• AI usage disclosure: Yes, AI was used to understand bits-ui patterns/usage in this repo and to create the actual diff after I decided that this is the most elegant solution

[ggml-gh-bot]

Hi @vignesh191, thanks for your contribution!

Per our contribution guidelines, the automated PR checker found the following issue(s) that need your attention:

• Multiple open PRs from a new contributor: We limit new contributors (those without a previously merged PR) to 1 open PR at a time. You currently have 2 open PRs.

---

Please note that maintainers reserve the right to make final decisions on PRs. If you believe there is a mistake, please comment below.

[vignesh191]

This div may look off, but disabled rows ( such as Images / Audio Files) need it.

Disabled rows (DropdownMenu.Item) have pointer-events: none, so the tooltip's hover listeners won't fire there. Wrapping it in a non-focusable <div> catches these pointer events correctly.

tabindex={-1} here overrides Tooltip.Trigger's default tabindex=0 to keep this div out of tabbing, and cursor-default overrides tooltip-trigger's hardcoded cursor-pointer since the row isn't clickable.