feat(site): support icon and description in preset #19063
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR updates the workspace creation UI to support icon and description display for presets by replacing the SelectFilter component with the more feature-rich Combobox component.
- Replaces
SelectFilterwithComboboxin the workspace creation form - Updates preset option structure to include icon and description fields
- Modifies
Comboboxto render preset icons usingExternalImageinstead ofAvatar
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | Replaces SelectFilter with Combobox and updates preset options to include icon/description |
| site/src/components/Combobox/Combobox.tsx | Updates icon rendering to use ExternalImage instead of Avatar |
| @@ -103,7 +103,8 @@ export const SearchAndFilter: Story = { | |||
| screen.queryByRole("option", { name: "Kotlin" }), | |||
| ).not.toBeInTheDocument(); | |||
| }); | |||
| await userEvent.click(screen.getByRole("option", { name: "Rust" })); | |||
| // Accessible name includes both image alt text and text content: "Rust Rust" | |||
| await userEvent.click(screen.getByRole("option", { name: "Rust Rust" })); | |||
There was a problem hiding this comment.
Since we changed the icon image to be an ExternalImage with alt={option.displayName} https://github.com/coder/coder/pull/19063/files#diff-f7c0d4d4c43b6dd17458ff44a1a0dfdccfae367b09ffe41fdbe09c48c151e466R126
The name includes both the image alt text (Rust) + the text content (Rust). Let me know if this is ok, or if there is a better way to filter out this element.
There was a problem hiding this comment.
Sorry to come in at the last minute (after things have been merged), but these test changes are papering over accessibility problems that the new code introduced. This is especially relevant, as there's a good chance that I'm going to be submitting a VPAT (Voluntary Product Accessibility Template) audit for coder/coder sometime in H2 for Marketing/GTM
There's a reason why the testing library changed the accessible name to "Rust Rust" – because that's the value that a screen reader will read out to a user who can't see. It's going to be super annoying for the user if they get doubled-up announcements as they cycle through every item in the options list
In my mind, what we can do instead is:
- Revert the accessible names for the test selectors to remove the duplicated values (so just
Rustand justGo, rather thanRust RustandGo Go) - Set the alt text to an empty string
Alt text is only valuable if the content of the image isn't strictly decorative, and actually has semantic meaning that other content in the UI isn't capturing. Because we have the name right next to the image, we don't need the alt text. And or UI programming specifically, you can get away with empty alt text more often than you would think
There was a problem hiding this comment.
@Parkreiner Thank you for letting me know about this, this is really helpful context 👍
You're right: this PR introduced alt={option.displayName}, which led to the repeated accessible name (e.g. "Rust Rust"). I hadn’t realized that would have a direct impact on screen readers, that's super useful to know.
I’ll go ahead and:
- Revert the
altattribute to use an empty string. - Update the tests to reflect the correct accessible names without duplication.
Appreciate you taking the time to call this out 🙂
Description
This PR updates the
CreateWorkspacePageViewto use theComboboxReact component instead ofSelectFilterfor the Preset selection.Changes
CreateWorkspacePageViewto use theComboboxcomponent in place ofSelectFilter.Comboboxcomponent to render preset icons usingExternalImageinstead ofAvatar.Follow-up from: #18977