Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create new project modal wizard radio buttons #2655

Merged
merged 12 commits into from
Apr 5, 2024

Conversation

sharon-wang
Copy link
Member

Intent

Defines RadioButton and RadioGroup to be used in modal dialog components. The RadioButton circle is custom, leveraging theme colours instead of the default radio button look.

Preview of radio buttons in different themes

image image image image

Interaction preview (clicking and keyboard nav)

new_project_radio_buttons.mp4

Approach

  • Implement RadioButton and RadioGroup
  • A RadioButtonItem[] is passed to the RadioGroup for display
  • An initial selected item can be specified to the RadioGroup
  • Keyboard navigation is supported, with the exception of a bug (see above video, start at ~0:53 mark to see the focus go to the bottom bar of the IDE)
    • The selected item in the radio group has tabIndex: 0. Other non-selected items have tabIndex: -1
  • Added some radio button theme colours (background, foreground, border)
  • Moved wizardStep and wizardSubStep to src/vs/workbench/browser/positronNewProjectWizard/components instead of in the broader positronModalDialog directory)
  • The Python Environment Step of the new project wizard has been updated to use the new radio buttons and conditionally display the appropriate inputs based on radio button selection

QA Notes

This change is still part of scaffolding the feature and does not have corresponding test cases at the moment!

Arrow key navigation is not yet implemented. Helpful resource: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
These IDs can be referenced by other elements to set the aria attributes such as `aria-labelledby` and `aria-describedby`.
Remove `isFirstButtonInGroup` from RadioButton because the tabIndex should be set on the currently selected button, not necessarily the first button in the group. If we support radio button groups without a default selection, then we may want to add similar logic back in, to set the tabIndex on the first button in the group if no button is selected.
Copy link
Contributor

@timtmok timtmok left a comment

Choose a reason for hiding this comment

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

Looks good!

Copy link
Contributor

@softwarenerd softwarenerd left a comment

Choose a reason for hiding this comment

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

Super solid!!

@softwarenerd softwarenerd merged commit d8accff into main Apr 5, 2024
1 check passed
@softwarenerd softwarenerd deleted the feature/project-wizard-radio-buttons branch April 5, 2024 23:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants