Skip to content

more github editor accessibility fixes #11431

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.

Sign up for GitHub

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

Merged
riknoll merged 5 commits into from
Jun 26, 2026
Merged

more github editor accessibility fixes #11431

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3520f42
fix control labelling in github release dialog
riknoll Jun 25, 2026
3c26b4a
make sure commit message has a label
riknoll Jun 25, 2026
44408b6
set aria label and clean up whitespace
riknoll Jun 25, 2026
2824cbf
fix placeholder contrast
riknoll Jun 25, 2026
44c1209
Merge branch 'master' into dev/riknoll/microbit-gh-release-dialog-acc
riknoll Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion react-common/components/controls/FocusList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface FocusListProps extends ContainerProps {
focusSelectsItem?: boolean;
useUpAndDownArrowKeys?: boolean;
title?: string;
ariaLabelledby?: string;
onItemReceivedFocus?: (item: HTMLElement) => void;
onClose?: () => void;
}
Expand All @@ -32,6 +33,7 @@ export const FocusList = (props: FocusListProps) => {
onItemReceivedFocus,
useUpAndDownArrowKeys,
title,
ariaLabelledby,
onClose
} = props;

Expand Down Expand Up @@ -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}
</div>
);
Expand Down
8 changes: 6 additions & 2 deletions react-common/components/controls/RadioButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface RadioButtonGroupProps extends ControlProps {
choices: RadioGroupChoice[];
selectedId: string;
onChoiceSelected: (id: string) => void;
ariaLabelledby?: string;
}

export interface RadioGroupChoice {
Expand All @@ -23,10 +24,11 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
className,
ariaHidden,
ariaLabel,
ariaLabelledby,
role,
choices,
selectedId,
onChoiceSelected
onChoiceSelected,

@srietkerk srietkerk Jun 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Should this comma be here?

@jwunderl jwunderl Jun 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

it's nice to leave trailing commas in lists / etc in ts when they're each on separate lines, because it makes future changes diff better (you don't get a line noted as changed that is just adding , to an existing line) / ts just treats as normal

} = props;

const onChoiceClick = (id: string) => {
Expand All @@ -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 =>
<div key={choice.id}
className={classList("common-radio-choice", choice.className, selectedId === choice.id && "selected" )}>
Expand Down
8 changes: 8 additions & 0 deletions react-common/styles/controls/RadioButtonGroup.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
28 changes: 28 additions & 0 deletions theme/github.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,4 +260,32 @@
width: 100%;
}
}
}

.common-input-wrapper.github-commit-message {
margin-bottom: 1rem;

.common-input-group {
height: 3rem;

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);
}
}
}
}
14 changes: 12 additions & 2 deletions theme/semantic-ui-overrides.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
37 changes: 21 additions & 16 deletions webapp/src/githubbutton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -78,21 +79,25 @@ export class GithubButton extends sui.UIElement<GithubButtonProps, GithubButtonS
: modified ? lf("{0}: review, commit & push local changes to GitHub.", repoName)
: lf("{0}: local changes are synchronized with GitHub.", repoName)

return <div key="githubeditorbtn" role="button" className={`${defaultCls}
${this.props.className || ""}`}
title={title}
onClick={this.handleClick} onKeyDown={fireClickOnEnter}
tabIndex={0}
>
<i className="github icon" />
<span className="ui mobile hide">{displayName}</span>
<span className="ui long mobile hide">
<i className={`${
hasissue ? "exclamation circle"
: haspull ? "arrow alternate down"
: modified ? "arrow alternate up"
: "check"} icon`} />
</span>
</div>;
return (
<div
role="button"
className={classList(defaultCls, this.props.className)}
title={title}
aria-label={title}
onClick={this.handleClick} onKeyDown={fireClickOnEnter}
tabIndex={0}
>
<i className="github icon" />
<span className="ui mobile hide">{displayName}</span>
<span className="ui long mobile hide">
<i className={`${
hasissue ? "exclamation circle"
: haspull ? "arrow alternate down"
: modified ? "arrow alternate up"
: "check"} icon`} />
</span>
</div>
);
}
}
88 changes: 59 additions & 29 deletions webapp/src/gitjson.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ 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"
import { Input } from "../../react-common/components/controls/Input"

const MAX_COMMIT_DESCRIPTION_LENGTH = 70;

