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
parent
commit
592aa2865b
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 8
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
  2. 5
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
  3. 10
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

8
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@ -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 () {

5
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css

@ -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;

10
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

@ -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 12px !important;
color: #6f42c1 !important;

Loading…
Cancel
Save