mirror of
https://github.com/moodle/moodle.git
synced 2025-08-07 18:06:51 +02:00
MDL-67874 theme_boost: make focus outline accessible
This commit is contained in:
Bas Brands
parent
8aa0f2c4d8
commit
91de0ed823
30 changed files with 473 additions and 97 deletions
|
|
@ -60,3 +60,23 @@ p.arrow_button {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-focus($background, $innershadow) {
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: $btn-focus-width solid darken($background, 40%);
|
||||
box-shadow: inset 0 0 0 2px $innershadow;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-focus($value, $white);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-focus($value, $gray-800);
|
||||
}
|
||||
}
|
||||
|
|
@ -138,6 +138,66 @@ a.dimmed_text:visited,
|
|||
color: $text-muted;
|
||||
}
|
||||
|
||||
// Accessible focus styling for links, add .aalink to links with custom css classes to get
|
||||
// accessible focus styles.
|
||||
.aalink,
|
||||
#page-footer a:not([class]),
|
||||
.arrow_link,
|
||||
a:not([class]),
|
||||
.activityinstance > a {
|
||||
&.focus,
|
||||
&:focus {
|
||||
outline: $btn-focus-width solid transparent;
|
||||
color: $gray-900;
|
||||
background-color: lighten($primary, 50%);
|
||||
box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
|
||||
}
|
||||
&:focus:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Accessible focus styling for buttons like elements that do not use the .btn class. Add
|
||||
// .aabtn to you element if you need the same focus styles.
|
||||
.aabtn,
|
||||
.btn-link,
|
||||
.nav-link,
|
||||
.atto_link_button,
|
||||
[role="button"],
|
||||
.list-group-item-action,
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
.sr-only-focusable,
|
||||
a.dropdown-item,
|
||||
a.dropdown-toggle,
|
||||
.modal-dialog[tabindex="0"],
|
||||
.moodle-dialogue-base .closebutton,
|
||||
button.close {
|
||||
&.focus,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
&:focus:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.usermenu,
|
||||
div.dropdown-item {
|
||||
a,
|
||||
a[role="button"] {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus-within {
|
||||
outline: 0;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.unlist,
|
||||
.unlist li,
|
||||
.inline-list,
|
||||
|
|
@ -1956,6 +2016,7 @@ nav.navbar .logo img {
|
|||
|
||||
// Do not remove these rules.
|
||||
overflow: hidden;
|
||||
padding: 0.25rem;
|
||||
|
||||
.page-header-image,
|
||||
.page-header-headings {
|
||||
|
|
@ -1967,6 +2028,9 @@ nav.navbar .logo img {
|
|||
.page-header-image {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
& > a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-headings,
|
||||
|
|
@ -1979,13 +2043,6 @@ nav.navbar .logo img {
|
|||
.header-button-group {
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
// Don't touch it unless you know exactly what you are doing.
|
||||
top: -0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2218,6 +2275,9 @@ $footer-link-color: $bg-inverse-link-color !default;
|
|||
.icon {
|
||||
color: $footer-link-color;
|
||||
}
|
||||
&:focus .icon {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-inverse a {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ body:not(.editing) .sitetopic ul.section {
|
|||
min-height: 2em;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
text-indent: -31px;
|
||||
padding-left: 31px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -184,6 +184,7 @@
|
|||
|
||||
.fp-iconview .fp-filename-field {
|
||||
height: 33px;
|
||||
margin-top: 3px;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
|
@ -736,10 +737,12 @@ a.ygtvspacer:hover {
|
|||
}
|
||||
|
||||
.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
bottom: 5px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
|
||||
|
|
|
|||
|
|
@ -1059,15 +1059,6 @@ div#dock {
|
|||
.usermenu {
|
||||
.login {
|
||||
line-height: 2.25rem;
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,8 @@ $card-group-margin: .25rem;
|
|||
// Custom control size
|
||||
$custom-control-indicator-size: 1.25rem;
|
||||
|
||||
$input-btn-focus-color: rgba($primary, .75) !default;
|
||||
|
||||
// stylelint-disable
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
|
|
|
|||
|
|
@ -3798,7 +3798,7 @@ pre {
|
|||
background-color: #fff;
|
||||
border-color: #6eb5f3;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.form-control::placeholder {
|
||||
color: #6c757d;
|
||||
opacity: 1; }
|
||||
|
|
@ -4154,7 +4154,7 @@ textarea.form-control {
|
|||
text-decoration: none; }
|
||||
.btn:focus, .btn.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65; }
|
||||
.btn:not(:disabled):not(.disabled) {
|
||||
|
|
@ -5018,7 +5018,7 @@ input[type="button"].btn-block {
|
|||
border-color: #1177d1;
|
||||
background-color: #1177d1; }
|
||||
.custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: #6eb5f3; }
|
||||
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
|
||||
|
|
@ -5124,7 +5124,7 @@ input[type="button"].btn-block {
|
|||
.custom-select:focus {
|
||||
border-color: #6eb5f3;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-select:focus::-ms-value {
|
||||
color: #495057;
|
||||
background-color: #fff; }
|
||||
|
|
@ -5174,7 +5174,7 @@ input[type="button"].btn-block {
|
|||
opacity: 0; }
|
||||
.custom-file-input:focus ~ .custom-file-label {
|
||||
border-color: #6eb5f3;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-file-input[disabled] ~ .custom-file-label,
|
||||
.custom-file-input:disabled ~ .custom-file-label {
|
||||
background-color: #e9ecef; }
|
||||
|
|
@ -5220,11 +5220,11 @@ input[type="button"].btn-block {
|
|||
.custom-range:focus {
|
||||
outline: none; }
|
||||
.custom-range:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-range:focus::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-range:focus::-ms-thumb {
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
.custom-range::-moz-focus-outer {
|
||||
border: 0; }
|
||||
.custom-range::-webkit-slider-thumb {
|
||||
|
|
@ -5809,7 +5809,7 @@ input[type="button"].btn-block {
|
|||
.page-link:focus {
|
||||
z-index: 3;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.25); }
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
|
||||
.page-item:first-child .page-link {
|
||||
margin-left: 0; }
|
||||
|
|
@ -9742,6 +9742,91 @@ a.dimmed_text:visited,
|
|||
.dimmed_category a {
|
||||
color: #6c757d; }
|
||||
|
||||
.aalink.focus, .aalink:focus,
|
||||
#page-footer a:not([class]).focus,
|
||||
#page-footer a:not([class]):focus,
|
||||
.arrow_link.focus,
|
||||
.arrow_link:focus,
|
||||
a:not([class]).focus,
|
||||
a:not([class]):focus,
|
||||
.activityinstance > a.focus,
|
||||
.activityinstance > a:focus {
|
||||
outline: 0.2rem solid transparent;
|
||||
color: #212529;
|
||||
background-color: #e4f1fd;
|
||||
box-shadow: 0 -0.2rem #e4f1fd, 0 0.2rem #343a40; }
|
||||
|
||||
.aalink:focus:hover,
|
||||
#page-footer a:not([class]):focus:hover,
|
||||
.arrow_link:focus:hover,
|
||||
a:not([class]):focus:hover,
|
||||
.activityinstance > a:focus:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
.aabtn.focus, .aabtn:focus,
|
||||
.btn-link.focus,
|
||||
.btn-link:focus,
|
||||
.nav-link.focus,
|
||||
.nav-link:focus,
|
||||
.atto_link_button.focus,
|
||||
.atto_link_button:focus,
|
||||
[role="button"].focus,
|
||||
[role="button"]:focus,
|
||||
.list-group-item-action.focus,
|
||||
.list-group-item-action:focus,
|
||||
input[type="checkbox"].focus,
|
||||
input[type="checkbox"]:focus,
|
||||
input[type="radio"].focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="file"].focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="image"].focus,
|
||||
input[type="image"]:focus,
|
||||
.sr-only-focusable.focus,
|
||||
.sr-only-focusable:focus,
|
||||
a.dropdown-item.focus,
|
||||
a.dropdown-item:focus,
|
||||
a.dropdown-toggle.focus,
|
||||
a.dropdown-toggle:focus,
|
||||
.modal-dialog[tabindex="0"].focus,
|
||||
.modal-dialog[tabindex="0"]:focus,
|
||||
.moodle-dialogue-base .closebutton.focus,
|
||||
.moodle-dialogue-base .closebutton:focus,
|
||||
button.close.focus,
|
||||
button.close:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
|
||||
.aabtn:focus:hover,
|
||||
.btn-link:focus:hover,
|
||||
.nav-link:focus:hover,
|
||||
.atto_link_button:focus:hover,
|
||||
[role="button"]:focus:hover,
|
||||
.list-group-item-action:focus:hover,
|
||||
input[type="checkbox"]:focus:hover,
|
||||
input[type="radio"]:focus:hover,
|
||||
input[type="file"]:focus:hover,
|
||||
input[type="image"]:focus:hover,
|
||||
.sr-only-focusable:focus:hover,
|
||||
a.dropdown-item:focus:hover,
|
||||
a.dropdown-toggle:focus:hover,
|
||||
.modal-dialog[tabindex="0"]:focus:hover,
|
||||
.moodle-dialogue-base .closebutton:focus:hover,
|
||||
button.close:focus:hover {
|
||||
text-decoration: none; }
|
||||
|
||||
.usermenu a,
|
||||
.usermenu a[role="button"],
|
||||
div.dropdown-item a,
|
||||
div.dropdown-item a[role="button"] {
|
||||
outline: 0;
|
||||
box-shadow: none; }
|
||||
|
||||
.usermenu:focus-within,
|
||||
div.dropdown-item:focus-within {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
|
||||
|
||||
.unlist,
|
||||
.unlist li,
|
||||
.inline-list,
|
||||
|
|
@ -11208,7 +11293,8 @@ nav.navbar .logo img {
|
|||
|
||||
/** Header-bar styles **/
|
||||
.page-context-header {
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
padding: 0.25rem; }
|
||||
.page-context-header .page-header-image,
|
||||
.page-context-header .page-header-headings {
|
||||
float: left;
|
||||
|
|
@ -11217,6 +11303,8 @@ nav.navbar .logo img {
|
|||
.page-context-header .page-header-image {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em; }
|
||||
.page-context-header .page-header-image > a {
|
||||
display: inline-block; }
|
||||
.page-context-header .page-header-headings,
|
||||
.page-context-header .header-button-group {
|
||||
position: relative;
|
||||
|
|
@ -11225,9 +11313,6 @@ nav.navbar .logo img {
|
|||
.page-context-header .header-button-group {
|
||||
display: block;
|
||||
float: left; }
|
||||
.page-context-header .header-button-group a {
|
||||
position: relative;
|
||||
top: -0.4em; }
|
||||
|
||||
ul.dragdrop-keyboard-drag li {
|
||||
list-style-type: none; }
|
||||
|
|
@ -11400,6 +11485,8 @@ ul {
|
|||
text-decoration: underline; }
|
||||
#page-footer a .icon {
|
||||
color: #fff; }
|
||||
#page-footer a:focus .icon {
|
||||
color: #343a40; }
|
||||
|
||||
.bg-inverse a {
|
||||
color: #fff;
|
||||
|
|
@ -13015,7 +13102,7 @@ body:not(.editing) .sitetopic ul.section {
|
|||
min-height: 2em; }
|
||||
.section .activity .contentwithoutlink > a,
|
||||
.section .activity .activityinstance > a {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
text-indent: -31px;
|
||||
padding-left: 31px; }
|
||||
.section .activity .contentwithoutlink .dimmed .activityicon,
|
||||
|
|
@ -14102,6 +14189,7 @@ body.drawer-ease {
|
|||
|
||||
.fp-iconview .fp-filename-field {
|
||||
height: 33px;
|
||||
margin-top: 3px;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
position: absolute; }
|
||||
|
|
@ -14560,10 +14648,12 @@ a.ygtvspacer:hover {
|
|||
display: none; }
|
||||
|
||||
.filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
bottom: 5px; }
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; }
|
||||
|
||||
.filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
|
||||
.filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
|
||||
|
|
@ -17145,11 +17235,6 @@ div#dock {
|
|||
|
||||
.usermenu .login {
|
||||
line-height: 2.25rem; }
|
||||
.usermenu .login a {
|
||||
color: #1177d1; }
|
||||
.usermenu .login a:hover, .usermenu .login a:focus {
|
||||
color: #0b4f8a;
|
||||
text-decoration: underline; }
|
||||
|
||||
.userloggedinas .usermenu .usertext,
|
||||
.userswitchedrole .usermenu .usertext,
|
||||
|
|
@ -17780,6 +17865,70 @@ p.arrow_button {
|
|||
line-height: 48px !important;
|
||||
/* stylelint-disable-line declaration-no-important */ }
|
||||
|
||||
.btn-primary:focus, .btn-primary.focus {
|
||||
outline: 0.2rem solid #020c14;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-secondary:focus, .btn-secondary.focus {
|
||||
outline: 0.2rem solid #5f6e7d;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-success:focus, .btn-success.focus {
|
||||
outline: 0.2rem solid black;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-info:focus, .btn-info.focus {
|
||||
outline: 0.2rem solid #124a5b;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-warning:focus, .btn-warning.focus {
|
||||
outline: 0.2rem solid #694109;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-danger:focus, .btn-danger.focus {
|
||||
outline: 0.2rem solid #360d0c;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-light:focus, .btn-light.focus {
|
||||
outline: 0.2rem solid #8193a5;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-dark:focus, .btn-dark.focus {
|
||||
outline: 0.2rem solid black;
|
||||
box-shadow: inset 0 0 0 2px #fff; }
|
||||
|
||||
.btn-outline-primary:focus, .btn-outline-primary.focus {
|
||||
outline: 0.2rem solid #020c14;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
|
||||
outline: 0.2rem solid #5f6e7d;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-success:focus, .btn-outline-success.focus {
|
||||
outline: 0.2rem solid black;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-info:focus, .btn-outline-info.focus {
|
||||
outline: 0.2rem solid #124a5b;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-warning:focus, .btn-outline-warning.focus {
|
||||
outline: 0.2rem solid #694109;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-danger:focus, .btn-outline-danger.focus {
|
||||
outline: 0.2rem solid #360d0c;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-light:focus, .btn-outline-light.focus {
|
||||
outline: 0.2rem solid #8193a5;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.btn-outline-dark:focus, .btn-outline-dark.focus {
|
||||
outline: 0.2rem solid black;
|
||||
box-shadow: inset 0 0 0 2px #343a40; }
|
||||
|
||||
.gradetreebox h4 {
|
||||
font-size: 0.9375rem; }
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<button aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" class="btn nav-link float-sm-left mr-1 btn-light bg-gray" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">{{#pix}}i/menubars{{/pix}}<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span></button>
|
||||
</div>
|
||||
|
||||
<a href="{{{ config.wwwroot }}}" class="navbar-brand {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
|
||||
<a href="{{{ config.wwwroot }}}" class="navbar-brand aabtn {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
|
||||
{{^ output.should_display_navbar_logo }}
|
||||
d-none d-sm-inline
|
||||
{{/ output.should_display_navbar_logo }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue