From e3e893ed5813c086e06a9cb0e2b601deae272a5a Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Thu, 9 Apr 2026 09:45:00 +0100
Subject: [PATCH] 22541 extract shared anchor/back breadcrumb helper patterns

---
 components/breadcrumbs.js | 152 +++++++++++++++++---------------------
 memory-bank/change-log.md |  28 +++++++
 2 files changed, 96 insertions(+), 84 deletions(-)

diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index e0b50d4e..ad41a3fc 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -122,6 +122,23 @@ const Breadcrumbs = (props) => {
         </li>
     );
 
+    const renderAnchorCrumb = (
+        href,
+        label,
+        onClick,
+        listItemClass = "govuk-breadcrumbs__list-item"
+    ) => (
+        <li className={listItemClass}>
+            <a
+                className="govuk-breadcrumbs__link"
+                href={href}
+                onClick={onClick}
+            >
+                {label}
+            </a>
+        </li>
+    );
+
     const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
         resolveCaseBreadcrumbState({
             query: router.query,
@@ -153,14 +170,10 @@ const Breadcrumbs = (props) => {
                         )}
                         {isPath("/myportal/searchresults") && (
                             <>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    <a
-                                        href={myPortalHref}
-                                        className="govuk-breadcrumbs__link"
-                                    >
-                                        {t("common:breadcrumb-my-portal")}
-                                    </a>
-                                </li>
+                                {renderAnchorCrumb(
+                                    myPortalHref,
+                                    t("common:breadcrumb-my-portal")
+                                )}
                                 <li className="govuk-breadcrumbs__list-item">
                                     {t("common:breadcrumb-search-results")}
                                 </li>
@@ -301,20 +314,16 @@ const Breadcrumbs = (props) => {
                                             </Link>
                                         </li>
                                     ) : (
-                                        <li className="govuk-breadcrumbs__link-item">
-                                            <a
-                                                className="govuk-breadcrumbs__link"
-                                                href="#"
-                                                onClick={() =>
-                                                    setCurrentSection(
-                                                        appealType.currentSection -
-                                                            1
-                                                    )
-                                                }
-                                            >
-                                                {t("common:back-link")}
-                                            </a>
-                                        </li>
+                                        renderAnchorCrumb(
+                                            "#",
+                                            t("common:back-link"),
+                                            () =>
+                                                setCurrentSection(
+                                                    appealType.currentSection -
+                                                        1
+                                                ),
+                                            "govuk-breadcrumbs__link-item"
+                                        )
                                     ))}
                             </>
                         )}
@@ -333,22 +342,16 @@ const Breadcrumbs = (props) => {
                                             </Link>
                                         </li>
                                     ) : (
-                                        <>
-                                            <li className="govuk-breadcrumbs__list-item backChevron">
-                                                <a
-                                                    className="govuk-breadcrumbs__link"
-                                                    href="#"
-                                                    onClick={() =>
-                                                        setCurrentSection(
-                                                            appealType.currentSection -
-                                                                1
-                                                        )
-                                                    }
-                                                >
-                                                    {t("common:back-link")}
-                                                </a>
-                                            </li>
-                                        </>
+                                        renderAnchorCrumb(
+                                            "#",
+                                            t("common:back-link"),
+                                            () =>
+                                                setCurrentSection(
+                                                    appealType.currentSection -
+                                                        1
+                                                ),
+                                            "govuk-breadcrumbs__list-item backChevron"
+                                        )
                                     ))}
                             </>
                         )}
