Skip to content

Fix accessibility of logos in main menubar #11066

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
srietkerk merged 5 commits into from
Jan 27, 2026
+45 −8
Merged

Fix accessibility of logos in main menubar #11066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cfb07ca
logos in top bar are aria hidden when uninteractive and buttons and a…
srietkerk Jan 22, 2026
d2a1a4a
remove redundant styling
srietkerk Jan 24, 2026
eba93bb
make the image based logos also buttons
srietkerk Jan 24, 2026
4e37714
Merge branch 'master' into srietkerk/main-menubar-aria-fix
srietkerk Jan 26, 2026
4a56aba
Merge branch 'master' into srietkerk/main-menubar-aria-fix
srietkerk Jan 27, 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
12 changes: 12 additions & 0 deletions theme/common.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,11 @@ div.simframe > iframe {
margin-bottom: 1px;
}

.ui.item.logo button.name,
.ui.item.logo button.name-short {
margin-left: 0 !important;
}

.ui.item.logo .name-short {
display: none;
}
Expand All @@ -618,6 +623,13 @@ div.simframe > iframe {
height: 1.4rem;
}

.ui.item.logo .logo-button {
img {
margin: 3px 0 0 0 !important;
}
}


/* Native Host (iOS app) back button */
.nativeback.ui.item {
margin-right: -1rem;
Expand Down
41 changes: 33 additions & 8 deletions webapp/src/headerbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import * as tutorial from "./tutorial";

import ISettingsProps = pxt.editor.ISettingsProps;
import { ThemeManager } from "../../react-common/components/theming/themeManager";
import { Button } from "../../react-common/components/controls/Button";

type HeaderBarView = "home" | "editor" | "tutorial" | "tutorial-tab" | "debugging" | "sandbox" | "time-machine";
const LONGPRESS_DURATION = 750;
Expand Down Expand Up @@ -107,7 +108,7 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
return <></>;
}

return <div className="ui item logo organization" role="presentation">
return <div className="ui item logo organization" aria-hidden="true">
{targetTheme.organizationWideLogo || targetTheme.organizationLogo
? <img className={`ui logo ${view !== "home" ? "mobile hide" : ""}`} src={targetTheme.organizationWideLogo || targetTheme.organizationLogo} alt={lf("{0} Logo", targetTheme.organization)} />
: <span className="name">{targetTheme.organization}</span>}
Expand All @@ -123,16 +124,40 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
const shouldLinkHome = pxt.shell.hasHomeScreen() && view !== "home";

const role = shouldLinkHome ? "menuitem" : "presentation";
const onClickHandler = shouldLinkHome ? this.brandIconClick : undefined;

// TODO: "sandbox" view components are temporary share page layout
return <div aria-label={lf("{0} Logo", targetTheme.boardName)} role={role} className={`ui item logo brand ${view !== "sandbox" && view !== "home" ? "mobile hide" : ""}`} onClick={onClickHandler}>
return <div aria-hidden={!shouldLinkHome} role={role} className={`ui item logo brand ${view !== "sandbox" && view !== "home" ? "mobile hide" : ""}`}>
{targetTheme.useTextLogo
? [ <span className="name" key="org-name">{targetTheme.organizationText}</span>,
<span className="name-short" key="org-name-short">{targetTheme.organizationShortText || targetTheme.organizationText}</span> ]
: (targetTheme.logo || targetTheme.portraitLogo
? <img className={`ui ${targetTheme.logoWide ? "small" : ""} logo`} src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)} />
: <span className="name">{targetTheme.boardName}</span>)}
? (shouldLinkHome
? [<Button className="name menu-button" key="org-name"
onClick={this.brandIconClick}
title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
label={targetTheme.organizationText} />,
<Button className="name-short menu-button" key="org-name-short"
onClick={this.brandIconClick}
title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
label={targetTheme.organizationShortText || targetTheme.organizationText} />]
: [ <span className="name" key="org-name">{targetTheme.organizationText}</span>,
<span className="name-short" key="org-name-short">{targetTheme.organizationShortText || targetTheme.organizationText}</span> ])
: (shouldLinkHome
? (targetTheme.logo || targetTheme.portraitLogo
? <Button className="logo-button menu-button"
onClick={this.brandIconClick}
title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
>
<img className={`ui ${targetTheme.logoWide ? "small" : ""} logo`} src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)} />
</Button>
: <Button className="name menu-button"
onClick={this.brandIconClick}
title={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
ariaLabel={lf("MakeCode {0} Logo, return to home page", targetTheme.boardName)}
label={targetTheme.boardName} />)
: (targetTheme.logo || targetTheme.portraitLogo
? <img className={`ui ${targetTheme.logoWide ? "small" : ""} logo`} src={targetTheme.logo || targetTheme.portraitLogo} alt={lf("{0} Logo", targetTheme.boardName)} />
: <span className="name">{targetTheme.boardName}</span>))}
</div>
}

Expand Down
Loading