moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-08 02:16:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-81825 theme_boost: Refactor .sr-only usages for BS5

Browse source 
- Add .visually-hidden to the Boostratp 5 bridge SCSS file
- Replace .sr-only occurrences with .visually-hidden
- Replace .dropzone-sr-only-focusable  with .dropzone-visually-hidden-focusable
  for consistency
This commit is contained in:
Mikel Martín 2024-11-08 10:35:21 +01:00
parent 0888a6d324
commit f9abc562f5
220 changed files with 469 additions and 439 deletions
Download patch file Download diff file Expand all files Collapse all files

17
theme/boost/scss/moodle/bs5-bridge.scss
View file

@ -34,6 +34,15 @@ $alert-color-scale: 50% !default;
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// Visually hidden mixins
@mixin visually-hidden() {
@include sr-only();
}
@mixin visually-hidden-focusable() {
@include sr-only-focusable();
}
/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
/* This file should be removed as part of MDL-75669. */
.g-0 {
@ -142,3 +151,11 @@ $alert-color-scale: 50% !default;
.fst-italic {
@extend .font-italic;
}
// Generate visually-hidden classes.
.visually-hidden {
@extend .sr-only;
}
.visually-hidden-focusable {
@extend .sr-only-focusable;
}

2
theme/boost/scss/moodle/calendar.scss
View file

@ -557,7 +557,7 @@ $calendarCurrentDateBackground: $primary;
}
.calendarwrapper {
.arrow_text {
@include sr-only;
@include visually-hidden;
}
}
}

14
theme/boost/scss/moodle/core.scss
View file

