fix(Future Select): Remove role=dialog from listbox container (#4968)

* fix(Future Select): Remove role=dialog from listbox container

* Update tests

* Update test assertion to match other one

* Adjust 1 and delete 1 test to be more user focused

.changeset/red-trees-bow.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Remove role=dialog from Select listbox container

packages/components/src/MultiSelect/MultiSelect.tsx

@@ -114,6 +114,9 @@ export const MultiSelect = ({
         <Popover
           refs={refs}
           id={`${id}--popover`}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
           focusOnProps={{
             enabled: true,
             onClickOutside,

packages/components/src/MultiSelect/subcomponents/Popover/Popover.tsx

@@ -65,9 +65,6 @@ export const Popover = <RT extends ReferenceType>({
         ref={refs.setFloating}
         style={floatingStyles}
         className={classnames(styles.popover, classNameOverride)}
-        role="dialog"
-        aria-modal="true"
-        tabIndex={-1}
         {...restProps}
       >
         {children}

packages/components/src/__future__/Select/Select.spec.tsx

@@ -367,19 +367,6 @@ describe("<Select />", () => {
       })
     })
 
-    it("will portal to the document body by default", async () => {
-      render(<SelectWrapper selectedKey="batch-brew" isOpen />)
-
-      const popover = screen.getByRole("dialog")
-      // expected div that FocusOn adds to the popover
-      const popoverFocusWrapper = popover.parentNode
-
-      await waitFor(() => {
-        const expectedBodyTag = popoverFocusWrapper?.parentNode
-        expect(expectedBodyTag?.nodeName).toEqual("BODY")
-      })
-    })
-
     it("will render as a descendant of the element matching the id", async () => {
       const SelectWithPortal = (): JSX.Element => {
         const portalContainerId = "id--portal-container"
@@ -401,13 +388,13 @@ describe("<Select />", () => {
 
       await waitFor(() => {
         const newPortalRegion = screen.getByTestId("id--portal-container-test")
-        const popover = within(newPortalRegion).getByRole("dialog")
+        const listbox = within(newPortalRegion).getByRole("listbox")
 
-        expect(popover).toBeInTheDocument()
+        expect(listbox).toBeInTheDocument()
       })
     })
 
-    it("will portal to the document body if the id does not match", async () => {
+    it("will still render the listbox when the portal id given is invalid", async () => {
       const SelectWithPortal = (): JSX.Element => {
         const expectedContainerId = "id--portal-container"
         return (
@@ -424,9 +411,8 @@ describe("<Select />", () => {
       render(<SelectWithPortal />)
 
       await waitFor(() => {
-        const popover = within(document.body).getByRole("dialog")
-
-        expect(popover).toBeInTheDocument()
+        const listbox = within(document.body).getByRole("listbox")
+        expect(listbox).toBeInTheDocument()
       })
     })
   })