From 46315feaf35882d8272c9a3288e2722b0c971ff6 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 2 Jul 2025 10:26:11 -0700
Subject: [PATCH 1/2] fix(unity-bootstrap-theme): fix long accordion scroll
 issue

---
 .../unity-bootstrap-theme/src/js/collapse.js  |  23 +
 .../src/js/unity-bootstrap.js                 |   2 +
 .../src/scss/extends/_cards.scss              |   7 +
 .../accordion/accordion.examples.stories.js   | 477 +-----------------
 .../accordion/accordion.templates.stories.js  |  91 ----
 .../stories/atoms/accordion/accordion.test.js |  28 -
 .../accordion/accordion-basics.stories.mdx    | 131 -----
 shared/utils/index.d.ts                       |   1 +
 shared/utils/index.js                         |   1 +
 shared/utils/scroll-helper.d.ts               |   1 +
 shared/utils/scroll-helper.js                 |  17 +
 11 files changed, 54 insertions(+), 725 deletions(-)
 create mode 100644 packages/unity-bootstrap-theme/src/js/collapse.js
 delete mode 100644 packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.templates.stories.js
 delete mode 100644 packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.test.js
 delete mode 100644 packages/unity-bootstrap-theme/stories/docs/accordion/accordion-basics.stories.mdx
 create mode 100644 shared/utils/scroll-helper.d.ts
 create mode 100644 shared/utils/scroll-helper.js

diff --git a/packages/unity-bootstrap-theme/src/js/collapse.js b/packages/unity-bootstrap-theme/src/js/collapse.js
new file mode 100644
index 0000000000..f13aa19984
--- /dev/null
+++ b/packages/unity-bootstrap-theme/src/js/collapse.js
@@ -0,0 +1,23 @@
+import { adjustShrinkingElementIfAboveViewport } from "@shared";
+
+import { EventHandler } from "./bootstrap-helper";
+
+function initCollapse() {
+  function accordionClick({target}) {
+    const targetHref = target.getAttribute("href");
+    if (target.getAttribute("data-bs-toggle") !== "collapse" || !targetHref || !targetHref.includes("#")) {
+      return; // Exit the function - not a collapse link
+    }
+
+    /**
+     * Find the first accordion that is currently collapsing or expanding
+     * Function will determine if scroll adjustment is needed
+     */
+    adjustShrinkingElementIfAboveViewport(document.querySelector(".collapsing"));
+  }
+  EventHandler.on(document, "click.uds.collapse", accordionClick);
+}
+
+EventHandler.on(window, "load.uds.collapse", initCollapse);
+
+export { initCollapse };
diff --git a/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js b/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
index b3783e3931..a74bdc8747 100644
--- a/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
+++ b/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
@@ -5,6 +5,7 @@ import { initCalendar } from "./calendar.js";
 import { initCardBodies } from "./card-bodies.js";
 import { initRankingCard } from "./card-ranking.js";
 import { initChart } from "./charts-and-graphs.js";
+import { initCollapse } from "./collapse.js";
 import { initDataLayer } from "./data-layer.js";
 import { initGlobalHeader } from "./global-header.js";
 import { initHeroesVideo } from "./heroes-video.js";
