fix: a11y bug: aria-expanded not supported here

Author: renovate[bot]

src/components/Chip/Chip.test.tsx

@@ -41,7 +41,7 @@ describe("Chip ", () => {
     );
     expect(
       within(screen.getByTestId("chip")).getByRole("button", {
-        name: Label.Dismiss,
+        name: `${Label.Dismiss} Bob`,
       }),
     ).toBeInTheDocument();
   });
@@ -59,7 +59,7 @@ describe("Chip ", () => {
     const dismissButton = within(screen.getByTestId("chip")).getByRole(
       "button",
       {
-        name: Label.Dismiss,
+        name: `${Label.Dismiss} Bob`,
       },
     );
     await userEvent.click(dismissButton);
@@ -209,7 +209,7 @@ describe("Chip ", () => {
     const dismissButton = within(screen.getByTestId("chip")).getByRole(
       "button",
       {
-        name: Label.Dismiss,
+        name: `${Label.Dismiss} Bob`,
       },
     );
     await userEvent.click(dismissButton);

src/components/Chip/Chip.tsx

@@ -150,8 +150,15 @@ const Chip = ({
     return (
       <span {...props} className={chipClassName}>
         {chipContent}
-        <button className="p-chip__dismiss" onClick={onDismiss} type="button">
-          <i className="p-icon--close">{Label.Dismiss}</i>
+        <button
+          className="p-chip__dismiss"
+          onClick={onDismiss}
+          type="button"
+          aria-label={`Dismiss ${value}`}
+        >
+          <i className="p-icon--close" aria-hidden="true">
+            {Label.Dismiss}
+          </i>
         </button>
       </span>
     );

src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.test.tsx

@@ -10,6 +10,11 @@ const sampleData = {
   chips: [{ value: "us-east1" }, { value: "us-east2" }, { value: "us-east3" }],
 };
 
+const manyChipsData = {
+  ...sampleData,
+  chips: Array.from({ length: 30 }, (_, i) => ({ value: `us-east${i + 1}` })),
+};
+
 describe("Filter panel section", () => {
   it("renders", () => {
     render(
@@ -100,25 +105,45 @@ describe("Filter panel section", () => {
   });
 
   it("all chips are shown when counter is clicked", async () => {
+    // Jest is unaware of layout so we must mock the offsetTop and offsetHeight
+    // of the chips to force the overflow counter to show.
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+      configurable: true,
+      value: 40,
+    });
+    Object.defineProperty(HTMLElement.prototype, "offsetTop", {
+      configurable: true,
+      value: 100,
+    });
     render(
       <FilterPanelSection
         searchData={[]}
         searchTerm=""
         toggleSelected={jest.fn()}
-        data={sampleData}
+        data={manyChipsData}
         sectionHidden={false}
       />,
     );
+
+    const counter = document.querySelector(
+      ".p-filter-panel-section__counter",
+    ) as HTMLElement;
+    expect(counter).toBeInTheDocument();
+
+    await userEvent.click(counter);
+
     expect(
-      document.querySelector(".p-filter-panel-section__chips"),
-    ).toHaveAttribute("aria-expanded", "false");
-    await userEvent.click(
-      // Use a query selector because the element's text is split up over
-      // multiple elements so it can't be selected by its content.
-      document.querySelector(".p-filter-panel-section__counter") as HTMLElement,
-    );
+      document.querySelector(".p-filter-panel-section__counter"),
+    ).not.toBeInTheDocument();
+
     expect(
-      document.querySelector(".p-filter-panel-section__chips"),
-    ).toHaveAttribute("aria-expanded", "true");
+      screen.getByRole("button", { name: "us-east1" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "us-east15" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "us-east30" }),
+    ).toBeInTheDocument();
   });
 });

src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx

@@ -104,11 +104,7 @@ const FilterPanelSection = ({
               }}
             />
           )}
-          <div
-            className="p-filter-panel-section__chips"
-            aria-expanded={expanded}
-            ref={chipWrapper}
-          >
+          <div className="p-filter-panel-section__chips" ref={chipWrapper}>
             {chips?.map((chip) => {
               // If search term has been added to input, only matching chips
               // should display

src/components/SearchAndFilter/FilterPanelSection/__snapshots__/FilterPanelSection.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`Filter panel section renders 1`] = `
     Regions
   </h3>
   <div
-    aria-expanded="false"
     class="p-filter-panel-section__chips"
   >
     <button

src/components/SearchAndFilter/SearchAndFilter.test.tsx

@@ -28,9 +28,6 @@ const sampleData = [
 ];
 const getPanel = () => document.querySelector(".p-search-and-filter__panel");
 
-const getSearchContainer = () =>
-  document.querySelector(".p-search-and-filter__search-container");
-
 describe("Search and filter", () => {
   it("renders", async () => {
     const returnSearchData = jest.fn();
@@ -155,14 +152,27 @@ describe("Search and filter", () => {
         returnSearchData={returnSearchData}
       />,
     );
-    expect(getSearchContainer()).toHaveAttribute("aria-expanded", "false");
     await userEvent.click(
       screen.getByRole("searchbox", { name: Label.SearchAndFilter }),
     );
     await userEvent.click(screen.getByRole("button", { name: "us-east1" }));
-    await userEvent.click(screen.getByRole("button", { name: "+1" }));
+    const counter = screen.getByRole("button", { name: "+1" });
+    await userEvent.click(counter);
 
-    expect(getSearchContainer()).toHaveAttribute("aria-expanded", "true");
+    // After expanding, the container should indicate it is expanded.
+    expect(
+      document.querySelector(".p-search-and-filter__search-container"),
+    ).toHaveAttribute("data-expanded", "true");
+
+    expect(
+      screen.getByRole("button", { name: "us-east1" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "us-east2" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "us-east3" }),
+    ).toBeInTheDocument();
   });
 
   it("search prompt appears when search field has search term", async () => {
@@ -388,7 +398,7 @@ describe("Search and filter", () => {
     // Dismiss the Cloud: Google filter chip
     const cloudChip: HTMLElement = screen.getByText("CLOUD").closest(".p-chip");
     const dismissButton = within(cloudChip).getByRole("button", {
-      name: "Dismiss",
+      name: "Dismiss Google",
     });
     await userEvent.click(dismissButton);
 

src/components/SearchAndFilter/SearchAndFilter.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, KeyboardEvent } from "react";
-
 import FilterPanelSection from "./FilterPanelSection";
 import Chip from "../Chip";
 import { overflowingChipsCount, isChipInArray } from "./utils";
@@ -241,7 +240,7 @@ const SearchAndFilter = ({
     >
       <div
         className="p-search-and-filter__search-container"
-        aria-expanded={searchBoxExpanded}
+        data-expanded={searchBoxExpanded}
         data-active={searchContainerActive || searchData.length === 0}
         data-empty={searchData.length <= 0}
         ref={searchContainerRef}

src/components/SearchAndFilter/__snapshots__/SearchAndFilter.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`Search and filter renders 1`] = `
   data-testid="searchandfilter"
 >
   <div
-    aria-expanded="false"
     class="p-search-and-filter__search-container"
     data-active="true"
     data-empty="true"
+    data-expanded="false"
   >
     <form
       class="p-search-and-filter__box"