From 0f5268429000294964864325e74645b54b6d1087 Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jowunder@microsoft.com>
Date: Thu, 14 May 2026 09:43:03 -0700
Subject: [PATCH 1/5] restore autofocus for other actions, fix
 microsoft/pxt-microbit#6842

---
 react-common/components/controls/Link.tsx | 5 +++--
 webapp/src/projects.tsx                   | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/react-common/components/controls/Link.tsx b/react-common/components/controls/Link.tsx
index 5a26164b2dfe..2d251eeab564 100644
--- a/react-common/components/controls/Link.tsx
+++ b/react-common/components/controls/Link.tsx
@@ -8,7 +8,7 @@ export interface LinkProps extends ContainerProps {
     title?: string;
 }
 
-export const Link = (props: LinkProps) => {
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
     const {
         id,
         className,
@@ -29,6 +29,7 @@ export const Link = (props: LinkProps) => {
         <a
             id={id}
             className={classes}
+            ref={ref}
             aria-label={ariaLabel}
             href={href}
             target={target}
@@ -39,4 +40,4 @@ export const Link = (props: LinkProps) => {
             {children}
         </a>
     );
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 18418a4b23b6..c970f1eda4bf 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -1754,6 +1754,7 @@ function cardActionButton(props: Partial<ProjectsDetailProps>, className: string
     // for a side fix (detail card buttons, etc) 
     return asLink ? // TODO (shakao)  migrate forumurl to otherAction json in md
         <Link
+            ref={autoFocus ? linkRef : undefined}
             href={codeCardUrl(props)}
             target={'_blank'}
             className={`ui ${className} card-action-button-link`}

From 3cd97722eb0282c399908cff909b70e988ffea47 Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jowunder@microsoft.com>
Date: Thu, 14 May 2026 10:13:56 -0700
Subject: [PATCH 2/5] search, go back button focus indicator fixes
 microsoft/pxt-microbit#6826

---
 theme/home.less         |  4 +++-
 webapp/src/projects.tsx | 14 +++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/theme/home.less b/theme/home.less
index 5ad8a51ff2c3..7d4474115c17 100644
--- a/theme/home.less
+++ b/theme/home.less
@@ -294,7 +294,9 @@
         padding-top: 1em;
         margin: 1em @carouselArrowSize;
     }
-    .import-dialog-btn {
+    .import-dialog-btn,
+    .home-search-btn,
+    .go-back-btn {
         position: relative;
         z-index: 1; /* Move up so it's above the carousel container that has an offset margin */
         &:focus-visible {
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index c970f1eda4bf..d463a4b69cba 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -411,7 +411,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                             <Button
                                 key="go-back"
                                 leftIcon="icon chevron left"
-                                className="neutral large button"
+                                className="go-back-btn neutral large button"
                                 label={lf("Go Back")}
                                 title={lf("Go back")}
                                 onClick={this.closeSearch}
@@ -432,14 +432,22 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                             <Button
                                 key="search"
                                 leftIcon="icon search"
-                                className="neutral large button"
+                                className="home-search-btn neutral large button"
                                 label={lf("Search")}
                                 labelClassName="landscape only"
                                 title={lf("Search home content")}
                                 onClick={this.openSearch}
                             />}
                         {canImport ?
-                            <Button key="import" leftIcon="icon upload" className="import-dialog-btn neutral large button" labelClassName="landscape only" label={lf("Import")} title={lf("Import a project")} onClick={this.importProject} /> : undefined}
+                            <Button
+                                key="import"
+                                leftIcon="icon upload"
+                                className="import-dialog-btn neutral large button"
+                                labelClassName="landscape only"
+                                label={lf("Import")}
+                                title={lf("Import a project")}
+                                onClick={this.importProject}
+                            /> : undefined}
                     </div>
                 </div>
                 {searchMode && <div className="content homescreen-search-box" role="search">

From b2207783253dbda38950185c2bb7c8bbc894c30f Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jowunder@microsoft.com>
Date: Thu, 14 May 2026 10:20:50 -0700
Subject: [PATCH 3/5] add lil carat for home screen cards fix
 microsoft/pxt-microbit#6810

---
 theme/home.less | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/theme/home.less b/theme/home.less
index 7d4474115c17..69f11f27ed6b 100644
--- a/theme/home.less
+++ b/theme/home.less
@@ -218,6 +218,41 @@
                 > .ui.card:first-child {
                     margin: 1em 0;
                 }
+
+                > .ui.card.selected {
+                    border: @homeSelectedCardBorderSize solid var(--pxt-neutral-background1) !important;
+                    z-index: @homeDetailViewSelectedCardZIndex;
+                }
+
+                > .ui.card.selected:hover {
+                    transform: none;
+                }
+
+                > .ui.card.selected:after,
+                > .ui.card.selected:before {
+                    top: 100%;
+                    left: 50%;
+                    border: solid transparent;
+                    content: " ";
+                    height: 0;
+                    width: 0;
+                    position: absolute;
+                    pointer-events: none;
+                }
+
+                > .ui.card.selected:after {
+                    border-color: var(--pxt-neutral-alpha0);
+                    border-top-color: var(--pxt-neutral-background1);
+                    border-width: 10px;
+                    margin-left: -10px;
+                }
+
+                > .ui.card.selected:before {
+                    border-color: var(--pxt-neutral-alpha0);
+                    border-top-color: var(--pxt-neutral-stencil3);
+                    border-width: 17px;
+                    margin-left: -17px;
+                }
             }
 
             .search-detailview.detailview {

From 1f3a7b5f3f6e848bd06dc58518232735c39bd45b Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jowunder@microsoft.com>
Date: Thu, 14 May 2026 10:26:25 -0700
Subject: [PATCH 4/5] move close button to end of detailview tab order; fix
 microsoft/pxt-microbit#6841

---
 webapp/src/projects.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index d463a4b69cba..762d0f8c42a2 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -483,7 +483,6 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                                     selected={!scr.directOpen ? searchSelectedIndex === index : undefined}
                                 />
                                 {selectedSearchCard && searchSelectedIndex === index && <div ref="searchDetailView" className="detailview search-detailview">
-                                    <sui.CloseButton onClick={() => this.setSelected(SEARCH_CATEGORY, undefined)} />
                                     <ProjectsDetail parent={this.props.parent}
                                         { ...selectedSearchCard }
                                         name={selectedSearchCard.name}
@@ -493,6 +492,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                                         scr={selectedSearchCard}
                                         onClick={this.handleSearchDetailClick}
                                     />
+                                    <sui.CloseButton onClick={() => this.setSelected(SEARCH_CATEGORY, undefined)} />
                                 </div>}
                             </React.Fragment>
                         ) : <p className="ui grey inverted segment">{lf("No search results found.")}</p>}
@@ -1142,7 +1142,6 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
                         )}
                     </carousel.Carousel>
                     {selectedElement && <div ref="detailView" className={`detailview`}>
-                        <sui.CloseButton onClick={this.closeDetail} />
                         <ProjectsDetail parent={this.props.parent}
                             name={selectedElement.name}
                             key={'detail' + selectedElement.name}
@@ -1161,6 +1160,7 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
                             tags={selectedElement.tags}
                             otherActions={selectedElement.otherActions}
                         />
+                        <sui.CloseButton onClick={this.closeDetail} />
                     </div>}
                 </div>
             }