@@ -19,6 +20,7 @@ const unityBootstrap = {
   initAnchorMenu,
   initBlockquoteAnimation,
   initCalendar,
+  initCollapse,
   initChart,
   initDataLayer,
   initFixedTable,
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
index d165381a1c..165321cce5 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
@@ -691,6 +691,13 @@ Cards - Table of Contents
 7. Accordion
 --------------------------------------------------------------------*/
 .accordion {
+  &:focus {
+    outline: none!important;
+    box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important;
+    border: 1px solid $uds-color-base-gray-7 !important;
+    margin: 4px;
+    width: -webkit-fill-available;
+  }
   .accordion-item {
     border-bottom: 1px solid $uds-color-base-gray-3;
     border-top: 1px solid $uds-color-base-gray-3;
diff --git a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.examples.stories.js
index 78db067aba..c246c9b023 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.examples.stories.js
@@ -8,484 +8,11 @@ export default {
   parameters: { controls: { disable: true } },
 };
 
-export const FoldableCardDefaultOpen = () =>
+export const Default = () =>
 <Container>
   <Column>
-    <div className="accordion">
-      <div className="accordion-item mt-3">
-        <div className="accordion-header">
-          <h3>
-            <button
-              id="example-header-3"
-              data-bs-toggle="collapse"
-              className="collapse"
-              href="#example-content-3"
-              role="button"
-              aria-expanded="true"
-              aria-controls="example-content-3"
-              data-ga="This card starts off in an unfolded state."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-              >
-              This card starts off in an unfolded state.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h3>
-        </div>
-        <div
-          id="example-content-3"
-          className="collapse show"
-          aria-labelledby="example-header-3"
-          >
-          <div className="accordion-body">
-            <h4>This is a quaternary headline</h4>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Column>
-</Container>;
-
-
-export const ColorAccents = () =>
-<Container>
-  <Column>
-    <div className="accordion" id="accordionExample">
-      <div className="accordion-item mt-3">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="cardOne"
-              className="collapsed"
-              href="#cardBodyOne"
-              data-bs-toggle="collapse"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyOne"
-              data-ga="Accordion gold color (default)."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              Accordion gold color (default).
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        {/* end .accordion-header */}
-        <div
-          id="cardBodyOne"
-          className="collapse"
-          aria-labelledby="cardOne"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <h4>Quatrenary Headline</h4>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
-
-      <div className="accordion-item mt-3 accordion-item-maroon">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="cardTwo"
-              className="collapsed"
-              data-bs-toggle="collapse"
-              href="#cardBodyTwo"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyTwo"
-              data-ga="Accordion maroon color."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              Accordion maroon color.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        <div
-          id="cardBodyTwo"
-          className="collapse"
-          aria-labelledby="cardTwo"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
-
-      <div className="accordion-item mt-3 accordion-item-gray">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="cardThree"
-              className="collapsed"
-              data-bs-toggle="collapse"
-              href="#cardBodyThree"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyThree"
-              data-ga="Accordion gray color."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              Accordion gray color.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        <div
-          id="cardBodyThree"
-          className="collapse"
-          aria-labelledby="cardThree"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
-
-      <div className="accordion-item mt-3 accordion-item-dark">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="cardFour"
-              className="collapsed"
-              href="#cardBodyFour"
-              data-bs-toggle="collapse"
-              data-bs-target="#cardBodyFour"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyFour"
-              data-ga="Accordion dark color."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              Accordion dark color.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        {/* end .accordion-header */}
-        <div
-          id="cardBodyFour"
-          className="collapse"
-          aria-labelledby="cardFour"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <h4>Quatrenary Headline</h4>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
-    </div>
-  </Column>
-</Container>;
-
-export const IncludedIcons = () =>
-<Container>
-  <Column>
-    <div className="accordion" id="accordionExample">
-      <div className="accordion-item mt-3">
-        <div className="accordion-header accordion-header-icon">
-          <h4>
-            <button
-              id="cardOne"
-              className="collapsed"
-              href="#cardBodyOne"
-              data-bs-toggle="collapse"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyOne"
-              data-ga="Accordion with icon and gold color."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              <span className="accordion-icon">
-                <i className="fas fa-dog me-2" role="img" aria-label="..."></i>
-                Accordion with icon and gold color.
-              </span>
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        {/* end .accordion-header */}
-        <div
-          id="cardBodyOne"
-          className="collapse"
-          aria-labelledby="cardOne"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <h4>Quatrenary Headline</h4>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
+    <a target="_parent" href="../../@asu/unity-react-core/index.html?path=/story/components-accordion--default">Accordion has moved to @asu/unity-react-core</a>
 
-      <div className="accordion-item mt-3 accordion-item-maroon">
-        <div className="accordion-header accordion-header-icon">
-          <h4>
-            <button
-              id="cardTwo"
-              className="collapsed"
-              data-bs-toggle="collapse"
-              href="#cardBodyTwo"
-              role="button"
-              aria-expanded="false"
-              aria-controls="cardBodyTwo"
-              data-ga="Accordion with icon and maroon color."
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-            >
-              <span className="accordion-icon">
-                <i className="fas fa-cat me-2" role="img" aria-label="..."></i>
-                Accordion with icon and maroon color.
-              </span>
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        <div
-          id="cardBodyTwo"
-          className="collapse"
-          aria-labelledby="cardTwo"
-          data-bs-parent="#accordionExample"
-        >
-          <div className="accordion-body">
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <h5>
-              This is a level five headline. There's a fancy word for that too.
-            </h5>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-              ad minim veniam, quis nostrud
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor
-            </p>
-          </div>
-        </div>
-        {/* end .accordion-body */}
-      </div>
-      {/* end .card */}
-    </div>
   </Column>
 </Container>;
 
-export const DisableFold = () =>
-<Container>
-  <Column col="6">
-    <div className="accordion" id="accordionExample">
-      <div className="accordion-item mt-3 desktop-disable-lg">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="example-header-2"
-              data-bs-toggle="collapse"
-              href="#example-content-2"
-              className="collapsed"
-              role="button"
-              aria-expanded="false"
-              aria-controls="example-content-2"
-              data-ga="This will become an foldable card at the lg breakpoint"
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-              >
-              This will become an foldable card at the lg breakpoint.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        <div
-          id="example-content-2"
-          className="collapse"
-          aria-labelledby="example-header-2"
-          >
-          <div className="accordion-body">
-            <p>
-              This uses the <code>.desktop-disable-lg</code> class.
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
-              natoque penatibus et magnis dis parturient montes, nascetur
-              ridiculus mus. Donec quam felis, ultricies nec, pellentesque
-              eu, pretium quis, sem.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="accordion-item mt-3 desktop-disable-xl">
-        <div className="accordion-header">
-          <h4>
-            <button
-              id="example-header-3"
-              data-bs-toggle="collapse"
-              className="collapsed"
-              href="#example-content-3"
-              role="button"
-              aria-expanded="false"
-              aria-controls="example-content-3"
-              data-ga="Collapses to an foldable card at the xl breakpoint"
-              data-ga-name="onclick"
-              data-ga-event="collapse"
-              data-ga-type="click"
-              data-ga-region="main content"
-              data-ga-section="default"
-              >
-              Collapses to an foldable card at the xl breakpoint.
-              <span className="fas fa-chevron-up"></span>
-            </button>
-          </h4>
-        </div>
-        <div
-          id="example-content-3"
-          className="collapse"
-          aria-labelledby="example-header-3"
-          >
-          <div className="accordion-body">
-            <p>
-              This uses the <code>.desktop-disable-xl</code> class.
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
-              natoque penatibus et magnis dis parturient montes, nascetur
-              ridiculus mus. Donec quam felis, ultricies nec, pellentesque
-              eu, pretium quis, sem.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Column>
-</Container>
-
diff --git a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.templates.stories.js b/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.templates.stories.js
deleted file mode 100644
index c511eec88d..0000000000
--- a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.templates.stories.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from "react";
-
-import { defaultDecorator } from "../../../../../shared/components/Layout.js";
-export default {
-  title: "Atoms/Accordions/Templates",
-  decorators: [defaultDecorator],
-};
-
-
-const Template = ({
-  accordionID = "",
-  linkID = "",
-  bodyID = ""
-}) => (
-  <div className="accordion">
-    <div className="accordion-item mt-3">
-      <div className="accordion-header">
-        <h3>
-          <button
-            id={`${linkID}`}
-            data-bs-toggle="collapse"
-            className="collapsed"
-            href={bodyID ? `#${bodyID}` : ""}
-            role="button"
-            aria-expanded="false"
-            aria-controls={`${bodyID}`}
-            data-ga="This card unfolds"
-            data-ga-name="onclick"
-            data-ga-event="collapse"
-            data-ga-type="click"
-            data-ga-region="main content"
-            data-ga-section="default"
-          >
-            This card unfolds.
-            <span className="fas fa-chevron-up"></span>
-          </button>
-        </h3>
-      </div>
-      <div
-        id={`${bodyID}`}
-        className="collapse"
-        aria-labelledby={`${linkID}`}
-        data-bs-parent={accordionID ? `#${accordionID}` : ""}
-      >
-        <div className="accordion-body">
-          <h4>This is a quaternary headline</h4>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud
-          </p>
-          <h5>
-            This is a level five headline. There's a fancy word for that too.
-          </h5>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud
-          </p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-export const FoldableCard = Template.bind({});
-FoldableCard.args = {
-  linkID: "card",
-  bodyID: "cardBody",
-}
-
-export const Accordion = () =>
-  <div className="accordion" id="accordionExample">
-    <Template
-      accordionID="accordionExample"
-      linkID="cardOne"
-      bodyID="cardBodyOne" />
-    <Template
-      accordionID="accordionExample"
-      linkID="cardTwo"
-      bodyID="cardBodyTwo" />
-    <Template
-      accordionID="accordionExample"
-      linkID="cardThree"
-      bodyID="cardBodyThree" />
-  </div>;
-Accordion.parameters = { controls: { disable: true } };
diff --git a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.test.js b/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.test.js
deleted file mode 100644
index 8704fe2a68..0000000000
--- a/packages/unity-bootstrap-theme/stories/atoms/accordion/accordion.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-describe('Accordion', () => {
-  it('accordion example visually look correct', async () => {
-    // APIs from jest-puppeteer
-    await page.goto('http://localhost:9009/iframe.html?id=collapse--examples');
-    const image = await page.screenshot();
-
-    // API from jest-image-snapshot
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it('accordion multiple visually look correct', async () => {
-    // APIs from jest-puppeteer
-    await page.goto('http://localhost:9009/iframe.html?id=collapse--collapse-multiple');
-    const image = await page.screenshot();
-
-    // API from jest-image-snapshot
-    expect(image).toMatchImageSnapshot();
-  });
-
-  it('accordion visually look correct', async () => {
-    // APIs from jest-puppeteer
-    await page.goto('http://localhost:9009/iframe.html?id=collapse--collapse-accordion');
-    const image = await page.screenshot();
-
-    // API from jest-image-snapshot
-    expect(image).toMatchImageSnapshot();
-  });
-});
diff --git a/packages/unity-bootstrap-theme/stories/docs/accordion/accordion-basics.stories.mdx b/packages/unity-bootstrap-theme/stories/docs/accordion/accordion-basics.stories.mdx
deleted file mode 100644
index 23a2b06742..0000000000
--- a/packages/unity-bootstrap-theme/stories/docs/accordion/accordion-basics.stories.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-
-<Meta title="Atoms/Accordions/Readme" />
-
-## Accordion
-
-The `.accordion` class is a bootstrap5 class that is used to create an accordion.
-
-- The accordions will conform to the width of the surrounding container.
-- There is a recommended character limit of 75 characters for the text within the header of a foldable card.
-
-The recommended markup for an accordion begins from the following pattern.
-
-***Note:*** The `.accordion-body` class must be wrapped in a div with the `.collapse` class, or else the accordion will have a jerky animation when opening and closing.
-
-```html
-<div class="accordion">
-  <div class="accordion-item">
-    <div class="accordion-header">
-      <h3>
-        <a
-          id="example-header-3"
-          data-bs-toggle="collapse"
-          href="#example-content-3"
-          role="button"
-          class="collapsed"
-          aria-expanded="true"
-          aria-controls="example-content-3"
-          data-ga="This card starts off in an unfolded state."
-          data-ga-name="onclick"
-          data-ga-event="collapse"
-          data-ga-type="click"
-          data-ga-region="main content"
-          data-ga-section="default"
-        >
-          This card starts off in an unfolded state.
-          <span class="fas fa-chevron-up"></span>
-        </a>
-      </h3>
-    </div>
-    <div
-      id="example-content-3"
-      class="collapse show"
-      aria-labelledby="example-header-3"
-    >
-    <div class="accordion-body">
-      <h4>This is a quaternary headline</h4>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud
-      </p>
-      <h5>This is a level five headline. There's a fancy word for that too.</h5>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor
-      </p>
-    </div>
-    </div>
-  </div>
-  </div>
-```
-
-## Accent Colors and Icons
-
-Accordions can be accented with different colors from the ASU palette. The header of an accordion can also include an optional icon from Font Awesome.
-
-Include a modifying class along side of `.accordion to produce different accent colors. Allowable colors are below:
-
-| Modifier class | Produced Color     |
-| -------------- | ------------------ |
-| (none)         | ASU Gold (default) |
-| .accordion-item-maroon   | ASU Maroon         |
-| .accordion-item-gray     | ASU Gray 4         |
-| .accordion-item-dark     | ASU Gray 7 (Black) |
-
-To add an icon:
-
-- Include the modifying class `.accordion-header-icon` next to the `.accordion-header` declaration.
-- Any Font Awesome icon from the collection may be used.
-
-A foldable card with an icon and and accent color might look like this:
-
-```html
-<div class=" accordion mt-3 accordion-item-maroon">
-  <div class="accordion-header accordion-header-icon">
-    <h4>
-      <a id="accordionOne" class="collapsed" href="#cardBodyOne" data-bs-toggle="collapse" data-bs-target="#accordionBodyOne" role="button" aria-expanded="false" aria-controls="cardBodyOne">
-        <span class="accordion-icon">
-            <i class="fas fa-dog me-2" role="img" aria-label="..."></i>
-            Accordion with icon and gold color.
-        </span>
-        <span class="fas fa-chevron-up"></span>
-      </a>
-    </h4>
-  </div>
-  <div id="accordionBodyOne" class="collapse" aria-labelledby="accordionOne">
-    <div class="accordion-body">
-      ...
-    </div>
-  </div>
-</div>
-```
-
-## Disable fold at breakpoint
-
-You may choose to disable the "fold" of a foldable card at a particular breakpoint in order to have an element appear expanded on desktop and collapsed on mobile.
-
-Include one of the following modifier classes next to the `.accordion` class to enable the functionality.
-
-- `.desktop-disable-md` disables the fold at the `md` breakpoint and above.
-- `.desktop-disable-lg` and `.desktop-disable-xl` are also available.
-
-Example:
-
-```html
-<div class="accordion desktop-disable-lg">
-  <div class="accordion-header">
-    ...
-  </div>
-  <div id="accordionOne" class="collapse" aria-labelledby="accordionOne">
-    <div class="accordion-body">
-      ...
-    </div>
-  </div>
-</div>
diff --git a/shared/utils/index.d.ts b/shared/utils/index.d.ts
index 478ce86bf5..7bef73a71e 100644
--- a/shared/utils/index.d.ts
+++ b/shared/utils/index.d.ts
@@ -6,3 +6,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";
diff --git a/shared/utils/index.js b/shared/utils/index.js
index 9be2d9f750..6eb04c3015 100644
--- a/shared/utils/index.js
+++ b/shared/utils/index.js
@@ -19,3 +19,4 @@ export * from "./numbers";
 export * from "./script-utils";
 export * from "./timers";
 export * from "./deep-cloner";
+export * from "./scroll-helper";
diff --git a/shared/utils/scroll-helper.d.ts b/shared/utils/scroll-helper.d.ts
new file mode 100644
index 0000000000..c3354fd83f
--- /dev/null
+++ b/shared/utils/scroll-helper.d.ts
@@ -0,0 +1 @@
+export function adjustShrinkingElementIfAboveViewport(element: any): void;
diff --git a/shared/utils/scroll-helper.js b/shared/utils/scroll-helper.js
new file mode 100644
index 0000000000..5e762d8a97
--- /dev/null
+++ b/shared/utils/scroll-helper.js
@@ -0,0 +1,17 @@
+// @ts-check
+export function adjustShrinkingElementIfAboveViewport(element) {
+  if(element && typeof element.getBoundingClientRect === "function") {
+
+    const {bottom:inViewportHeight, top, } = element.getBoundingClientRect();
+    const {offsetTop } = element;
+    if(top < 0 && inViewportHeight > 0) {
+      const savedStyle = element.style;
+      element.style = `${savedStyle};transition: height 0s !important; overflow:hidden; height:${inViewportHeight}px!important;max-height:${inViewportHeight}px!important`;
+      window.scrollTo({behavior:"instant", top: offsetTop });
+      setTimeout(()=>{
+        element.style = savedStyle;
+        window.scrollTo({behavior:"smooth", top: element.offsetTop - inViewportHeight/2 });
+      }, 50);
+    }
+  }
+}

From 539f4c8cdd4aeffab2136d5ccf078bb01287c4c1 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 2 Jul 2025 10:29:42 -0700
Subject: [PATCH 2/2] fix(unity-react-core): fix long accordion scroll issue

---
 .../src/components/Accordion/Accordion.jsx    |  19 ++-
 .../Accordion/Accordion.stories.jsx           |  90 ++++++++++-
 .../Accordion/AccordionCard/AccordionCard.jsx | 145 +++++++++++-------
 .../src/core/types/shared-types.js            |   3 +-
 4 files changed, 192 insertions(+), 65 deletions(-)

diff --git a/packages/unity-react-core/src/components/Accordion/Accordion.jsx b/packages/unity-react-core/src/components/Accordion/Accordion.jsx
index a59c0cede1..acc11959eb 100644
--- a/packages/unity-react-core/src/components/Accordion/Accordion.jsx
+++ b/packages/unity-react-core/src/components/Accordion/Accordion.jsx
@@ -1,7 +1,8 @@
 // @ts-nocheck
 import PropTypes from "prop-types";
-import React, { useState } from "react";
+import React, { useId, useRef, useState } from "react";
 
+import { adjustShrinkingElementIfAboveViewport } from "../../../../../shared";
 import { accordionCardPropTypes } from "../../core/models/shared-prop-types";
 import { AccordionCard } from "./AccordionCard/AccordionCard";
 
@@ -16,17 +17,25 @@ const defaultGAEvent = {
  * @typedef {import('../../core/types/shared-types').AccordionProps} AccordionProps
  */
 
+/**
+ * @typedef {import('../../../core/types/shared-types').AccordionCardItemProps} AccordionCardItemProps
+ */
+
 /**
  * @param {AccordionProps} props
  * @returns {JSX.Element}
  */
 const Accordion = ({ cards, openedCard }) => {
   const [currentOpenCard, setCurrentOpenCard] = useState(openedCard);
+  const parentId = `accordion-${useId()}`;
+  const cardsRef = useRef(/** @type { HTMLDivElement[]} */ []);
 
   const toggleCard = (event, card) => {
     event.preventDefault();
-
     if (currentOpenCard !== card) {
+      const closingCard = cardsRef.current[currentOpenCard - 1];
+      const closingCardBody = closingCard?.lastElementChild;
+      adjustShrinkingElementIfAboveViewport(closingCardBody);
       setCurrentOpenCard(card);
     } else {
       setCurrentOpenCard(null);
@@ -34,15 +43,19 @@ const Accordion = ({ cards, openedCard }) => {
   };
 
   return (
-    <div className="accordion">
+    <div className="accordion" id={parentId}>
       {cards?.map(
         (card, key) =>
           card.content.body &&
           card.content.header && (
             <AccordionCard
+              ref={element => {
+                cardsRef.current[key] = element;
+              }}
               // eslint-disable-next-line react/no-array-index-key
               key={key + 1}
               id={key + 1}
+              parentId={parentId}
               item={card}
               openCard={currentOpenCard}
               onClick={toggleCard}
diff --git a/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx b/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx
index 0fb3f769a3..93ca3e615c 100644
--- a/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx
+++ b/packages/unity-react-core/src/components/Accordion/Accordion.stories.jsx
@@ -1,6 +1,8 @@
+/* eslint-disable no-plusplus */
 /* eslint react/jsx-props-no-spreading: "off" */
 import React from "react";
 
+import { getLoremSentences } from "../../../../../shared/constants/strings";
 import { Accordion } from "./Accordion";
 
 export default {
@@ -18,13 +20,28 @@ including rules on the use of Call-to-Action buttons and tags.
 View component examples and source code below.
 
 This story includes another components for demostration purposes.
-        `,
+
+## Bootstrap HTML
+
+The \`.accordion\` class is a bootstrap5 class that is used to create an accordion.
+
+- The accordions will conform to the width of the surrounding container.
+- There is a recommended character limit of 75 characters for the text within the header of a foldable card.
+
+The recommended markup for an accordion begins from the following pattern.
+
+***Note:*** The \`.accordion-body\` class must be wrapped in a div with the \`.collapse\` class, or else the accordion will have a jerky animation when opening and closing.
+`,
       },
     },
   },
 };
 
-const Template = args => <Accordion {...args} />;
+const Template = args => (
+  <>
+    <Accordion {...args} />
+  </>
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -50,6 +67,75 @@ Default.args = {
   ],
   openedCard: 3,
 };
+
+let i = 0;
+export const LargeContent = {
+  render: args => (
+    <>
+      <div className="container" style={{ paddingTop: "50vh" }}>
+        <p>{getLoremSentences(12, i++)}</p>
+        <p>{getLoremSentences(22, i++)}</p>
+        <p>{getLoremSentences(10, i++)}</p>
+        <Accordion {...args} />
+        <br />
+        <p>{getLoremSentences(35, i++)}</p>
+        <p>{getLoremSentences(22, i++)}</p>
+        <p>{getLoremSentences(12, i++)}</p>
+        <p>{getLoremSentences(42, i++)}</p>
+        <p>{getLoremSentences(19, i++)}</p>
+        <p>{getLoremSentences(12, i++)}</p>
+        <p>{getLoremSentences(10, i++)}</p>
+        <p>{getLoremSentences(35, i++)}</p>
+        <p>{getLoremSentences(22, i++)}</p>
+        <p>{getLoremSentences(12, i++)}</p>
+        <p>{getLoremSentences(42, i++)}</p>
+        <p>{getLoremSentences(19, i++)}</p>
+        <p>{getLoremSentences(12, i++)}</p>
+        <p>{getLoremSentences(10, i++)}</p>
+      </div>
+    </>
+  ),
+  args: {
+    cards: [
+      {
+        content: {
+          header: "Accordion Card 1",
+          body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
+        },
+      },
+      {
+        content: {
+          header: "Accordion Card 2, Large Content",
+          body: `<h4>Quatrenary Headline</h4>
+          <p>${getLoremSentences(35, i++)}</p>
+          <p>${getLoremSentences(22, i++)}</p>
+          <p>${getLoremSentences(12, i++)}</p>
+          <p>${getLoremSentences(42, i++)}</p>
+          <p>${getLoremSentences(19, i++)}</p>
+          <p>${getLoremSentences(12, i++)}</p>
+          <p>${getLoremSentences(10, i++)}</p>
+          <p>${getLoremSentences(35, i++)}</p>
+          <p>${getLoremSentences(22, i++)}</p>
+          <p>${getLoremSentences(12, i++)}</p>
+          <p>${getLoremSentences(42, i++)}</p>
+          <p>${getLoremSentences(19, i++)}</p>
+          <p>${getLoremSentences(12, i++)}</p>
+          <p>${getLoremSentences(10, i++)}</p>
+          `,
+        },
+      },
+      {
+        content: {
+          header: "Accordion Card 3",
+          body: `<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
+          <p>${getLoremSentences(35, i++)}</p>
+          <p>${getLoremSentences(22, i++)}</p>`,
+        },
+      },
+    ],
+    openedCard: 2,
+  },
+};
 export const ColorCombinations = Template.bind({});
 ColorCombinations.args = {
   cards: [
diff --git a/packages/unity-react-core/src/components/Accordion/AccordionCard/AccordionCard.jsx b/packages/unity-react-core/src/components/Accordion/AccordionCard/AccordionCard.jsx
index 7953aca0ce..118ab6118b 100644
--- a/packages/unity-react-core/src/components/Accordion/AccordionCard/AccordionCard.jsx
+++ b/packages/unity-react-core/src/components/Accordion/AccordionCard/AccordionCard.jsx
@@ -1,7 +1,7 @@
 // @ts-check
 import classNames from "classnames";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { sanitizeDangerousMarkup } from "../../../../../../shared";
 import { accordionCardPropTypes } from "../../../core/models/shared-prop-types";
@@ -11,77 +11,104 @@ import { GaEventWrapper } from "../../GaEventWrapper/GaEventWrapper";
  * @typedef {import('../../../core/types/shared-types').AccordionCardItemProps} AccordionCardItemProps
  */
 
+/**
+ * @typedef {import('../../../core/types/shared-types').AccordionCard} AccordionCard
+ */
+
 /**
  * @param {AccordionCardItemProps} props
  * @returns {JSX.Element}
  * @ignore
  */
-export const AccordionCard = ({ id, item, openCard, onClick, gaData }) => {
-  const isOpen = id === openCard;
-  /**
-   * event to open accordion is happening on the closed accordion
-   * so the action seem backwards but:
-   * open will send an event with action "close"
-   * close will send an event with action "open"
-   * */
+export const AccordionCard = forwardRef(
+  (
+    /** @type {AccordionCardItemProps} */ {
+      id,
+      parentId,
+      /** @type {AccordionCard} */ item,
+      openCard,
+      onClick,
+      gaData,
+    },
+    ref
+  ) => {
+    const isOpen = id === openCard;
+    /**
+     * event to open accordion is happening on the closed accordion
+     * so the action seem backwards but:
+     * open will send an event with action "close"
+     * close will send an event with action "open"
+     * */
 
-  const gaAction = !isOpen ? "close" : "open";
-  return (
-    <div
-      className={classNames("accordion-item", "mt-3", {
-        [`accordion-item-${item.color}`]: item.color,
-        [`accordion-header-icon`]: item.content?.icon,
-      })}
-    >
-      <div className="accordion-header">
-        <h4>
-          <GaEventWrapper
-            gaData={{ ...gaData, action: gaAction, text: item.content.header }}
-          >
-            <a
-              data-testid="accordion-opener"
-              className={classNames({ [`collapsed`]: !isOpen })}
-              data-bs-toggle="collapse"
-              href={`#card-body-${id}`}
-              role="button"
-              aria-expanded={isOpen}
-              aria-controls={`card-body-${id}`}
-              onClick={e => onClick(e, id)}
+    const gaAction = !isOpen ? "close" : "open";
+    return (
+      <div
+        ref={ref}
+        className={classNames("accordion-item", "mt-3", {
+          [`accordion-item-${item.color}`]: item.color,
+          [`accordion-header-icon`]: item.content?.icon,
+        })}
+      >
+        <div className="accordion-header">
+          <h4>
+            <GaEventWrapper
+              gaData={{
+                ...gaData,
+                action: gaAction,
+                text: item.content.header,
+              }}
             >
-              {item.content?.icon ? (
-                <span className="accordion-icon">
-                  <i
-                    className={`${item.content.icon?.[0]} fa-${item.content.icon?.[1]} me-2`}
-                  />
-                  {item.content.header}
-                </span>
-              ) : (
-                item.content?.header
+              <button
+                data-testid="accordion-opener"
+                className={classNames({ [`collapsed`]: !isOpen })}
+                data-bs-toggle="collapse"
+                // @ts-expect-error href is needed for Bootstrap collapse
+                href={`#card-body-${id}`}
+                type="button"
+                aria-expanded={isOpen}
+                aria-controls={`card-body-${id}`}
+                onClick={e => onClick(e, id)}
+              >
+                {item.content?.icon ? (
+                  <span className="accordion-icon">
+                    <i
+                      className={`${item.content.icon?.[0]} fa-${item.content.icon?.[1]} me-2`}
+                    />
+                    {item.content.header}
+                  </span>
+                ) : (
+                  item.content?.header
+                )}
+                <i className="fas fa-chevron-up" />
+              </button>
+            </GaEventWrapper>
+          </h4>
+        </div>
+        {item.content?.body && (
+          <div
+            data-bs-parent={`#${parentId}`}
+            id={`card-body-${id}`}
+            className={classNames("collapse", { show: isOpen })}
+          >
+            <div
+              className="accordion-body"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={sanitizeDangerousMarkup(
+                item.content.body
               )}
-              <i className="fas fa-chevron-up" />
-            </a>
-          </GaEventWrapper>
-        </h4>
+            />
+          </div>
+        )}
       </div>
-      {item.content?.body && (
-        <div
-          id={`card-body-${id}`}
-          className={classNames("collapse", { show: isOpen })}
-        >
-          <div
-            className="accordion-body"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={sanitizeDangerousMarkup(item.content.body)}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+    );
+  }
+);
 
 AccordionCard.propTypes = {
   id: PropTypes.number,
+  // @ts-ignore a technical type mismatch between PropTypes definition and your TypeScript
   item: accordionCardPropTypes,
+  parentId: PropTypes.string,
   openCard: PropTypes.number,
   onClick: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
diff --git a/packages/unity-react-core/src/core/types/shared-types.js b/packages/unity-react-core/src/core/types/shared-types.js
index 619f7ddc68..bade533cc8 100644
--- a/packages/unity-react-core/src/core/types/shared-types.js
+++ b/packages/unity-react-core/src/core/types/shared-types.js
@@ -86,7 +86,7 @@
 
 /**
  * @callback ReactMouseEvent
- * @param {React.MouseEvent<HTMLAnchorElement, MouseEvent>} event
+ * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event
  * @param {number} id
  * @param {string} [cardTitle] // @deprecated
  * @returns {void}
@@ -95,6 +95,7 @@
 /**
  * @typedef {Object} AccordionCardItemProps
  * @property {number} id
+ * @property {string} parentId
  * @property {AccordionCard} item
  * @property {number} openCard
  * @property {ReactMouseEvent} onClick