@ -145,7 +145,7 @@ input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="image"],
.sr-only-focusable,
.visually-hidden-focusable,
a.dropdown-toggle,
.moodle-dialogue-base .closebutton,
button.btn-close,
@ -413,7 +413,7 @@ form.popupform div {
.no-overflow,
.table-responsive {
.generaltable {
.sr-only,
.visually-hidden,
.accesshide {
position: relative;
display: block;
@ -425,7 +425,7 @@ form.popupform div {
// Accessibility: text 'seen' by screen readers but not visual users.
.accesshide {
@include sr-only();
@include visually-hidden();
}
span.hide,
@ -2275,12 +2275,12 @@ $footer-link-color: $bg-inverse-link-color !default;
}
}
.sr-only-focusable {
.visually-hidden-focusable {
&:active,
&:focus {
z-index: 1031;
position: fixed;
background: $sr-only-active-bg;
background: $visually-hidden-active-bg;
padding: 7px;
left: 0;
top: 0;
@ -2831,14 +2831,14 @@ body.dragging {
}
}
.dropzone-sr-only-focusable {
.dropzone-visually-hidden-focusable {
&:active,
&:focus {
outline: 0;
box-shadow: $input-btn-focus-box-shadow;
z-index: $zindex-popover;
position: relative;
background: $sr-only-active-bg;
background: $visually-hidden-active-bg;
padding: 7px;
}
}

4
theme/boost/scss/moodle/modules.scss
View file

@ -328,7 +328,7 @@ $author-image-margin-sm: 8px;
/** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
.alert.discussionlocked {
@include sr-only();
@include visually-hidden();
}
/** Fix muted text contrast ratios for accessibility. */
@ -347,7 +347,7 @@ $author-image-margin-sm: 8px;
/** Make the tag list text screen reader visible only */
.tag_list > b {
@include sr-only();
@include visually-hidden();
}
:target > .focus-target {

2
theme/boost/scss/moodle/primarynavigation.scss
View file

@ -14,7 +14,7 @@
display: none;
}
.editmode-switch-form label {
@include sr-only();
@include visually-hidden();
}
}

2
theme/boost/scss/moodle/question.scss
View file

@ -243,7 +243,7 @@ table.question-bank-table {
body.path-question-type {
/* Hacks to display the labels within a form group. */
.fitem .col-form-label.sr-only:not(legend):not([for="id_category"]) {
.fitem .col-form-label.visually-hidden:not(legend):not([for="id_category"]) {
position: static;
width: auto;
height: auto;

2
theme/boost/scss/moodle/variables.scss
View file

@ -172,7 +172,7 @@ $hover-tooltip-bg: $white !default;
$hover-tooltip-border-color: rgba($black, .2) !default;
$hover-tooltip-border-top-color: $white !default;
$sr-only-active-bg: $white !default;
$visually-hidden-active-bg: $white !default;
$overlay-icon-bg: rgba($white, .6) !default;
$overlay-preview-bg: rgba($white, .8) !default;

24
theme/boost/style/moodle.css
View file

@ -13266,7 +13266,7 @@ readers do not read off random characters that represent icons */
content: "\f3bf";
}
.sr-only,
.sr-only, .visually-hidden,
.fa-sr-only {
position: absolute;
width: 1px;
@ -13279,7 +13279,7 @@ readers do not read off random characters that represent icons */
border-width: 0;
}
.sr-only-focusable:not(:focus),
.sr-only-focusable:not(:focus), .visually-hidden-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
position: absolute;
width: 1px;
@ -20433,7 +20433,7 @@ button.bg-dark:focus {
}
}
.sr-only {
.sr-only, .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
@ -20445,7 +20445,7 @@ button.bg-dark:focus {
border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.sr-only-focusable:active, .visually-hidden-focusable:active, .sr-only-focusable:focus, .visually-hidden-focusable:focus {
position: static;
width: auto;
height: auto;
@ -23150,8 +23150,8 @@ input[type=file].focus,
input[type=file]:focus,
input[type=image].focus,
input[type=image]:focus,
.sr-only-focusable.focus,
.sr-only-focusable:focus,
.visually-hidden-focusable.focus,
.visually-hidden-focusable:focus,
a.dropdown-toggle.focus,
a.dropdown-toggle:focus,
.moodle-dialogue-base .closebutton.focus,
@ -23176,7 +23176,7 @@ 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,
.visually-hidden-focusable:focus:hover,
a.dropdown-toggle:focus:hover,
.moodle-dialogue-base .closebutton:focus:hover,
button.btn-close:focus:hover,
@ -23414,9 +23414,9 @@ form.popupform div {
margin-bottom: 0;
}
.no-overflow .generaltable .sr-only,
.no-overflow .generaltable .visually-hidden,
.no-overflow .generaltable .accesshide,
.table-responsive .generaltable .sr-only,
.table-responsive .generaltable .visually-hidden,
.table-responsive .generaltable .accesshide {
position: relative;
display: block;
@ -25239,7 +25239,7 @@ dd:after {
padding-left: 1.5rem;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.visually-hidden-focusable:active, .visually-hidden-focusable:focus {
z-index: 1031;
position: fixed;
background: #fff;
@ -25799,7 +25799,7 @@ body.dragging .dragging {
max-height: initial;
margin-right: 0;
}
.dropzone-container .dropzone-sr-only-focusable:active, .dropzone-container .dropzone-sr-only-focusable:focus {
.dropzone-container .dropzone-visually-hidden-focusable:active, .dropzone-container .dropzone-visually-hidden-focusable:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
z-index: 1060;
@ -31874,7 +31874,7 @@ table.question-bank-table .header.checkbox .form-check {
body.path-question-type {
/* Hacks to display the labels within a form group. */
}
body.path-question-type .fitem .col-form-label.sr-only:not(legend):not([for=id_category]) {
body.path-question-type .fitem .col-form-label.visually-hidden:not(legend):not([for=id_category]) {
position: static;
width: auto;
height: auto;

4
theme/boost/templates/drawers.mustache
View file

@ -106,7 +106,7 @@
data-placement="right"
title="{{#str}}opendrawerindex, core{{/str}}"
>
<span class="sr-only">{{#str}}opendrawerindex, core{{/str}}</span>
<span class="visually-hidden">{{#str}}opendrawerindex, core{{/str}}</span>
{{#pix}} t/index_drawer, moodle {{/pix}}
</button>
</div>
@ -122,7 +122,7 @@
data-placement="right"
title="{{#str}}opendrawerblocks, core{{/str}}"
>
<span class="sr-only">{{#str}}opendrawerblocks, core{{/str}}</span>
<span class="visually-hidden">{{#str}}opendrawerblocks, core{{/str}}</span>
<span class="dir-rtl-hide">{{#pix}}t/blocks_drawer, core{{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}}t/blocks_drawer_rtl, core{{/pix}}</span>
</button>

2
theme/boost/templates/navbar.mustache
View file

@ -59,7 +59,7 @@
<div class="container-fluid">
<button class="navbar-toggler aabtn d-block d-md-none px-1 my-1 border-0" data-toggler="drawers" data-action="toggle" data-target="theme_boost-drawers-primary">
<span class="navbar-toggler-icon"></span>
<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
<span class="visually-hidden">{{#str}}sidepanel, core{{/str}}</span>
</button>
<a href="{{{ config.homeurl }}}" class="navbar-brand d-none d-md-flex align-items-center m-0 me-4 p-0 aabtn">

4
theme/boost/templates/primary-drawer-mobile.mustache
View file

@ -66,13 +66,13 @@
{{{text}}}
<span class="ms-auto expanded-icon icon-no-margin mx-2">
{{#pix}} t/expanded, core {{/pix}}
<span class="sr-only">
<span class="visually-hidden">
{{#str}} collapse, core {{/str}}
</span>
</span>
<span class="ms-auto collapsed-icon icon-no-margin mx-2">
{{#pix}} t/collapsed, core {{/pix}}
<span class="sr-only">
<span class="visually-hidden">
{{#str}} expand, core {{/str}}
</span>
</span>

24
theme/classic/style/moodle.css
View file

@ -13266,7 +13266,7 @@ readers do not read off random characters that represent icons */
content: "\f3bf";
}
.sr-only,
.sr-only, .visually-hidden,
.fa-sr-only {
position: absolute;
width: 1px;
@ -13279,7 +13279,7 @@ readers do not read off random characters that represent icons */
border-width: 0;
}
.sr-only-focusable:not(:focus),
.sr-only-focusable:not(:focus), .visually-hidden-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
position: absolute;
width: 1px;
@ -20433,7 +20433,7 @@ button.bg-dark:focus {
}
}
.sr-only {
.sr-only, .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
@ -20445,7 +20445,7 @@ button.bg-dark:focus {
border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.sr-only-focusable:active, .visually-hidden-focusable:active, .sr-only-focusable:focus, .visually-hidden-focusable:focus {
position: static;
width: auto;
height: auto;
@ -23150,8 +23150,8 @@ input[type=file].focus,
input[type=file]:focus,
input[type=image].focus,
input[type=image]:focus,
.sr-only-focusable.focus,
.sr-only-focusable:focus,
.visually-hidden-focusable.focus,
.visually-hidden-focusable:focus,
a.dropdown-toggle.focus,
a.dropdown-toggle:focus,
.moodle-dialogue-base .closebutton.focus,
@ -23176,7 +23176,7 @@ 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,
.visually-hidden-focusable:focus:hover,
a.dropdown-toggle:focus:hover,
.moodle-dialogue-base .closebutton:focus:hover,
button.btn-close:focus:hover,
@ -23414,9 +23414,9 @@ form.popupform div {
margin-bottom: 0;
}
.no-overflow .generaltable .sr-only,
.no-overflow .generaltable .visually-hidden,
.no-overflow .generaltable .accesshide,
.table-responsive .generaltable .sr-only,
.table-responsive .generaltable .visually-hidden,
.table-responsive .generaltable .accesshide {
position: relative;
display: block;
@ -25239,7 +25239,7 @@ dd:after {
padding-left: 1.5rem;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
.visually-hidden-focusable:active, .visually-hidden-focusable:focus {
z-index: 1031;
position: fixed;
background: #fff;
@ -25799,7 +25799,7 @@ body.dragging .dragging {
max-height: initial;
margin-right: 0;
}
.dropzone-container .dropzone-sr-only-focusable:active, .dropzone-container .dropzone-sr-only-focusable:focus {
.dropzone-container .dropzone-visually-hidden-focusable:active, .dropzone-container .dropzone-visually-hidden-focusable:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75);
z-index: 1060;
@ -31874,7 +31874,7 @@ table.question-bank-table .header.checkbox .form-check {
body.path-question-type {
/* Hacks to display the labels within a form group. */
}
body.path-question-type .fitem .col-form-label.sr-only:not(legend):not([for=id_category]) {
body.path-question-type .fitem .col-form-label.visually-hidden:not(legend):not([for=id_category]) {
position: static;
width: auto;
height: auto;