@@ -536,61 +539,42 @@ const Breadcrumbs = (props) => {
                             <>
                                 {currentView.representationSubmit === true &&
                                     currentView.representationSubmitConfirmation !==
-                                        true && (
-                                        <li className="govuk-breadcrumbs__link-item backChevron">
-                                            <a
-                                                className="govuk-breadcrumbs__link"
-                                                href="#"
-                                                onClick={() => {
-                                                    setRepresentationSubmit(
-                                                        qcount
-                                                    );
-                                                }}
-                                            >
-                                                {t("common:back-link")}
-                                            </a>
-                                        </li>
+                                        true &&
+                                    renderAnchorCrumb(
+                                        "#",
+                                        t("common:back-link"),
+                                        () => {
+                                            setRepresentationSubmit(qcount);
+                                        },
+                                        "govuk-breadcrumbs__link-item backChevron"
                                     )}
                                 {currentView.representationSubmit !== true &&
                                     hasRepDetails &&
                                     repDetails?.representationType !==
-                                        "Questionnaire" && (
-                                        <li className="govuk-breadcrumbs__link-item backChevron">
-                                            <a
-                                                className="govuk-breadcrumbs__link"
-                                                href="#"
-                                                onClick={() => {
-                                                    setRepresentationSubmit(
-                                                        false
-                                                    );
-                                                }}
-                                            >
-                                                {t("common:back-link")}
-                                            </a>
-                                        </li>
+                                        "Questionnaire" &&
+                                    renderAnchorCrumb(
+                                        "#",
+                                        t("common:back-link"),
+                                        () => {
+                                            setRepresentationSubmit(false);
+                                        },
+                                        "govuk-breadcrumbs__link-item backChevron"
                                     )}
                                 {currentView.representationSubmit !== true &&
                                     hasRepDetails &&
                                     repDetails?.representationType ===
                                         "Questionnaire" &&
-                                    showQuestionnaireSection > 1 && (
-                                        <li className="govuk-breadcrumbs__link-item backChevron">
-                                            <a
-                                                className="govuk-breadcrumbs__link"
-                                                href="#"
-                                                onClick={() => {
-                                                    setShowQuestionnaireSection(
-                                                        showQuestionnaireSection -
-                                                            1
-                                                    );
-                                                    setRepresentationSubmit(
-                                                        false
-                                                    );
-                                                }}
-                                            >
-                                                {t("common:back-link")}
-                                            </a>
-                                        </li>
+                                    showQuestionnaireSection > 1 &&
+                                    renderAnchorCrumb(
+                                        "#",
+                                        t("common:back-link"),
+                                        () => {
+                                            setShowQuestionnaireSection(
+                                                showQuestionnaireSection - 1
+                                            );
+                                            setRepresentationSubmit(false);
+                                        },
+                                        "govuk-breadcrumbs__link-item backChevron"
                                     )}
                             </>
                         )}
diff --git a/memory-bank/change-log.md b/memory-bank/change-log.md
index 0e69d8bc..00b1ed2b 100644
--- a/memory-bank/change-log.md
+++ b/memory-bank/change-log.md
@@ -219,6 +219,34 @@ Follow-ups:
 
 - Next slice recommendation: target remaining anchor/back-link duplication (`<a href="#">` and occasional `<a href={...}>`) by introducing a bounded helper for action/back crumbs while preserving existing non-Link semantics.
 
+### CL-22541-H: breadcrumbs anchor/back-link helper consolidation bundle
+
+date: 2026-04-09  
+author: Cline  
+scope: `components/breadcrumbs.js`  
+type: change  
+rationale: Continue the larger bounded breadcrumbs refactor cadence by extracting repeated anchor/back-link crumb markup into one local helper while preserving non-Link semantics.
+impact: Refactor-only JSX deduplication and consistency improvement in breadcrumb rendering; no intended route/auth/session/API/EN-CY/a11y behavior change.
+status: completed
+
+Summary:
+
+- Added `renderAnchorCrumb(href, label, onClick, listItemClass)` in `components/breadcrumbs.js` for repeated `<a ...>` breadcrumb actions.
+- Replaced repeated anchor/back-link crumb blocks in:
+    - `/myportal/searchresults` my-portal anchor crumb
+    - `/newappeal/[appealtypes]` and `/myportal/[appealtypes]` step-back crumbs
+    - `/myportal/representation` back-chevron action crumbs (all three state branches)
+- Preserved original click handlers, href values, and class semantics (`govuk-breadcrumbs__link-item`, `backChevron`) to keep behavior parity.
+
+Validation:
+
+- `npx eslint components/breadcrumbs.js` -> pass.
+- `node tests/phase22/index.test.cjs` -> pass (combined suite).
+
+Follow-ups:
+
+- Next slice recommendation: consolidate remaining one-off inline breadcrumb `<li><Link ...>` blocks still present in edge branches (e.g., `/newappeal/[appealtypes]`, `/myportal/[appealtypes]`, `/case`) and consider introducing an optional `renderBackCrumb(...)` semantic wrapper for readability.
+
 ### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
 
 date: 2026-04-07