diff --git a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
index 4cbb61ed77..ad44b3d75d 100644
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
@@ -40,7 +40,7 @@ export type MenuRenderFn = (
 ) => JSX.Element | ReactPortal | null
 
 const scrollIntoViewIfNeeded = (target: HTMLElement) => {
-  const typeaheadContainerNode = document.getElementById('typeahead-menu')
+  const typeaheadContainerNode = document.getElementById('slash-menu')
   if (!typeaheadContainerNode) return
 
   const typeaheadRect = typeaheadContainerNode.getBoundingClientRect()
@@ -507,15 +507,15 @@ export function useMenuAnchorRef(
         if (className != null) {
           containerDiv.className = className
         }
-        containerDiv.setAttribute('aria-label', 'Typeahead menu')
-        containerDiv.setAttribute('id', 'typeahead-menu')
+        containerDiv.setAttribute('aria-label', 'Slash menu')
+        containerDiv.setAttribute('id', 'slash-menu')
         containerDiv.setAttribute('role', 'listbox')
         containerDiv.style.display = 'block'
         containerDiv.style.position = 'absolute'
         anchorElem.append(containerDiv)
       }
       anchorElementRef.current = containerDiv
-      rootElement.setAttribute('aria-controls', 'typeahead-menu')
+      rootElement.setAttribute('aria-controls', 'slash-menu')
     }
   }, [editor, resolution, className, anchorElem])
 
diff --git a/test/fields/lexical.e2e.spec.ts b/test/fields/lexical.e2e.spec.ts
index 7761ff4a7b..be35dc37b5 100644
--- a/test/fields/lexical.e2e.spec.ts
+++ b/test/fields/lexical.e2e.spec.ts
@@ -342,14 +342,18 @@ describe('lexical', () => {
       await page.keyboard.press('Enter')
       await page.keyboard.press('/')
 
-      const popover = page.locator('#typeahead-menu .typeahead-popover')
+      const popover = page.locator('#slash-menu .slash-menu-popup')
       await expect(popover).toBeVisible()
 
-      const popoverBasicGroup = popover.locator('.group').nth(1) // Second group ("Basic") in popover
+      const popoverBasicGroup = popover
+        .locator('.slash-menu-popup__group.slash-menu-popup__group-basic')
+        .first() // Second group ("Basic") in popover
       await expect(popoverBasicGroup).toBeVisible()
 
       // Heading 2 should be the last, most bottom popover button element which should be initially visible, if not hidden by something (e.g. another block)
-      const popoverHeading2Button = popoverBasicGroup.locator('button.item').nth(4)
+      const popoverHeading2Button = popoverBasicGroup
+        .locator('button.slash-menu-popup__item-heading-2')
+        .first()
       await expect(popoverHeading2Button).toBeVisible()
 
       // Make sure that, even though it's "visible", it's not actually covered by something else due to z-index issues