microsoft / microsoft/pxt

Ineffective color contrast on radio buttons in the Sound Effect editor

Open
#10,563 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
641
Avg merge
12h 4m
Merged PRs (30d)
57

Description

Describe the bug

Building pxt and pxt-microbit on master, the Makecode Sound Effect editor waveform radio buttons do not contrast sufficiently to show which is selected (see screenshots below). Raising in pxt because this appears to be where the theme color is defined for this particular element.

To Reproduce

  1. Create a Makecode project
  2. Add a sound effect block
  3. Click on the sound effect block to open the editor
  4. Choose from the different waveform options

Expected behavior

I would expect it to be more obvious which of the waveform buttons is currently selected. This is a problem for visual accessibility. Previous versions, including the one at https://makecode.microbit.org, have had a clearer distinction between the selected and unselected buttons.

Screenshots

This is how it appears in master currently (this issue):

Image

And this is how it used to appear (better contrast):

Image
  • OS: Mac OS
  • Browser: chrome
  • Version: 136.0.7103.48

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in a MakeCode project by opening a sound effect block and selecting the waveform radio buttons. Inspect the Sound Effect editor's theme styling and compare selected versus unselected states with the screenshots; done when the selected waveform is clearly distinguishable and the contrast issue is resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.