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}
         </div>
     );
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 =>
                 <div key={choice.id}
                     className={classList("common-radio-choice", choice.className, selectedId === choice.id && "selected" )}>
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/theme/github.less b/theme/github.less
index f5c232bee4ca..971a29e122d0 100644
--- a/theme/github.less
+++ b/theme/github.less
@@ -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);
+            }
+        }
+    }
 }
\ 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);
             }
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<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>
+        );
     }
 }
diff --git a/webapp/src/gitjson.tsx b/webapp/src/gitjson.tsx
index 5f5d218e88d2..c6dc50ab378e 100644
--- a/webapp/src/gitjson.tsx
+++ b/webapp/src/gitjson.tsx
@@ -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;
 
@@ -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;
@@ -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>
@@ -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 {
@@ -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} />