Accessibility compliance: arcade color changes #10019
Conversation
…ctions to match arcade color update
| @@ -136,7 +136,7 @@ export class CodeCardView extends data.Component<CodeCardProps, CodeCardState> { | |||
| } | |||
| </div> : undefined} | |||
| {card.time ? <div className="meta"> | |||
| {card.tutorialLength ? <span className={`ui tutorial-progress ${tutorialDone ? "green" : "orange"} left floated label`}><i className={`${tutorialDone ? "trophy" : "circle"} icon`}></i> {lf("{0}/{1}", (card.tutorialStep || 0) + 1, card.tutorialLength)}</span> : undefined} | |||
| {card.tutorialLength ? <span className={`ui tutorial-progress ${tutorialDone ? "green" : "purple"} left floated label`}><i className={`${tutorialDone ? "trophy" : "circle"} icon`}></i> {lf("{0}/{1}", (card.tutorialStep || 0) + 1, card.tutorialLength)}</span> : undefined} | |||
There was a problem hiding this comment.
I'm trying to figure out where this component is. A little surprised we had it hard-coded to orange before and not theme-specific. Is it only on skillmaps?
There was a problem hiding this comment.
This is the progress indicator in the cards on the home page.
I was also shocked that this was hard coded to orange. It was just handled in micro:bit to have a style override for the .orange class and set the color to purple. It looks like Minecraft does something a bit different and doesn't rely on the class being orange to set the style. I looked into accessing the "secondaryColor" less variable and then plugging the calculated color into the class here, but I couldn't find a nice way to do it, so I just put purple here instead.
There was a problem hiding this comment.
Huh, interesting. Thanks for the info!
Related to the changes with this PR: microsoft/pxt-arcade#6425
There are some parts of the colors that needed to be changed in pxt rather than just arcade. The asset editor and skillmap styling is defined in pxt, so I needed to change colors here for those things.