From 07aab375529ae043a98193c23f01471557f8978f Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 13 Jan 2026 10:41:35 +0000 Subject: [PATCH] Remove Reka focus outline for tabpanels --- resources/css/elements/base.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css index b1c6a7c7e4b..2d64340c37a 100644 --- a/resources/css/elements/base.css +++ b/resources/css/elements/base.css @@ -62,6 +62,17 @@ } } +@layer ui { + /* Notes... + - Reka adds a container something like `
` 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