75ee380a07* studio/frontend: include filename in attachment aria-label and img alt
When a chat has multiple attachments of the same kind, the rendered
tiles all share the generic accessible name "Image attachment" or
"Document attachment". Sighted users get the filename from the Radix
tooltip that pops on hover, but:
- screen-reader users hear "Image attachment, Image attachment,
Image attachment" with no way to distinguish three PNGs;
- touch-device users (no hover) lose the filename entirely;
- keyboard-only users would have to focus and read a tooltip that
isn't always announced.
Fold the filename into both the button's aria-label and the thumbnail
<img alt>, falling back to the existing labels when the attachment has
no filename. Sighted UX is unchanged: the Radix tooltip already shows
the same name on hover, and the visible aria-label has no rendered
counterpart.
Found while running a multi-image attach probe in the autonomous Studio
UX loop (cycle 8). Repro:
await page.evaluate(`Array.from(document.querySelectorAll(
'button[aria-label*="attachment" i]'
)).map(b => b.getAttribute('aria-label'))`)
Before: ["Image attachment", "Document attachment", "Add Attachment"]
After: ["Image attachment: test_red_circle.png",
"Document attachment: notes.txt",
"Add Attachment"]
* studio/frontend: shorten attachment a11y comment
---------
Co-authored-by: danielhanchen <michaelhan2050@gmail.com>
|
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| .gitkeep | ||
| .npmrc | ||
| biome.json | ||
| components.json | ||
| data-designer.openapi (1).yaml | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||