[BUGFIX] Add focus style for nav in Link Browser

Add proper focus styles to the nav links in the Link Browser modal window. Resolves: #103631 Releases: main, 12.4 Change-Id: I0abb597124e335c3955c73438ac3cd2f0dad93bf Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83786 Tested-by: Oliver Bartsch <[email protected]> Tested-by: Andreas Kienast <[email protected]> Tested-by: core-ci <[email protected]> Reviewed-by: Andreas Kienast <[email protected]> Reviewed-by: Oliver Bartsch <[email protected]>
TYPO3 · Apr 16, 2024 · 5bd95fb · 5bd95fb
1 parent edf3ca2
commit 5bd95fb
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/Build/Sources/Sass/component/_elementbrowser.scss b/Build/Sources/Sass/component/_elementbrowser.scss
@@ -82,6 +82,10 @@
 
     .nav-link {
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+
+        &:focus-visible {
+            box-shadow: rgba(0, 120, 230, .25) 0 0 0 .25rem;
+        }
     }
 }
 

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3408,6 +3408,7 @@ typo3-backend-form-selecttree-toolbar{display:block;border-bottom:1px solid rgba
 .element-browser-header+.element-browser-nav{padding-top:0}
 .element-browser-nav .nav{gap:2px}
 .element-browser-nav .nav-link,.element-browser-nav .nav.nav-tabs>li:not(.nav-item)>a:not(.nav-link){box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
+.element-browser-nav .nav-link:focus-visible,.element-browser-nav .nav.nav-tabs>li:not(.nav-item)>a:focus-visible:not(.nav-link){box-shadow:rgba(0,120,230,.25) 0 0 0 .25rem}
 .element-browser-body{overflow:unset;padding:var(--typo3-spacing)}
 .element-browser-body>:first-child{margin-top:0}
 .element-browser-body>:last-child{margin-bottom:0}