diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index c0c38e77e..0dd4ba572 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -13,6 +13,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added the Kazakh translation [pr:1496]
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
+- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
 
 ## 3.0.0-beta.6
 
diff --git a/packages/webawesome/src/components/dialog/dialog.css b/packages/webawesome/src/components/dialog/dialog.css
index e787f3475..cb6e4f7de 100644
--- a/packages/webawesome/src/components/dialog/dialog.css
+++ b/packages/webawesome/src/components/dialog/dialog.css
@@ -111,6 +111,15 @@
   padding: var(--spacing);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
 }
 
 .footer {
diff --git a/packages/webawesome/src/components/drawer/drawer.css b/packages/webawesome/src/components/drawer/drawer.css
index 01637d687..b380caebf 100644
--- a/packages/webawesome/src/components/drawer/drawer.css
+++ b/packages/webawesome/src/components/drawer/drawer.css
@@ -175,6 +175,15 @@
   padding: var(--spacing);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
 }
 
 .footer {
diff --git a/packages/webawesome/src/components/scroller/scroller.css b/packages/webawesome/src/components/scroller/scroller.css
index b7158c373..2dac32094 100644
--- a/packages/webawesome/src/components/scroller/scroller.css
+++ b/packages/webawesome/src/components/scroller/scroller.css
@@ -10,7 +10,6 @@
   position: relative;
   max-width: 100%;
   isolation: isolate;
-  overflow: hidden;
 }
 
 :host([orientation='vertical']) {