mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
bfc95effdb
* Moves the sidebar into the header so that user can tab directly from the sidebar button into the sidebar (when open). * Because the sidebar is absolutely positioned inside the header and the header applies a top-margin, we need to adjust the top position calculation for the sidebar. * Removes the checkbox from the accessibility tree through CSS `display: none;` instead of HTML attributes. * Given that the checkbox is not able to receive focus, the `#mw-sidebar-checkbox:focus ~ .mw-header .mw-checkbox-hack-button` CSS rule is obsolete and moved instead to the label button. An additional outline: 0 rule was added to remove the dotted outline that Firefox applies. * Makes the "Skip to navigation" jump link point to the sidebar now. After the sidebar has been tabbed through, the rest of the navigation can be tabbed to. Bug: T246420 Change-Id: I981da3650854568bb9cfbf3c6c59e7625e7d094c
48 lines
1.9 KiB
Plaintext
48 lines
1.9 KiB
Plaintext
// This file is being considered for Core as part of T252774.
|
|
|
|
// Notes:
|
|
//
|
|
// - Usage requires three elements: a hidden checkbox input, a button, and a show / hide target.
|
|
// - By convention, the checked state is considered expanded or visible. Unchecked is considered
|
|
// hidden.
|
|
// - Please see additional documentation in checkboxHack.js for example HTML and JavaScript
|
|
// integration.
|
|
//
|
|
// Example supplemental styles (to be added on a per use case basis):
|
|
//
|
|
// - Animate target in and out from start (left in LTR) to end (right in LTR):
|
|
//
|
|
// .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-target {
|
|
// // Turn off presentation so that screen readers get the same effect as visually
|
|
// // hiding. Visibility and opacity can be animated. If animation is unnecessary, all
|
|
// // of this can be replaced with `display: none` instead to avoid hidden rendering.
|
|
// visibility: hidden;
|
|
// opacity: 0;
|
|
// @timing: @transition-duration-base ease-in-out;
|
|
// .transition( transform @timing, opacity @timing, visibility @timing; );
|
|
// .transform( translateX( -100% ) );
|
|
// }
|
|
//
|
|
// - Show / hide the target instantly without animation:
|
|
//
|
|
// .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-target {
|
|
// display: none;
|
|
// }
|
|
|
|
@import 'mediawiki.ui/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
.mw-checkbox-hack-checkbox {
|
|
// We don't want the browser to focus on the checkbox so we remove it from the
|
|
// accessibility tree. Instead, we want the label button to receive focus
|
|
// which has a tabindex of '0'.
|
|
display: none;
|
|
}
|
|
|
|
.mw-checkbox-hack-button {
|
|
// Labels are inlined by default but are also an icon having width and height specified.
|
|
display: inline-block;
|
|
// Use the hand icon for the toggle button which is actually a checkbox label.
|
|
cursor: pointer;
|
|
}
|