fix: revert aria-hidden change

Author: HedwigJDoets

packages/pluggableWidgets/combobox-web/src/__tests__/SingleSelection.spec.tsx

@@ -214,11 +214,10 @@ describe("Combo box (Association)", () => {
             expect(iconWrapper).toHaveAttribute("aria-hidden", "true");
         });
 
-        it("hides menu list from assistive technologies when closed", () => {
+        it("does not render menu list when closed", () => {
             const component = render(<Combobox {...defaultProps} />);
             const menuList = component.container.querySelector(".widget-combobox-menu-list");
-            expect(menuList).toBeInTheDocument();
-            expect(menuList).toHaveAttribute("aria-hidden", "true");
+            expect(menuList).not.toBeInTheDocument();
         });
 
         it("renders menu list when open with items", async () => {
@@ -229,7 +228,6 @@ describe("Combo box (Association)", () => {
             await waitFor(() => {
                 const menuList = component.container.querySelector(".widget-combobox-menu-list");
                 expect(menuList).toBeInTheDocument();
-                expect(menuList).not.toHaveAttribute("aria-hidden");
                 expect(component.getAllByRole("option")).toHaveLength(4);
             });
         });
@@ -246,7 +244,6 @@ describe("Combo box (Association)", () => {
             await waitFor(() => {
                 const menuList = component.container.querySelector(".widget-combobox-menu-list");
                 expect(menuList).toBeInTheDocument();
-                expect(menuList).not.toHaveAttribute("aria-hidden");
                 const placeholder = component.container.querySelector(".widget-combobox-no-options");
                 expect(placeholder).toBeInTheDocument();
             });

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/MultiSelection.spec.tsx.snap

@@ -80,15 +80,7 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
     <div
       class="widget-combobox-menu widget-combobox-menu-hidden"
       style="visibility: hidden; position: fixed;"
-    >
-      <ul
-        aria-hidden="true"
-        aria-labelledby="comboBox1-label"
-        class="widget-combobox-menu-list"
-        id="downshift-0-menu"
-        role="listbox"
-      />
-    </div>
+    />
   </div>
 </div>
 `;
@@ -173,15 +165,7 @@ exports[`Combo box (Association) toggles combobox menu on: input CLICK(focus) /
     <div
       class="widget-combobox-menu widget-combobox-menu-hidden"
       style="visibility: visible; position: fixed; width: 0px; top: 0px; left: 0px;"
-    >
-      <ul
-        aria-hidden="true"
-        aria-labelledby="comboBox1-label"
-        class="widget-combobox-menu-list"
-        id="downshift-0-menu"
-        role="listbox"
-      />
-    </div>
+    />
   </div>
 </div>
 `;
@@ -266,15 +250,7 @@ exports[`Combo box (Association) toggles combobox menu on: input TOGGLE BUTTON 1
     <div
       class="widget-combobox-menu widget-combobox-menu-hidden"
       style="visibility: hidden; position: fixed;"
-    >
-      <ul
-        aria-hidden="true"
-        aria-labelledby="comboBox1-label"
-        class="widget-combobox-menu-list"
-        id="downshift-0-menu"
-        role="listbox"
-      />
-    </div>
+    />
   </div>
 </div>
 `;

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap

@@ -86,15 +86,7 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
     <div
       class="widget-combobox-menu widget-combobox-menu-hidden"
       style="visibility: hidden; position: fixed;"
-    >
-      <ul
-        aria-hidden="true"
-        aria-labelledby="comboBox1-label"
-        class="widget-combobox-menu-list"
-        id="downshift-0-menu"
-        role="listbox"
-      />
-    </div>
+    />
   </div>
 </div>
 `;

packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap

@@ -86,15 +86,7 @@ exports[`Combo box (Static values) renders combobox widget 1`] = `
     <div
       class="widget-combobox-menu widget-combobox-menu-hidden"
       style="visibility: hidden; position: fixed;"
-    >
-      <ul
-        aria-hidden="true"
-        aria-labelledby="comboBox1-label"
-        class="widget-combobox-menu-list"
-        id="downshift-0-menu"
-        role="listbox"
-      />
-    </div>
+    />
   </div>
 </div>
 `;

packages/pluggableWidgets/combobox-web/src/components/ComboboxMenuWrapper.tsx

@@ -82,18 +82,18 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
                     {menuHeaderContent}
                 </div>
             )}
-            <ul
-                className={classNames("widget-combobox-menu-list", {
-                    "widget-combobox-menu-highlighted": (highlightedIndex ?? -1) >= 0,
-                    "widget-combobox-menu-lazy-scroll": lazyLoading && !isEmpty
-                })}
-                aria-hidden={!isOpen || undefined}
-                {...menuProps}
-            >
-                {isOpen &&
-                    (isEmpty && !isLoading ? <NoOptionsPlaceholder>{noOptionsText}</NoOptionsPlaceholder> : children)}
-                {isOpen && loader}
-            </ul>
+            {isOpen && (
+                <ul
+                    className={classNames("widget-combobox-menu-list", {
+                        "widget-combobox-menu-highlighted": (highlightedIndex ?? -1) >= 0,
+                        "widget-combobox-menu-lazy-scroll": lazyLoading && !isEmpty
+                    })}
+                    {...menuProps}
+                >
+                    {isEmpty && !isLoading ? <NoOptionsPlaceholder>{noOptionsText}</NoOptionsPlaceholder> : children}
+                    {loader}
+                </ul>
+            )}
             {isOpen && menuFooterContent && (
                 <div tabIndex={0} className="widget-combobox-menu-footer" onMouseDown={PreventMenuCloseEventHandler}>
                     {menuFooterContent}