From cfb07caf2f39446f62923d46ef3e2a4fecc9e126 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Thu, 22 Jan 2026 23:36:08 +0000
Subject: [PATCH 1/3] logos in top bar are aria hidden when uninteractive and
 buttons and a menuitem when interactive

---
 theme/common.less        |  9 +++++++++
 webapp/src/headerbar.tsx | 21 +++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/theme/common.less b/theme/common.less
index 6a983b5a7025..dfda68224075 100644
--- a/theme/common.less
+++ b/theme/common.less
@@ -604,6 +604,15 @@ div.simframe > iframe {
     margin-bottom: 1px;
 }
 
+.ui.item.logo span.name {
+    margin-left: 1rem;
+    margin-bottom: 1px;
+}
+
+.ui.item.logo button.name, button.name-short {
+    margin-left: 0 !important;
+}
+
 .ui.item.logo .name-short {
     display: none;
 }
diff --git a/webapp/src/headerbar.tsx b/webapp/src/headerbar.tsx
index 590e36ba7bae..d58c54e80bdf 100644
--- a/webapp/src/headerbar.tsx
+++ b/webapp/src/headerbar.tsx
@@ -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;
@@ -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>}
@@ -121,15 +122,27 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
         }
 
         const shouldLinkHome = pxt.shell.hasHomeScreen() && view !== "home";
+        const isInteractive = shouldLinkHome && targetTheme.useTextLogo;
 
         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={!isInteractive} role={role} className={`ui item logo brand ${view !== "sandbox" && view !== "home" ? "mobile hide" : ""}`} onClick={onClickHandler}>
             {targetTheme.useTextLogo
-            ? [ <span className="name" key="org-name">{targetTheme.organizationText}</span>,
-                <span className="name-short" key="org-name-short">{targetTheme.organizationShortText || targetTheme.organizationText}</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> ])
             : (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>)}

From d2a1a4a4d9c718b155a1f023d5c035a51d3b279c Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>
Date: Fri, 23 Jan 2026 16:21:21 -0800
Subject: [PATCH 2/3] remove redundant styling

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 theme/common.less | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/theme/common.less b/theme/common.less
index dfda68224075..2096483f2dce 100644
--- a/theme/common.less
+++ b/theme/common.less
@@ -604,11 +604,6 @@ div.simframe > iframe {
     margin-bottom: 1px;
 }
 
-.ui.item.logo span.name {
-    margin-left: 1rem;
-    margin-bottom: 1px;
-}
-
 .ui.item.logo button.name, button.name-short {
     margin-left: 0 !important;
 }

From eba93bbb21822c06bd29c50e8c90231b735f6706 Mon Sep 17 00:00:00 2001
From: Sarah Rietkerk <sarahnrietkerk@gmail.com>
Date: Sat, 24 Jan 2026 01:59:02 +0000
Subject: [PATCH 3/3] make the image based logos also buttons

---
 theme/common.less        | 10 +++++++++-
 webapp/src/headerbar.tsx | 24 ++++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/theme/common.less b/theme/common.less
index 2096483f2dce..dcf90bc3e490 100644
--- a/theme/common.less
+++ b/theme/common.less
@@ -604,7 +604,8 @@ div.simframe > iframe {
     margin-bottom: 1px;
 }
 
-.ui.item.logo button.name, button.name-short {
+.ui.item.logo button.name,
+.ui.item.logo button.name-short {
     margin-left: 0 !important;
 }
 
@@ -622,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;
diff --git a/webapp/src/headerbar.tsx b/webapp/src/headerbar.tsx
index d58c54e80bdf..f3abcae74b40 100644
--- a/webapp/src/headerbar.tsx
+++ b/webapp/src/headerbar.tsx
@@ -122,13 +122,11 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
         }
 
         const shouldLinkHome = pxt.shell.hasHomeScreen() && view !== "home";
-        const isInteractive = shouldLinkHome && targetTheme.useTextLogo;
 
         const role = shouldLinkHome ? "menuitem" : "presentation";
-        const onClickHandler = shouldLinkHome ? this.brandIconClick : undefined;
 
         // TODO: "sandbox" view components are temporary share page layout
-        return <div aria-hidden={!isInteractive} 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
             ? (shouldLinkHome
                 ? [<Button className="name menu-button" key="org-name"
@@ -143,9 +141,23 @@ export class HeaderBar extends data.Component<ISettingsProps, {}> {
                     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> ])
-            : (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
+                ? (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>
     }