From 3520f4271aa3bd9bd2be860ee0105279f86a4578 Mon Sep 17 00:00:00 2001 From: Richard Knoll Date: Thu, 25 Jun 2026 15:33:54 -0700 Subject: [PATCH 1/4] fix control labelling in github release dialog --- .../components/controls/FocusList.tsx | 6 +- .../components/controls/RadioButtonGroup.tsx | 8 ++- .../styles/controls/RadioButtonGroup.less | 8 +++ webapp/src/gitjson.tsx | 71 ++++++++++++------- 4 files changed, 64 insertions(+), 29 deletions(-) diff --git a/react-common/components/controls/FocusList.tsx b/react-common/components/controls/FocusList.tsx index 9a1b7340af03..8b777cf91c9d 100644 --- a/react-common/components/controls/FocusList.tsx +++ b/react-common/components/controls/FocusList.tsx @@ -7,6 +7,7 @@ export interface FocusListProps extends ContainerProps { focusSelectsItem?: boolean; useUpAndDownArrowKeys?: boolean; title?: string; + ariaLabelledby?: string; onItemReceivedFocus?: (item: HTMLElement) => void; onClose?: () => void; } @@ -32,6 +33,7 @@ export const FocusList = (props: FocusListProps) => { onItemReceivedFocus, useUpAndDownArrowKeys, title, + ariaLabelledby, onClose } = props; @@ -162,7 +164,9 @@ export const FocusList = (props: FocusListProps) => { ref={handleRef} aria-hidden={ariaHidden} aria-label={ariaLabel} - title={title}> + title={title} + aria-labelledby={ariaLabelledby} + > {children} ); diff --git a/react-common/components/controls/RadioButtonGroup.tsx b/react-common/components/controls/RadioButtonGroup.tsx index 56b61f7472d0..ac186ffdaf50 100644 --- a/react-common/components/controls/RadioButtonGroup.tsx +++ b/react-common/components/controls/RadioButtonGroup.tsx @@ -7,6 +7,7 @@ export interface RadioButtonGroupProps extends ControlProps { choices: RadioGroupChoice[]; selectedId: string; onChoiceSelected: (id: string) => void; + ariaLabelledby?: string; } export interface RadioGroupChoice { @@ -23,10 +24,11 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { className, ariaHidden, ariaLabel, + ariaLabelledby, role, choices, selectedId, - onChoiceSelected + onChoiceSelected, } = props; const onChoiceClick = (id: string) => { @@ -39,7 +41,9 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { ariaHidden={ariaHidden} ariaLabel={ariaLabel} role={role || "radiogroup"} - childTabStopId={selectedId}> + childTabStopId={selectedId} + ariaLabelledby={ariaLabelledby} + > {choices.map(choice =>
diff --git a/react-common/styles/controls/RadioButtonGroup.less b/react-common/styles/controls/RadioButtonGroup.less index 76bdae30bbb4..2713df9f3fb3 100644 --- a/react-common/styles/controls/RadioButtonGroup.less +++ b/react-common/styles/controls/RadioButtonGroup.less @@ -41,3 +41,11 @@ color: var(--pxt-primary-background); } } + + +.common-radio-group:not(.common-radio-buttons) .common-radio-choice { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; +} \ No newline at end of file diff --git a/webapp/src/gitjson.tsx b/webapp/src/gitjson.tsx index 5f5d218e88d2..f9b1fcde0e03 100644 --- a/webapp/src/gitjson.tsx +++ b/webapp/src/gitjson.tsx @@ -21,6 +21,7 @@ import UserInfo = pxt.editor.UserInfo; import { Accordion } from "../../react-common/components/controls/Accordion"; import { Button } from "../../react-common/components/controls/Button" import { Checkbox } from "../../react-common/components/controls/Checkbox"; +import { RadioButtonGroup } from "../../react-common/components/controls/RadioButtonGroup" const MAX_COMMIT_DESCRIPTION_LENGTH = 70; @@ -423,8 +424,8 @@ class GithubComponent extends data.Component { const vpatch = pxt.semver.parse(pxt.semver.stringify(v)); vpatch.patch++; let bumpType: string = "patch"; - function onBumpChange(e: React.ChangeEvent) { - bumpType = e.currentTarget.name; + function onBumpChange(id: string) { + bumpType = id; coretsx.forceUpdate(); } let shouldCacheTutorial: boolean = false; @@ -438,33 +439,49 @@ class GithubComponent extends data.Component { disagreeLbl: lf("Cancel"), jsxd: () =>
-
- +
- - + +
@@ -474,10 +491,12 @@ class GithubComponent extends data.Component { return let newv = vpatch; - if (bumpType == "major") + if (bumpType == "major") { newv = vmajor; - else if (bumpType == "minor") + } + else if (bumpType == "minor") { newv = vminor; + } const newVer = pxt.semver.stringify(newv) this.showLoading("github.release.new", true, lf("creating release...")); try { From 3c26b4a8835606c6d06701874e2e6248415972f1 Mon Sep 17 00:00:00 2001 From: Richard Knoll Date: Thu, 25 Jun 2026 16:44:15 -0700 Subject: [PATCH 2/4] make sure commit message has a label --- theme/github.less | 12 ++++++++++++ webapp/src/gitjson.tsx | 17 ++++++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/theme/github.less b/theme/github.less index f5c232bee4ca..65dd99d92c38 100644 --- a/theme/github.less +++ b/theme/github.less @@ -260,4 +260,16 @@ width: 100%; } } +} + +.common-input-wrapper.github-commit-message { + margin-bottom: 1rem; + + .common-input-group { + height: 3rem; + + input { + height: 3rem; + } + } } \ No newline at end of file diff --git a/webapp/src/gitjson.tsx b/webapp/src/gitjson.tsx index f9b1fcde0e03..c6dc50ab378e 100644 --- a/webapp/src/gitjson.tsx +++ b/webapp/src/gitjson.tsx @@ -22,6 +22,7 @@ import { Accordion } from "../../react-common/components/controls/Accordion"; import { Button } from "../../react-common/components/controls/Button" import { Checkbox } from "../../react-common/components/controls/Checkbox"; import { RadioButtonGroup } from "../../react-common/components/controls/RadioButtonGroup" +import { Input } from "../../react-common/components/controls/Input" const MAX_COMMIT_DESCRIPTION_LENGTH = 70; @@ -1293,9 +1294,19 @@ class CommmitComponent extends sui.StatelessUIElement { const descrError = description && description.length > MAX_COMMIT_DESCRIPTION_LENGTH ? lf("Your description is getting long...") : undefined; return
-
- +
+ + {descrError && +
{descrError}
+ }
From 44408b69790cc0a7ff2ab59c752293ed2d634702 Mon Sep 17 00:00:00 2001 From: Richard Knoll Date: Thu, 25 Jun 2026 16:44:27 -0700 Subject: [PATCH 3/4] set aria label and clean up whitespace --- webapp/src/githubbutton.tsx | 37 +++++++++++++++++++++---------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/webapp/src/githubbutton.tsx b/webapp/src/githubbutton.tsx index 54669248c917..e735666be5ef 100644 --- a/webapp/src/githubbutton.tsx +++ b/webapp/src/githubbutton.tsx @@ -5,6 +5,7 @@ import * as workspace from "./workspace"; import { fireClickOnEnter } from "./util"; import ISettingsProps = pxt.editor.ISettingsProps; +import { classList } from "../../react-common/components/util"; interface GithubButtonProps extends ISettingsProps { className?: string; @@ -78,21 +79,25 @@ export class GithubButton extends sui.UIElement - - {displayName} - - - -
; + return ( +
+ + {displayName} + + + +
+ ); } } From 2824cbf1cc7d07fb90d2de14119ed8b056f9cf4a Mon Sep 17 00:00:00 2001 From: Richard Knoll Date: Thu, 25 Jun 2026 16:50:55 -0700 Subject: [PATCH 4/4] fix placeholder contrast --- theme/github.less | 16 ++++++++++++++++ theme/semantic-ui-overrides.less | 14 ++++++++++++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/theme/github.less b/theme/github.less index 65dd99d92c38..971a29e122d0 100644 --- a/theme/github.less +++ b/theme/github.less @@ -270,6 +270,22 @@ input { height: 3rem; + + &::-webkit-input-placeholder { + color: var(--pxt-neutral-alpha50); + } + + &:-moz-placeholder { + color: var(--pxt-neutral-alpha50); + } + + &::-moz-placeholder { + color: var(--pxt-neutral-alpha50); + } + + &::-ms-input-placeholder { + color: var(--pxt-neutral-alpha50); + } } } } \ No newline at end of file diff --git a/theme/semantic-ui-overrides.less b/theme/semantic-ui-overrides.less index 3f71cfbcea6a..1eae38c74eb1 100644 --- a/theme/semantic-ui-overrides.less +++ b/theme/semantic-ui-overrides.less @@ -226,8 +226,18 @@ body.pxt-theme-root { border: 1px solid var(--pxt-neutral-stencil1); color: var(--pxt-neutral-foreground1); - &::-webkit-input-placeholder, - &::-moz-placeholder, + &::-webkit-input-placeholder { + color: var(--pxt-neutral-alpha50); + } + + &:-moz-placeholder { + color: var(--pxt-neutral-alpha50); + } + + &::-moz-placeholder { + color: var(--pxt-neutral-alpha50); + } + &::-ms-input-placeholder { color: var(--pxt-neutral-alpha50); }