Fix focus ring in <wa-scroller>, <wa-dialog>, and <wa-drawer> (#1525)

* visible focus outlines for scrollable containers

* add changelog

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
 

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 {

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 {

packages/webawesome/src/components/scroller/scroller.css

@@ -10,7 +10,6 @@
   position: relative;
   max-width: 100%;
   isolation: isolate;
-  overflow: hidden;
 }
 
 :host([orientation='vertical']) {