From 5bd95fbc5bef45a5b15b77911992f32bc81c4c34 Mon Sep 17 00:00:00 2001 From: Willi Wehmeier Date: Mon, 15 Apr 2024 15:35:02 +0200 Subject: [PATCH] [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 Tested-by: Andreas Kienast Tested-by: core-ci Reviewed-by: Andreas Kienast Reviewed-by: Oliver Bartsch --- Build/Sources/Sass/component/_elementbrowser.scss | 4 ++++ typo3/sysext/backend/Resources/Public/Css/backend.css | 1 + 2 files changed, 5 insertions(+) diff --git a/Build/Sources/Sass/component/_elementbrowser.scss b/Build/Sources/Sass/component/_elementbrowser.scss index c29573047d0a..b0bdaf650b48 100644 --- 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 index 7c318ee9a16d..f212dbe4df35 100644 --- 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}