diff --git a/.changeset/wise-coats-buy.md b/.changeset/wise-coats-buy.md
new file mode 100644
index 0000000000..d82c9d0b22
--- /dev/null
+++ b/.changeset/wise-coats-buy.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Primer::Alpha::Dialog uses <dialog> internally
diff --git a/app/components/primer/alpha/action_menu/action_menu_element.ts b/app/components/primer/alpha/action_menu/action_menu_element.ts
index ba4caffaaa..e9a8673c39 100644
--- a/app/components/primer/alpha/action_menu/action_menu_element.ts
+++ b/app/components/primer/alpha/action_menu/action_menu_element.ts
@@ -275,7 +275,15 @@ export class ActionMenuElement extends HTMLElement {
       if (this.#isOpen()) {
         this.#hide()
       }
+      const activeElement = this.ownerDocument.activeElement
+      const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body
+      const focusInClosedMenu = this.contains(activeElement)
+      if (lostFocus || focusInClosedMenu) {
+        setTimeout(() => this.invokerElement?.focus(), 0)
+      }
     }
+    // a modal <dialog> element will close all popovers
+    setTimeout(() => this.#show(), 0)
     dialog.addEventListener('close', handleDialogClose, {signal})
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
diff --git a/app/components/primer/alpha/dialog.html.erb b/app/components/primer/alpha/dialog.html.erb
index 8ebded10ce..67414761c6 100644
--- a/app/components/primer/alpha/dialog.html.erb
+++ b/app/components/primer/alpha/dialog.html.erb
@@ -1,5 +1,5 @@
 <%= show_button %>
-<div class="Overlay--hidden <%= @backdrop_classes %>" data-modal-dialog-overlay>
+<dialog-helper>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= header %>
     <% if content.present? %>
@@ -9,4 +9,4 @@
       <%= footer %>
     <% end %>
   <% end %>
-</div>
+</dialog-helper>
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
index 83c9305605..c20a4108b8 100644
--- a/app/components/primer/alpha/dialog.pcss
+++ b/app/components/primer/alpha/dialog.pcss
@@ -1,5 +1,15 @@
 /* Overlay */
 
+dialog.Overlay:not([open]) {
+  display: none;
+}
+
+/* dialog defualts to CanvasText not inherit */
+dialog.Overlay {
+  color: var(--fgColor-default);
+}
+
+
 .Overlay--hidden {
   display: none !important;
 }
diff --git a/app/components/primer/alpha/dialog.rb b/app/components/primer/alpha/dialog.rb
index e5efdc842f..bae650b7a9 100644
--- a/app/components/primer/alpha/dialog.rb
+++ b/app/components/primer/alpha/dialog.rb
@@ -125,8 +125,7 @@ def initialize(
         @position_narrow = position_narrow
         @visually_hide_title = visually_hide_title
 
-        @system_arguments[:tag] = "modal-dialog"
-        @system_arguments[:role] = "dialog"
+        @system_arguments[:tag] = "dialog"
         @system_arguments[:id] = @id
         @system_arguments[:aria] = { modal: true }
         @system_arguments[:aria] = merge_aria(
diff --git a/app/components/primer/alpha/modal_dialog.ts b/app/components/primer/alpha/modal_dialog.ts
deleted file mode 100644
index 840becf0ec..0000000000
--- a/app/components/primer/alpha/modal_dialog.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import {focusTrap} from '@primer/behaviors'
-import {getFocusableChild} from '@primer/behaviors/utils'
-
-function focusIfNeeded(elem: HTMLElement | undefined | null) {
-  if (document.activeElement !== elem) {
-    elem?.focus()
-  }
-}
-
-const overlayStack: ModalDialogElement[] = []
-
-function clickHandler(event: Event) {
-  const target = event.target as HTMLElement
-  const button = target?.closest('button')
-
-  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
-
-  // If the user is clicking a valid dialog trigger
-  let dialogId = button?.getAttribute('data-show-dialog-id')
-  if (dialogId) {
-    event.stopPropagation()
-    const dialog = document.getElementById(dialogId)
-    if (dialog instanceof ModalDialogElement) {
-      dialog.openButton = button
-      dialog.show()
-      // A buttons default behaviour in some browsers it to send a pointer event
-      // If the behaviour is allowed through the dialog will be shown but then
-      // quickly hidden- as if it were never shown. This prevents that.
-      event.preventDefault()
-      return
-    }
-  }
-
-  if (!overlayStack.length) return
-
-  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
-  if (dialogId) {
-    const dialog = document.getElementById(dialogId)
-    if (dialog instanceof ModalDialogElement) {
-      const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId)
-      overlayStack.splice(dialogIndex, 1)
-      dialog.close(button.hasAttribute('data-submit-dialog-id'))
-    }
-  }
-}
-
-function keydownHandler(event: Event) {
-  if (
-    !(event instanceof KeyboardEvent) ||
-    event.type !== 'keydown' ||
-    event.key !== 'Enter' ||
-    event.ctrlKey ||
-    event.altKey ||
-    event.metaKey ||
-    event.shiftKey
-  )
-    return
-
-  clickHandler(event)
-}
-
-function mousedownHandler(event: Event) {
-  const target = event.target as HTMLElement
-  if (target?.closest('button')) return
-
-  // Find the top level dialog that is open.
-  const topLevelDialog = overlayStack[overlayStack.length - 1]
-  if (!topLevelDialog) return
-
-  // Check if the mousedown happened outside the boundary of the top level dialog
-  const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
-
-  // Only close dialog if it's a click outside the dialog and the dialog has a button?
-  if (mouseDownOutsideDialog) {
-    target.ownerDocument.addEventListener(
-      'mouseup',
-      (upEvent: Event) => {
-        if (upEvent.target === target) {
-          overlayStack.pop()
-          topLevelDialog.close()
-        }
-      },
-      {once: true}
-    )
-  }
-}
-
-export class ModalDialogElement extends HTMLElement {
-  //TODO: Do we remove the abortController from focusTrap?
-  #focusAbortController = new AbortController()
-  openButton: HTMLButtonElement | null
-
-  get open() {
-    return this.hasAttribute('open')
-  }
-  set open(value: boolean) {
-    if (value) {
-      if (this.open) return
-      this.setAttribute('open', '')
-      this.setAttribute('aria-disabled', 'false')
-      document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
-      document.body.style.overflow = 'hidden'
-      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
-      if (this.#focusAbortController.signal.aborted) {
-        this.#focusAbortController = new AbortController()
-      }
-      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
-      overlayStack.push(this)
-    } else {
-      if (!this.open) return
-      this.removeAttribute('open')
-      this.setAttribute('aria-disabled', 'true')
-      this.#overlayBackdrop?.classList.add('Overlay--hidden')
-      document.body.style.paddingRight = '0'
-      document.body.style.overflow = 'initial'
-      this.#focusAbortController.abort()
-      // if #openButton is a child of a menu, we need to focus a suitable child of the menu
-      // element since it is expected for the menu to close on click
-      const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu')
-      if (menu) {
-        focusIfNeeded(getFocusableChild(menu))
-      } else {
-        focusIfNeeded(this.openButton)
-      }
-      this.openButton = null
-    }
-  }
-
-  get #overlayBackdrop(): HTMLElement | null {
-    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
-      return this.parentElement
-    }
-
-    return null
-  }
-
-  get showButtons(): NodeList {
-    // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
-    return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`)
-  }
-
-  connectedCallback(): void {
-    if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
-
-    document.addEventListener('click', clickHandler)
-    document.addEventListener('keydown', keydownHandler)
-    document.addEventListener('mousedown', mousedownHandler)
-
-    this.addEventListener('keydown', e => this.#keydown(e))
-  }
-
-  show() {
-    this.open = true
-  }
-
-  close(closedNotCancelled = false) {
-    if (this.open === false) return
-    const eventType = closedNotCancelled ? 'close' : 'cancel'
-    const dialogEvent = new Event(eventType)
-    this.dispatchEvent(dialogEvent)
-    this.open = false
-  }
-
-  #keydown(event: Event) {
-    if (!(event instanceof KeyboardEvent)) return
-    if (event.isComposing) return
-    if (!this.open) return
-
-    switch (event.key) {
-      case 'Escape':
-        this.close()
-        event.preventDefault()
-        event.stopPropagation()
-        break
-      case 'Enter': {
-        const target = event.target as HTMLElement
-
-        if (target.getAttribute('data-close-dialog-id') === this.id) {
-          event.stopPropagation()
-        }
-        break
-      }
-    }
-  }
-}
-
-declare global {
-  interface Window {
-    ModalDialogElement: typeof ModalDialogElement
-  }
-  interface HTMLElementTagNameMap {
-    'modal-dialog': ModalDialogElement
-  }
-}
-
-if (!window.customElements.get('modal-dialog')) {
-  window.ModalDialogElement = ModalDialogElement
-  window.customElements.define('modal-dialog', ModalDialogElement)
-}
diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss
index d03ed86ae1..b336561405 100644
--- a/app/components/primer/alpha/overlay.pcss
+++ b/app/components/primer/alpha/overlay.pcss
@@ -6,6 +6,12 @@ anchored-position[popover] {
   overflow: visible;
 }
 
+.Overlay {
+  display: flex;
+  border-width: 0;
+  padding: 0;
+}
+
 anchored-position:not(.Overlay) {
   background: none;
 }
@@ -15,6 +21,7 @@ anchored-position:not(.Overlay) {
   display: none
 }
 
-anchored-position.not-anchored::backdrop {
+anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
+
diff --git a/app/components/primer/dialog_helper.ts b/app/components/primer/dialog_helper.ts
new file mode 100644
index 0000000000..cba881cfb9
--- /dev/null
+++ b/app/components/primer/dialog_helper.ts
@@ -0,0 +1,77 @@
+function dialogInvokerButtonHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement) {
+      dialog.showModal()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
+    }
+  }
+
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement && dialog.open) {
+      dialog.close()
+    }
+  }
+}
+
+export class DialogHelperElement extends HTMLElement {
+  get dialog() {
+    return this.querySelector('dialog')
+  }
+
+  #abortController: AbortController | null = null
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    document.addEventListener('click', dialogInvokerButtonHandler)
+    document.addEventListener('click', this, {signal})
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  handleEvent(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    const dialog = this.dialog
+    if (!dialog?.open) return
+    if (target?.closest('dialog') !== dialog) return
+
+    const rect = dialog.getBoundingClientRect()
+    const clickWasInsideDialog =
+      rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width
+
+    if (!clickWasInsideDialog) {
+      dialog.close()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    DialogHelperElement: typeof DialogHelperElement
+  }
+  interface HTMLElementTagNameMap {
+    'dialog-helper': DialogHelperElement
+  }
+}
+
+if (!window.customElements.get('dialog-helper')) {
+  window.DialogHelperElement = DialogHelperElement
+  window.customElements.define('dialog-helper', DialogHelperElement)
+}
diff --git a/app/components/primer/primer.ts b/app/components/primer/primer.ts
index 0a8fc194af..6bdf81e1ce 100644
--- a/app/components/primer/primer.ts
+++ b/app/components/primer/primer.ts
@@ -2,9 +2,9 @@ import '@github/include-fragment-element'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
+import './dialog_helper'
 import './focus_group'
 import './alpha/image_crop'
-import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
 import './alpha/segmented_control'
diff --git a/demo/package-lock.json b/demo/package-lock.json
index 4e4bb08257..3a08364ab6 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -8,7 +8,7 @@
       "name": "demo",
       "version": "0.1.0",
       "dependencies": {
-        "@primer/css": "^21.1.0",
+        "@primer/css": "^21.1.1",
         "@primer/primitives": "7.15.4",
         "@rails/actioncable": "^7.1.2",
         "@rails/ujs": "^7.1.2",
@@ -151,9 +151,9 @@
       "integrity": "sha512-ApPbNhiWPHscs0+rLV76sCY75IEpPvDEZq9+iQXQqU6Tv5SLdax3PmzJlUHftlQ7O/eJnLO1dTEMEwj2Yn1BLA=="
     },
     "node_modules/@primer/css": {
-      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.0.tgz",
-      "integrity": "sha512-2MgVTgH3uWcN665JlwIasjjbB8pRLS+hMFyjFlesn5mUUseCS33aVRP8R6uIn5nk1A9IN+nq8MAGco3OAhlGZg==",
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.1.tgz",
+      "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==",
       "dependencies": {
         "@primer/primitives": "^7.12.0",
         "@primer/view-components": "^0.14.0"
@@ -3191,9 +3191,9 @@
       "integrity": "sha512-ApPbNhiWPHscs0+rLV76sCY75IEpPvDEZq9+iQXQqU6Tv5SLdax3PmzJlUHftlQ7O/eJnLO1dTEMEwj2Yn1BLA=="
     },
     "@primer/css": {
-      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.0.tgz",
-      "integrity": "sha512-2MgVTgH3uWcN665JlwIasjjbB8pRLS+hMFyjFlesn5mUUseCS33aVRP8R6uIn5nk1A9IN+nq8MAGco3OAhlGZg==",
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.1.tgz",
+      "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==",
       "requires": {
         "@primer/primitives": "^7.12.0",
         "@primer/view-components": "^0.14.0"
diff --git a/demo/package.json b/demo/package.json
index 85d772c584..60ce5a4f59 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -3,11 +3,11 @@
   "private": true,
   "version": "0.1.0",
   "dependencies": {
-    "@primer/css": "^21.1.0",
+    "@primer/css": "^21.1.1",
     "@primer/primitives": "7.15.4",
     "@rails/actioncable": "^7.1.2",
     "@rails/ujs": "^7.1.2",
     "turbolinks": "^5.2.0",
     "webpack-dev-server": "^4.15.1"
   }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index de3cf47626..bba81b22c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
         "@github/markdownlint-github": "^0.6.0",
         "@github/prettier-config": "0.0.6",
         "@playwright/test": "^1.35.1",
-        "@primer/css": "21.1.0",
+        "@primer/css": "^21.1.1",
         "@primer/primitives": "7.15.4",
         "@primer/stylelint-config": "^12.7.2",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -2409,9 +2409,9 @@
       "integrity": "sha512-gzryOl22EOzJSPT8pYbHZYHgcKEOw9KxG0L5XRL+cMaS767YGqZGoeF/YEaeJ3dEWMzqz93FPGSem3eo5PmPBA=="
     },
     "node_modules/@primer/css": {
-      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.0.tgz",
-      "integrity": "sha512-2MgVTgH3uWcN665JlwIasjjbB8pRLS+hMFyjFlesn5mUUseCS33aVRP8R6uIn5nk1A9IN+nq8MAGco3OAhlGZg==",
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.1.tgz",
+      "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==",
       "dev": true,
       "dependencies": {
         "@primer/primitives": "^7.12.0",
@@ -13293,9 +13293,9 @@
       "integrity": "sha512-gzryOl22EOzJSPT8pYbHZYHgcKEOw9KxG0L5XRL+cMaS767YGqZGoeF/YEaeJ3dEWMzqz93FPGSem3eo5PmPBA=="
     },
     "@primer/css": {
-      "version": "21.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.0.tgz",
-      "integrity": "sha512-2MgVTgH3uWcN665JlwIasjjbB8pRLS+hMFyjFlesn5mUUseCS33aVRP8R6uIn5nk1A9IN+nq8MAGco3OAhlGZg==",
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.1.1.tgz",
+      "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==",
       "dev": true,
       "requires": {
         "@primer/primitives": "^7.12.0",
diff --git a/package.json b/package.json
index a10e5a65b1..7d302717df 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.1.0",
+    "@primer/css": "^21.1.1",
     "@primer/primitives": "7.15.4",
     "@primer/stylelint-config": "^12.7.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
diff --git a/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb b/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb
index 82dc3a69d8..577b9f85c9 100644
--- a/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb
+++ b/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb
@@ -16,8 +16,7 @@
   <input type="text" id="input">
 </label>
 <script>
-  document.querySelector('#my-dialog').addEventListener('cancel', function () {
-    console.log('!!')
-    setTimeout(() => document.querySelector('#input').focus(), 0);
+  document.querySelector('#my-dialog').addEventListener('close', function () {
+    document.querySelector('#input').focus();
   });
 </script>
diff --git a/test/components/primer/alpha/dialog_test.rb b/test/components/primer/alpha/dialog_test.rb
index 11a07406de..5d5e5b305b 100644
--- a/test/components/primer/alpha/dialog_test.rb
+++ b/test/components/primer/alpha/dialog_test.rb
@@ -12,7 +12,7 @@ def test_renders_title_and_body
           component.with_body { "Hello" }
         end
 
-        assert_selector("modal-dialog[role='dialog']") do
+        assert_selector("dialog") do
           assert_selector("h1", text: "Title")
           assert_selector(".Overlay-body", text: "Hello")
         end
@@ -47,7 +47,7 @@ def test_renders_provided_id
           component.with_body { "content" }
         end
 
-        assert_selector("modal-dialog[id='my-id']")
+        assert_selector("dialog[id='my-id']")
       end
 
       def test_renders_random_id
@@ -55,7 +55,7 @@ def test_renders_random_id
           component.with_body { "content" }
         end
 
-        assert_selector("modal-dialog[id^='dialog-']")
+        assert_selector("dialog[id^='dialog-']")
       end
 
       def test_renders_title_and_subtitle_with_describedby
@@ -63,7 +63,7 @@ def test_renders_title_and_subtitle_with_describedby
           component.with_body { "content" }
         end
 
-        assert_selector("modal-dialog[id='my-dialog'][aria-labelledby='my-dialog-title'][aria-describedby='my-dialog-description']") do
+        assert_selector("dialog[id='my-dialog'][aria-labelledby='my-dialog-title'][aria-describedby='my-dialog-description']") do
           assert_selector("h1[id='my-dialog-title']", text: "Title")
           assert_selector("h2[id='my-dialog-description']", text: "Subtitle")
         end
@@ -75,7 +75,7 @@ def test_renders_header
           component.with_header { "header" }
         end
 
-        assert_selector("modal-dialog") do
+        assert_selector("dialog") do
           assert_selector(".Overlay-header", text: "header")
         end
       end
@@ -86,7 +86,7 @@ def test_renders_large_header
           component.with_header(variant: :large) { "header" }
         end
 
-        assert_selector("modal-dialog") do
+        assert_selector("dialog") do
           assert_selector(".Overlay-header.Overlay-header--large", text: "header")
         end
       end
@@ -97,7 +97,7 @@ def test_renders_footer_without_divider_by_default
           component.with_footer { "footer" }
         end
 
-        assert_selector("modal-dialog") do
+        assert_selector("dialog") do
           assert_selector(".Overlay-footer:not(.Overlay-footer--divided)")
         end
       end
@@ -108,7 +108,7 @@ def test_renders_footer_with_divider_if_show_divider_is_true
           component.with_footer(show_divider: true) { "footer" }
         end
 
-        assert_selector("modal-dialog") do
+        assert_selector("dialog") do
           assert_selector(".Overlay-footer.Overlay-footer--divided")
         end
       end
diff --git a/test/system/alpha/action_menu_test.rb b/test/system/alpha/action_menu_test.rb
index 2988e65088..3c1edcf5dd 100644
--- a/test/system/alpha/action_menu_test.rb
+++ b/test/system/alpha/action_menu_test.rb
@@ -316,7 +316,7 @@ def test_opens_dialog
       click_on_invoker_button
       click_on_second_item
 
-      assert_selector "modal-dialog[open]"
+      assert_selector "dialog[open]"
 
       # opening the dialog should close the menu
       refute_selector "action-menu ul li"
@@ -330,7 +330,7 @@ def test_opens_dialog_on_keydown
       # open menu, arrow down to second item, "click" second item
       page.driver.browser.keyboard.type(:enter, :down, :enter)
 
-      assert_selector "modal-dialog#my-dialog"
+      assert_selector "dialog#my-dialog"
     end
 
     def test_opens_dialog_on_keydown_space
@@ -341,7 +341,7 @@ def test_opens_dialog_on_keydown_space
       # open menu, arrow down to second item, "click" second item
       page.driver.browser.keyboard.type(:enter, :down, :space)
 
-      assert_selector "modal-dialog#my-dialog"
+      assert_selector "dialog#my-dialog"
     end
 
     def test_single_select_form_submission
@@ -492,7 +492,7 @@ def test_deferred_dialog_opens
       click_on_invoker_button
       click_on_fourth_item
 
-      assert_selector "modal-dialog[open]"
+      assert_selector "dialog[open]"
 
       # menu should close
       refute_selector "action-menu ul li"
diff --git a/test/system/alpha/dialog_test.rb b/test/system/alpha/dialog_test.rb
index 336c82d5a3..236efd4356 100644
--- a/test/system/alpha/dialog_test.rb
+++ b/test/system/alpha/dialog_test.rb
@@ -21,8 +21,8 @@ def test_modal_has_accessible_name
 
       click_button("Show Dialog")
 
-      assert_selector("modal-dialog[aria-labelledby]")
-      assert_equal(find("modal-dialog")["aria-labelledby"], find("h1")["id"])
+      assert_selector("dialog[aria-labelledby]")
+      assert_equal(find("dialog")["aria-labelledby"], find("h1")["id"])
     end
 
     def test_focuses_close_button
@@ -47,12 +47,12 @@ def test_closes_top_level_dialog
       click_button("Show Dialog")
       click_on_nested_dialog_button
 
-      assert_equal(find("modal-dialog#dialog-two")["open"], true)
+      assert_equal(find("dialog#dialog-two")["open"], true)
 
       click_on_nested_dialog_close_button
 
-      assert_selector "modal-dialog#dialog-two", visible: :hidden
-      assert_selector "modal-dialog#dialog-one"
+      assert_selector "dialog#dialog-two", visible: :hidden
+      assert_selector "dialog#dialog-one"
     end
 
     def test_closes_dialog_that_is_not_top_level
@@ -61,11 +61,11 @@ def test_closes_dialog_that_is_not_top_level
       click_button("Show Dialog")
       click_on_nested_dialog_button
 
-      assert_equal(find("modal-dialog#dialog-two")["open"], true)
+      assert_equal(find("dialog#dialog-two")["open"], true)
 
       click_on_initial_dialog_close_button
 
-      assert_selector "modal-dialog#dialog-one", visible: :hidden
+      assert_selector "dialog#dialog-one", visible: :hidden
     end
   end
 end
diff --git a/test/system/alpha/tooltip_test.rb b/test/system/alpha/tooltip_test.rb
index 5f918fffbc..45b3fca1a9 100644
--- a/test/system/alpha/tooltip_test.rb
+++ b/test/system/alpha/tooltip_test.rb
@@ -132,7 +132,7 @@ def test_tooltip_hidden_after_focus_change
 
       find("button#dialog-show-my-dialog").click
 
-      find("modal-dialog#my-dialog button#yes-button").click
+      find("dialog#my-dialog button#yes-button").click
 
       assert_selector("tool-tip[for='dialog-show-my-dialog']", visible: :hidden)
     end