fix: fix broken aria-controls issue

Author: HedwigJDoets

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

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

@@ -79,7 +79,15 @@ 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>
 `;
@@ -163,7 +171,15 @@ 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>
 `;
@@ -247,7 +263,15 @@ 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

@@ -85,7 +85,15 @@ 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

@@ -85,7 +85,15 @@ 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,17 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
                     {menuHeaderContent}
                 </div>
             )}
-            {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>
-            )}
+            <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 && menuFooterContent && (
                 <div tabIndex={0} className="widget-combobox-menu-footer" onMouseDown={PreventMenuCloseEventHandler}>
                     {menuFooterContent}