Browse Source
Keep the collapsed docs options bar transparent and its focus ring keyboard-only
- reset background/border/shadow on :not(.is-open) so hover/focus cannot leak the panel look
- return focus to the button only on Escape close, not on outside-click
pull/25748/head
maliming
5 days ago
No known key found for this signature in database
GPG Key ID: A646B9CB645ECEA4
3 changed files with
18 additions and
5 deletions
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@ -186,10 +186,6 @@
function setOpen ( isOpen ) {
$criteria . toggleClass ( 'is-open' , isOpen ) ;
$btn . attr ( 'aria-expanded' , isOpen ? 'true' : 'false' ) ;
// on close, pull focus out of the now-hidden popover back to the button
if ( ! isOpen && $ . contains ( $criteria [ 0 ] , document . activeElement ) ) {
$btn . trigger ( 'focus' ) ;
}
}
// clear any previous bindings so a second init (e.g. partial reload) does not stack handlers
$btn . off ( '.docsOptions' ) ;
@ -208,8 +204,10 @@
setOpen ( false ) ;
} ) ;
$ ( document ) . on ( 'keydown.docsOptions' , function ( e ) {
if ( e . key === 'Escape' ) {
if ( e . key === 'Escape' && $criteria . hasClass ( 'is-open' ) ) {
setOpen ( false ) ;
// keyboard close: return focus to the button (focus ring is appropriate here)
$btn . trigger ( 'focus' ) ;
}
} ) ;
$ ( window ) . on ( 'scroll.docsOptions' , function ( ) {
@ -139,6 +139,11 @@ body.scrolledMore .alert-criteria.is-open .options-header .toggle-btn::before {
content : "\f00d" ;
font-size : 22px ;
}
body . scrolledMore . alert-criteria : not ( . is-open ) , body . scrolledMore . alert-criteria : not ( . is-open ) : hover , body . scrolledMore . alert-criteria : not ( . is-open ) : focus-within {
background : transparent ! important ;
border : 0 ! important ;
box-shadow : none ! important ;
}
body . scrolledMore . alert-criteria p . alert-p {
margin : 0 0 12px ! important ;
color : # 6f42c1 ! important ;
@ -180,6 +180,16 @@ body {
}
}
/ / defensive : the collapsed state must never pick up the opened panel ' s background/
/ / border / shadow ( e . g . from a : hover / : focus-within rule leaking in ) — only the FAB shows
& : not ( . is-open ) ,
& : not ( . is-open ) : hover ,
& : not ( . is-open ) : focus-within {
background : transparent !important ;
border : 0 !important ;
box-shadow : none !important ;
}
p . alert-p {
margin : 0 0 12 px !important ;
color : #6f42c1 !important ;