From 7822fbee25a7a1e02248b808bd2db420e64d3ab8 Mon Sep 17 00:00:00 2001
From: Joey Wunderlich <jowunder@microsoft.com>
Date: Thu, 14 May 2026 10:38:58 -0700
Subject: [PATCH 5/5] when detail view closed via keyboard controls, navigate
 tab back to the source card the detail view came from instead of further down
 page

---
 webapp/src/projects.tsx | 45 +++++++++++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 762d0f8c42a2..79998ba496c7 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -39,6 +39,20 @@ interface ProjectsState {
 const SEARCH_CATEGORY = "__search__";
 type SearchCard = pxt.CodeCard & { projectHeader?: pxt.workspace.Header };
 
+function focusCard(card?: HTMLElement) {
+    if (card) card.focus();
+}
+
+function shouldRestoreFocusAfterClose(e: React.MouseEvent<HTMLElement>) {
+    return e.detail === 0;
+}
+
+function getPreviousSiblingCard(element: HTMLElement): HTMLElement | undefined {
+    const detailView = element.closest(".detailview");
+    const sourceCard = detailView?.previousElementSibling;
+    return sourceCard instanceof HTMLElement ? sourceCard : undefined;
+}
+
 function getProjectDescriptionFromConfig(configText: string): string {
     const config = pxt.Util.jsonTryParse(configText) as pxt.PackageConfig;
     const description = config?.description?.trim();
@@ -63,6 +77,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
         this.setSelected = this.setSelected.bind(this);
         this.openSearch = this.openSearch.bind(this);
         this.closeSearch = this.closeSearch.bind(this);
+        this.closeSearchDetail = this.closeSearchDetail.bind(this);
         this.handleSearchCardClick = this.handleSearchCardClick.bind(this);
         this.handleSearchDetailClick = this.handleSearchDetailClick.bind(this);
     }
@@ -76,7 +91,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
             || this.state.searchResults != nextState.searchResults;
     }
 
