fix: chrome-button focus ring consistency

Author: gkatsev

src/js/media-chrome-button.js

@@ -37,9 +37,16 @@ template.innerHTML = `
     Only show outline when keyboard focusing.
     https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
   */
-  :host-context([media-keyboard-control]):host(:focus),
-  :host-context([media-keyboard-control]):host(:focus-within) {
+  :host(:focus-visible) {
     box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
+    outline: 0;
+  }
+  /*
+   * hide default focus ring, particularly when using mouse
+   */
+  :host(:where(:focus)) {
+    box-shadow: none;
+    outline: 0;
   }
 
   :host(:hover) {