Expand Down Expand Up @@ -423,8 +425,8 @@ class GithubComponent extends data.Component<GithubProps, GithubState> {
const vpatch = pxt.semver.parse(pxt.semver.stringify(v)); vpatch.patch++;

let bumpType: string = "patch";
function onBumpChange(e: React.ChangeEvent<HTMLInputElement>) {
bumpType = e.currentTarget.name;
function onBumpChange(id: string) {
bumpType = id;
coretsx.forceUpdate();
}
let shouldCacheTutorial: boolean = false;
Expand All @@ -438,33 +440,49 @@ class GithubComponent extends data.Component<GithubProps, GithubState> {
disagreeLbl: lf("Cancel"),
jsxd: () => <div>
<div className="grouped fields">
<label>{lf("Choose a release version that describes the changes you made to the code.")}
<label id="githubReleaseVersionLabel">
{lf("Choose a release version that describes the changes you made to the code.")}
{sui.helpIconLink("/github/release#versioning", lf("Learn about version numbers."))}
</label>
<div className="field">
<div className="ui radio checkbox">
<input type="radio" name="patch" checked={bumpType == "patch"} aria-checked={bumpType == "patch"} onChange={onBumpChange} />
<label>{lf("{0}: patch (bug fixes or other non-user visible changes)", pxt.semver.stringify(vpatch))}</label>
</div>
</div>
<div className="field">
<div className="ui radio checkbox">
<input type="radio" name="minor" checked={bumpType == "minor"} aria-checked={bumpType == "minor"} onChange={onBumpChange} />
<label>{lf("{0}: minor change (added function or optional parameters)", pxt.semver.stringify(vminor))}</label>
</div>
</div>
<div className="field">
<div className="ui radio checkbox">
<input type="radio" name="major" checked={bumpType == "major"} aria-checked={bumpType == "major"} onChange={onBumpChange} />
<label>{lf("{0}: major change (renamed functions, deleted parameters or functions)", pxt.semver.stringify(vmajor))}</label>
</div>
</div>
<RadioButtonGroup
id="githubReleaseVersion"
selectedId={bumpType}
ariaLabelledby="githubReleaseVersionLabel"
choices={[
{
id: "patch",
label: lf("{0}: patch (bug fixes or other non-user visible changes)", pxt.semver.stringify(vpatch)),
title: lf("{0}: patch (bug fixes or other non-user visible changes)", pxt.semver.stringify(vpatch)),
},
{
id: "minor",
label: lf("{0}: minor change (added function or optional parameters)", pxt.semver.stringify(vminor)),
title: lf("{0}: minor change (added function or optional parameters)", pxt.semver.stringify(vminor)),
},
{
id: "major",
label: lf("{0}: major change (renamed functions, deleted parameters or functions)", pxt.semver.stringify(vmajor)),
title: lf("{0}: major change (renamed functions, deleted parameters or functions)", pxt.semver.stringify(vmajor)),
}
]}
onChoiceSelected={onBumpChange}
/>
</div>
<div className="grouped fields">
<label>{lf("Advanced")}</label>
<label id="advancedLabel">{lf("Advanced")}</label>
<div className="field checkbox">
<input type="checkbox" name="cachetutorial" checked={shouldCacheTutorial} aria-checked={shouldCacheTutorial} onChange={onCacheTutorialChange} />
<label>{lf("Optimize for tutorials by caching information about the markdown.")}</label>
<input
type="checkbox"
id="cachetutorial"
name="cachetutorial"
checked={shouldCacheTutorial}
aria-checked={shouldCacheTutorial}
aria-labelledby="cachetutorialLabel"
aria-describedby="advancedLabel"
onKeyDown={fireClickOnEnter}
onChange={onCacheTutorialChange}
/>
<label id="cachetutorialLabel" htmlFor="cachetutorial">{lf("Optimize for tutorials by caching information about the markdown.")}</label>
</div>
</div>
</div>
Expand All @@ -474,10 +492,12 @@ class GithubComponent extends data.Component<GithubProps, GithubState> {
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 {
Expand Down Expand Up @@ -1274,9 +1294,19 @@ class CommmitComponent extends sui.StatelessUIElement<GitHubViewProps> {
const descrError = description && description.length > MAX_COMMIT_DESCRIPTION_LENGTH
? lf("Your description is getting long...") : undefined;
return <div>
<div className="ui field">
<sui.Input type="text" placeholder={lf("Describe your changes.")} value={this.props.parent.state.description} onChange={this.handleDescriptionChange}
error={descrError} />
<div>
<Input
id="githubCommitDescription"
className="github-commit-message"
label={lf("Commit Message")}
type="text"
placeholder={lf("Describe your changes.")}
initialValue={this.props.parent.state.description}
onChange={this.handleDescriptionChange}
/>
{descrError &&
<div className="ui yellow message">{descrError}</div>
}
</div>
<div className="ui field">
<sui.Button className="green" text={lf("Commit and push changes")} icon="long arrow alternate up" onClick={this.handleCommitClick} onKeyDown={fireClickOnEnter} />
Expand Down
Loading