fix: a11y bug: aria-expanded not supported here

Author: renovate[bot]

src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useEffectEvent, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Chip from "../../Chip";
 import { overflowingChipsCount, isChipInArray } from "../utils";
 import { highlightSubString } from "../../../utils";
@@ -45,11 +45,11 @@ const FilterPanelSection = ({
 
   // If the offsetTop is more than double height of a single chip, consider it
   // overflowing
-  const updateFlowCount = useEffectEvent(() => {
+  const updateFlowCount = function () {
     const chips = chipWrapper?.current?.querySelectorAll(".p-chip");
     const overflowCount = overflowingChipsCount(chips, 2);
     setOverflowCounter(overflowCount);
-  });
+  };
 
   // Check if search term characters matches any characters in panel heading
   const searchTermInHeading = highlightSubString(heading, searchTerm).match;
@@ -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/SearchAndFilter.tsx

@@ -236,12 +236,13 @@ const SearchAndFilter = ({
     <div
       className="p-search-and-filter"
       ref={searchAndFilterRef}
-      onClick={() => filterPanelHidden && setFilterPanelHidden(false)}
+      onClick={() => {
+        return filterPanelHidden && setFilterPanelHidden(false);
+      }}
       {...props}
     >
       <div
         className="p-search-and-filter__search-container"
-        aria-expanded={searchBoxExpanded}
         data-active={searchContainerActive || searchData.length === 0}
         data-empty={searchData.length <= 0}
         ref={searchContainerRef}
@@ -284,6 +285,11 @@ const SearchAndFilter = ({
             {searchData.length ? Label.AddFilter : Label.SearchAndFilter}
           </label>
           <input
+            role="combobox"
+            aria-expanded={!filterPanelHidden}
+            aria-controls={
+              !filterPanelHidden ? "search-and-filter-panel" : undefined
+            }
             autoComplete="off"
             className="p-search-and-filter__input"
             id="search-and-filter-input"
@@ -313,6 +319,7 @@ const SearchAndFilter = ({
         <div
           className="p-search-and-filter__panel"
           aria-hidden={filterPanelHidden}
+          id="search-and-filter-panel"
           ref={panel}
           style={{ maxHeight, minHeight: "5rem", overflowX: "auto" }}
         >