-    setSelected(category: string, index: number) {
+    setSelected(category: string, index?: number) {
         if (index == undefined || this.state.selectedCategory == category && this.state.selectedIndex == index) {
             this.setState({ selectedCategory: undefined, selectedIndex: undefined });
         } else {
@@ -295,6 +310,12 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
         });
     }
 
+    private closeSearchDetail(e: React.MouseEvent<HTMLElement>) {
+        const sourceCard = getPreviousSiblingCard(e.currentTarget);
+        this.setSelected(SEARCH_CATEGORY, undefined);
+        if (shouldRestoreFocusAfterClose(e)) focusCard(sourceCard);
+    }
+
     private handleSearchCardClick(e: any, scr: SearchCard, index?: number) {
         const header = scr.projectHeader;
         if (header) {
@@ -492,7 +513,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
                                         scr={selectedSearchCard}
                                         onClick={this.handleSearchDetailClick}
                                     />
-                                    <sui.CloseButton onClick={() => this.setSelected(SEARCH_CATEGORY, undefined)} />
+                                    <sui.CloseButton onClick={this.closeSearchDetail} />
                                 </div>}
                             </React.Fragment>
                         ) : <p className="ui grey inverted segment">{lf("No search results found.")}</p>}
@@ -978,7 +999,7 @@ interface ProjectsCarouselProps extends ISettingsProps {
     cardWidth?: number;
     onClick: (src: any, action?: pxt.CodeCardAction) => void;
     selectedIndex?: number;
-    setSelected?: (name: string, index: number) => void;
+    setSelected?: (name: string, index?: number) => void;
     shuffle?: pxt.GalleryShuffle;
 }
 
@@ -998,6 +1019,7 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
         }
 
         this.closeDetail = this.closeDetail.bind(this);
+        this.closeDetailFromCloseButton = this.closeDetailFromCloseButton.bind(this);
         this.closeDetailOnEscape = this.closeDetailOnEscape.bind(this);
         this.reload = this.reload.bind(this);
         this.showScriptManager = this.showScriptManager.bind(this);
@@ -1049,10 +1071,16 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
         this.props.parent.showScriptManager();
     }
 
-    closeDetail() {
+    closeDetail(restoreFocus?: boolean) {
         const { name } = this.props;
+        const sourceCard = restoreFocus ? this.getSelectedCardDOM() : undefined;
         pxt.tickEvent("projects.detail.close");
         this.props.setSelected(name, undefined);
+        if (restoreFocus) focusCard(sourceCard);
+    }
+
+    closeDetailFromCloseButton(e: React.MouseEvent<HTMLElement>) {
+        this.closeDetail(shouldRestoreFocusAfterClose(e));
     }
 
     getCarouselDOM() {
@@ -1060,6 +1088,11 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
         return carouselDom;
     }
 
+    private getSelectedCardDOM(): HTMLElement | undefined {
+        const carouselDom = this.getCarouselDOM() as Element;
+        return carouselDom?.querySelector(".carouselitem.selected > .ui.card") as HTMLElement;
+    }
+
     getDetailDOM() {
         let detailDom = ReactDOM.findDOMNode(this.refs["detailView"]);
         return detailDom;
@@ -1068,7 +1101,7 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
     closeDetailOnEscape(e: KeyboardEvent) {
         const charCode = core.keyCodeFromEvent(e);
         if (charCode != core.ESC_KEY) return;
-        this.closeDetail();
+        this.closeDetail(true);
 
         document.removeEventListener('keydown', this.closeDetailOnEscape);
         e.preventDefault();
@@ -1160,7 +1193,7 @@ export class ProjectsCarousel extends data.Component<ProjectsCarouselProps, Proj
                             tags={selectedElement.tags}
                             otherActions={selectedElement.otherActions}
                         />
-                        <sui.CloseButton onClick={this.closeDetail} />
+                        <sui.CloseButton onClick={this.closeDetailFromCloseButton} />
                     </div>}
                 </div>
             }