Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat(site): support icon and description in preset#19063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged

Conversation

ssncferreira
Copy link
Contributor

@ssncferreirassncferreira commentedJul 28, 2025
edited
Loading

Description

This PR updates theCreateWorkspacePageView to use theCombobox React component instead ofSelectFilter for the Preset selection.

Changes

  • UpdatedCreateWorkspacePageView to use theCombobox component in place ofSelectFilter.
  • Modified theCombobox component to render preset icons usingExternalImage instead ofAvatar.
Screenshot 2025-07-29 at 12 27 14Screenshot 2025-07-29 at 12 27 21

Follow-up from:#18977

@ssncferreirassncferreira changed the titlefeat: UI create workspace page with preset's icon and descriptionfeat(site): support icon and description in presetJul 28, 2025
@bpmctbpmct requested a review fromCopilotJuly 28, 2025 19:22
Copy link
Contributor

@CopilotCopilotAI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Pull Request Overview

This PR updates the workspace creation UI to support icon and description display for presets by replacing theSelectFilter component with the more feature-richCombobox component.

  • ReplacesSelectFilter withCombobox in the workspace creation form
  • Updates preset option structure to include icon and description fields
  • ModifiesCombobox to render preset icons usingExternalImage instead ofAvatar

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

FileDescription
site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsxReplaces SelectFilter with Combobox and updates preset options to include icon/description
site/src/components/Combobox/Combobox.tsxUpdates icon rendering to use ExternalImage instead of Avatar

@ssncferreirassncferreira marked this pull request as ready for reviewJuly 29, 2025 09:21
});
awaituserEvent.click(screen.getByRole("option",{name:"Rust"}));
// Accessible name includes both image alt text and text content: "Rust Rust"
awaituserEvent.click(screen.getByRole("option",{name:"Rust Rust"}));
Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Since we changed the icon image to be an ExternalImage withalt={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.

jaaydenh reacted with thumbs up emoji
Copy link
Member

@ParkreinerParkreinerJul 29, 2025
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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 forcoder/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:

  1. Revert the accessible names for the test selectors to remove the duplicated values (so justRust and justGo, rather thanRust Rust andGo Go)
  2. 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

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

@Parkreiner Thank you for letting me know about this, this is really helpful context 👍

You're right: this PR introducedalt={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 thealt attribute 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 🙂

@ssncferreirassncferreira merged commit71738f6 intomainJul 29, 2025
27 checks passed
@ssncferreirassncferreira deleted the ssncferreira/feat-ui-preset-icon-description branchJuly 29, 2025 16:45
@github-actionsgithub-actionsbot locked and limited conversation to collaboratorsJul 29, 2025
Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.
Reviewers

@ParkreinerParkreinerParkreiner left review comments

Copilot code reviewCopilotCopilot left review comments

@jaaydenhjaaydenhjaaydenh approved these changes

Assignees

@ssncferreirassncferreira

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

3 participants
@ssncferreira@jaaydenh@Parkreiner

[8]ページ先頭

©2009-2025 Movatter.jp