luci-theme-bootstrap: add focus indication for tabs

Underline the link text if a tab has keyboard focus in order to give a
visual indication of the focus state.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit 56a737ec53323052be9d2178fc655b2c1442601d)

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index a2099f39d4d5c23b1b7f2c4279a3d17233b78d3b..f87bc52902cdc152696f9bed3358ad37d8ff616d 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1225,6 +1225,10 @@ a.menu:after {
        outline: none;
 }
 
+.tabs > li > a:focus, .cbi-tabmenu > li > a:focus {
+       text-decoration: underline;
+}
+
 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
        background: linear-gradient(var(--tab-inactive-hover-background-color) 90%, var(--tab-inactive-border-color) 100%);
 }