fix(Breadcrumb): prevent last breadcrumb item from keyboard navigation [run-chromatic][skip-cd] (#648)

Author: th-94

src/components/Breadcrumb/sgds-breadcrumb-item.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, PropertyValueMap } from "lit";
 import { property } from "lit/decorators.js";
 import SgdsIcon from "../Icon/sgds-icon";
 import SgdsLink from "../Link/sgds-link";
@@ -18,6 +18,23 @@ export class SgdsBreadcrumbItem extends SgdsElement {
   /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */
   @property({ type: Boolean, reflect: true }) active = false;
 
+  private _preventNavigation = (e: MouseEvent) => e.preventDefault();
+
+  override updated(changedProperties: PropertyValueMap<this>) {
+    super.updated(changedProperties);
+    if (changedProperties.has("active")) {
+      const anchor = this.querySelector<HTMLAnchorElement>("a");
+      if (anchor) {
+        if (this.active) {
+          anchor.setAttribute("tabindex", "-1");
+          anchor.addEventListener("click", this._preventNavigation);
+        } else {
+          anchor.removeEventListener("click", this._preventNavigation);
+        }
+      }
+    }
+  }
+
   render() {
     return html`
       <sgds-link><slot class="nav-link"></slot></sgds-link>

test/breadcrumb.test.ts

@@ -87,8 +87,11 @@ describe("sgds-breadcrumb", () => {
            active=""
            aria-current="page"
          >
-           <a href="https://www.google.com/">
-             Last
+          <a
+            href="https://www.google.com/"
+            tabindex="-1"
+          >
+            Last
            </a>
          </sgds-breadcrumb-item>
         </div>
@@ -133,4 +136,62 @@ describe("sgds-breadcrumb-item", () => {
         `
     );
   });
+
+  it("sets tabindex=-1 on the slotted anchor of the active item", async () => {
+    const el = await fixture<SgdsBreadcrumb>(html`
+      <sgds-breadcrumb>
+        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
+        <sgds-breadcrumb-item><a href="#">Current</a></sgds-breadcrumb-item>
+      </sgds-breadcrumb>
+    `);
+    const lastItem = el.querySelectorAll("sgds-breadcrumb-item")[1];
+    expect(lastItem.querySelector("a")?.getAttribute("tabindex")).to.equal("-1");
+  });
+  it("does not set tabindex=-1 on non-active item anchors", async () => {
+    const el = await fixture<SgdsBreadcrumb>(html`
+      <sgds-breadcrumb>
+        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
+        <sgds-breadcrumb-item><a href="#">Current</a></sgds-breadcrumb-item>
+      </sgds-breadcrumb>
+    `);
+    const firstItem = el.querySelectorAll("sgds-breadcrumb-item")[0];
+    expect(firstItem.querySelector("a")?.getAttribute("tabindex")).to.not.equal("-1");
+  });
+  it("prevents mouse click navigation on the active anchor", async () => {
+    const el = await fixture<SgdsBreadcrumb>(html`
+      <sgds-breadcrumb>
+        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
+        <sgds-breadcrumb-item><a href="#">Current</a></sgds-breadcrumb-item>
+      </sgds-breadcrumb>
+    `);
+    const lastItem = el.querySelectorAll("sgds-breadcrumb-item")[1];
+    const clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true });
+    lastItem.querySelector("a")?.dispatchEvent(clickEvent);
+    expect(clickEvent.defaultPrevented).to.be.true;
+  });
+  it("prevents keyboard Enter navigation on the active anchor", async () => {
+    const el = await fixture<SgdsBreadcrumb>(html`
+      <sgds-breadcrumb>
+        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
+        <sgds-breadcrumb-item><a href="#">Current</a></sgds-breadcrumb-item>
+      </sgds-breadcrumb>
+    `);
+    const lastItem = el.querySelectorAll("sgds-breadcrumb-item")[1];
+    // browsers fire a click event on a focused anchor when Enter is pressed
+    const clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true });
+    lastItem.querySelector("a")?.dispatchEvent(clickEvent);
+    expect(clickEvent.defaultPrevented).to.be.true;
+  });
+  it("does not prevent click navigation on non-active item anchors", async () => {
+    const el = await fixture<SgdsBreadcrumb>(html`
+      <sgds-breadcrumb>
+        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
+        <sgds-breadcrumb-item><a href="#">Current</a></sgds-breadcrumb-item>
+      </sgds-breadcrumb>
+    `);
+    const firstItem = el.querySelectorAll("sgds-breadcrumb-item")[0];
+    const clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true });
+    firstItem.querySelector("a")?.dispatchEvent(clickEvent);
+    expect(clickEvent.defaultPrevented).to.be.false;
+  });
 });