[6.x] Remove reka tabs outline

resources/css/elements/base.css

@@ -62,6 +62,17 @@
     }
 }
 
+@layer ui {
+    /* Notes...
+        - Reka adds a container something like `<div id="reka-tabs-v-12-content-main" role="tabpanel" data-state="inactive" etc. />` around any tab panels such as "main" and "seo".
+        - If you click into an empty area of the tab, then use your keyboard to focus on a different window, it leaves a useless outline state. This component is not focusable.
+        - We can't edit this HTML so instead we'll target it with a selector
+    */
+    [id*="reka-tabs"][role="tabpanel"] {
+        outline: none;
+    }
+}
+
 /* Use a utility layer only when we need higher specificity */
 @layer utilities {
     /* When we have a focus state within a focus state, only the inner-most focused container should _have_ focus. e.g. if we're focusing on a Bard field within a Bard field, only the inner Bard field should receive the focus outline. */
@@ -70,7 +81,7 @@
     }
 
     /* Notes...
-    
+
         - Sometimes we want to show a focus outline on a container when it has focus-within, e.g. in Replicator sets where we want to show a focus outline on the set header when it has focus on the button inside the header, whose shape is not as neat.
 
         - Here we set a specific target for the focus outline