fix: remove the search field from the playground (#1948)

Closes #1544

* fix: remove the search field from the playground

This search-field raises accessibility issues from rendering results after a search. Fixing the issues is complex. Since the component is hardly used, we remove it to mitigate the accessibility issues.

* fix: use CSS rules to avoid flashing when removing the search field

Author: musale

.storybook/manager-head.html

@@ -93,53 +93,6 @@
 
     sidebarNode.insertBefore(usefulLinksContainer, sidebarNode.childNodes[1]);
 
-    const searchBox = document.querySelector(".search-field");
-    if (searchBox) {
-      searchBox.setAttribute("name", "Find Components");
-      searchBox.setAttribute("aria-expanded", "false");
-
-      const searchInput = searchBox.querySelector("input");
-      if (searchInput) {
-        searchInput.addEventListener("mouseleave", addAriaExpanded("false"));
-        searchInput.addEventListener("mouseout", addAriaExpanded("false"));
-        searchInput.addEventListener("pointerleave", addAriaExpanded("false"));
-        searchInput.addEventListener("pointerout", addAriaExpanded("false"));
-        searchInput.addEventListener("click", addAriaExpanded("true"));
-        searchInput.addEventListener("focusout", addAriaExpanded("false"));
-        searchInput.addEventListener("focus", setListItemsAc11y);
-      }
-    }
-
-    function setListItemsAc11y() {
-      const recentMenu = document.querySelector("#storybook-explorer-menu");
-      if (recentMenu) {
-        const firstLi = recentMenu.querySelector("li");
-        if (firstLi) {
-          firstLi.setAttribute("role", "heading");
-          firstLi.setAttribute("aria-level", "2");
-        }
-
-        const otherLis = recentMenu.querySelectorAll("li:not(:first-child)");
-        if (otherLis && otherLis.length > 0) {
-          for (let i = 0; i < otherLis.length; i++) {
-            const li = otherLis[i];
-            const liText = li.innerText;
-            if (liText) {
-              li.setAttribute("aria-label", liText.trim());
-            }
-            li.setAttribute("aria-hidden", "true");
-          }
-        }
-      }
-    }
-
-    function addAriaExpanded(value) {
-      const searchBox = document.querySelector(".search-field");
-      if (searchBox) {
-        searchBox.setAttribute("aria-expanded", value);
-      }
-    }
-
     const sidebarSubheading = document.getElementsByClassName("sidebar-subheading");
     if (sidebarSubheading) {
       for (let i = 0; i < sidebarSubheading.length; i++) {
@@ -157,6 +110,7 @@
         }
       }
     }
+
     function setArialLabelForExpandCollapseBtn() {
       const expandCollapseBtns = document.getElementsByClassName("css-rl1ij0");
       if (expandCollapseBtns) {
@@ -180,7 +134,6 @@
     }
 
     setEventOnMenuClick();
-    setListItemsAc11y();
   }
 
   function createSvg(svgPath) {
@@ -434,4 +387,7 @@
   .css-14o7vtb:focus-visible {
     outline: auto;
   }
+  .search-field {
+    display: none !important;
+  }
 </style>