moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-09 19:06: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

6
course/classes/management_renderer.php
View file

@ -245,7 +245,7 @@ class core_course_management_renderer extends plugin_renderer_base {
$html .= html_writer::start_div('float-start ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
$html .= html_writer::empty_tag('input', $bcatinput);
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'categorylistitem' . $category->id));
@ -626,7 +626,7 @@ class core_course_management_renderer extends plugin_renderer_base {
$html .= html_writer::start_div('float-start ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
$html .= html_writer::empty_tag('input', $bulkcourseinput);
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'courselistitem' . $course->id));
@ -1205,7 +1205,7 @@ class core_course_management_renderer extends plugin_renderer_base {
if ($bulkcourseinput) {
$html .= html_writer::start_div('custom-control custom-checkbox me-1');
$html .= html_writer::empty_tag('input', $bulkcourseinput);
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
$html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label',
'for' => 'coursesearchlistitem' . $course->id));

2
course/classes/output/activity_navigation.php
View file

@ -96,7 +96,7 @@ class activity_navigation implements renderable, templatable {
// Render the activity list dropdown menu if available.
if (!empty($activitylist)) {
$select = new url_select($activitylist, '', array('' => get_string('jumpto')));
$select->set_label(get_string('jumpto'), array('class' => 'sr-only'));
$select->set_label(get_string('jumpto'), ['class' => 'visually-hidden']);
$select->attributes = array('id' => 'jump-to-activity');
$this->activitylist = $select;
}

2
course/classes/output/category_action_bar.php
View file

@ -65,7 +65,7 @@ class category_action_bar extends manage_categories_action_bar {
}
$currenturl = new moodle_url($this->page->url, ['categoryid' => $this->category->id]);
$select = new \url_select($options, $currenturl, null);
$select->set_label(get_string('categories'), ['class' => 'sr-only']);
$select->set_label(get_string('categories'), ['class' => 'visually-hidden']);
$select->class .= ' text-truncate w-100';
return $select->export_for_template($output);
}

2
course/classes/output/completion_action_bar.php
View file

@ -65,7 +65,7 @@ class completion_action_bar implements templatable, renderable {
);
$selectmenu->set_label(
get_string('coursecompletionnavigation', 'completion'),
['class' => 'sr-only']
['class' => 'visually-hidden']
);
return [

4
course/classes/output/manage_categories_action_bar.php
View file

@ -88,7 +88,7 @@ class manage_categories_action_bar implements \renderable {
if ($content) {
$urlselect = new \url_select($content, $activeurl, null);
$urlselect->set_label(get_string('viewing'), ['class' => 'sr-only']);
$urlselect->set_label(get_string('viewing'), ['class' => 'visually-hidden']);
return $urlselect->export_for_template($output);
}
@ -117,7 +117,7 @@ class manage_categories_action_bar implements \renderable {
}
$select = new \url_select($options, $currenturl);
$select->set_label(get_string('category'), ['class' => 'sr-only']);
$select->set_label(get_string('category'), ['class' => 'visually-hidden']);
$select->class .= ' text-truncate w-100';
return $select->export_for_template($output);
}

2
course/format/templates/local/content/cm/bulkselect.mustache
View file

@ -33,7 +33,7 @@
data-action="toggleSelectionCm"
data-bulkcheckbox="1"
>
<label class="sr-only" for="cmCheckbox{{cmid}}">
<label class="visually-hidden" for="cmCheckbox{{cmid}}">
{{#str}} selectcm, core_courseformat, {{activityname}}{{/str}}
</label>
</div>

6
course/format/templates/local/content/cm/completion_dialog.mustache
View file

@ -51,7 +51,7 @@
<div class="d-flex mt-2 text-success" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div>
{{#pix}}i/checked{{/pix}}
<span class="sr-only">{{#str}}completion_automatic:done, core_course{{/str}}</span>
<span class="visually-hidden">{{#str}}completion_automatic:done, core_course{{/str}}</span>
</div>
<span>{{description}}</span>
</div>
@ -60,7 +60,7 @@
<div class="d-flex mt-2 text-danger" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div>
{{#pix}}e/cancel{{/pix}}
<span class="sr-only">{{#str}}completion_automatic:failed, core_course{{/str}}</span>
<span class="visually-hidden">{{#str}}completion_automatic:failed, core_course{{/str}}</span>
</div>
<span>{{description}}</span>
</div>
@ -69,7 +69,7 @@
<div class="d-flex mt-2" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div>
{{#pix}}i/dot{{/pix}}
<span class="sr-only">{{#str}}completion_automatic:todo, core_course{{/str}}</span>
<span class="visually-hidden">{{#str}}completion_automatic:todo, core_course{{/str}}</span>
</div>
<span>{{description}}</span>
</div>

4
course/format/templates/local/content/movecmsection.mustache
View file

@ -74,11 +74,11 @@
>
<span class="collapsed-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
{{#pix}} t/collapsedchevron, core {{/pix}}
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
</span>
<span class="expanded-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}}
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
</span>
</a>
<a href="#"

2
course/format/templates/local/content/section/bulkselect.mustache
View file

@ -33,7 +33,7 @@
data-action="toggleSelectionSection"
data-bulkcheckbox="1"
>
<label class="sr-only" for="sectionCheckbox{{id}}">
<label class="visually-hidden" for="sectionCheckbox{{id}}">
{{#selecttext}} {{selecttext}} {{/selecttext}}
{{^selecttext}}
{{#str}} selectsection, core_courseformat, {{name}}{{/str}}

2
course/format/templates/local/content/section/content.mustache
View file

@ -151,7 +151,7 @@
<span class="dir-ltr-hide">
{{#pix}}t/left, moodle, {{#str}}gotosection, course, {{name}}{{/str}}{{/pix}}
</span>
<span class="sr-only">
<span class="visually-hidden">
{{#str}}gotosection, course, {{name}}{{/str}}
</span>
</a>

4
course/format/templates/local/content/section/header.mustache
View file

@ -64,12 +64,12 @@
aria-label="{{name}}">
<span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, core {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}}
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
</span>
<span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, core {{/str}}">
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
</span>
</a>
<h{{headinglevel}} class="h4 sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"

4
course/format/templates/local/courseindex/section.mustache
View file

@ -83,12 +83,12 @@
title="{{#str}} expand, core {{/str}}">
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
</span>
<span class="expanded-icon icon-no-margin me-1"
title="{{#str}} collapse, core {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}}
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
</span>
</a>
<a href="{{{sectionurl}}}"

4
course/templates/activity_list.mustache
View file

@ -25,7 +25,7 @@
<form class="row">
<div class="input-group pt-4 pb-1 col-md-6">
<label for="search">
<span class="sr-only">{{#str}} searchactivitiesbyname, course {{/str}}</span>
<span class="visually-hidden">{{#str}} searchactivitiesbyname, course {{/str}}</span>
</label>
<input type="text" name="search" id="search" class="form-control rounded-start" autocomplete="off"
placeholder="{{#str}}search, core {{/str}}" {{#query}} value="{{query}}" autofocus {{/query}}
@ -33,7 +33,7 @@
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary rounded-end">
<i class="icon fa fa-search fa-fw m-0" aria-hidden="true"></i>
<span class="sr-only">{{#str}}submitsearch, course {{/str}}</span>
<span class="visually-hidden">{{#str}}submitsearch, course {{/str}}</span>
</button>
</div>
</div>

2
course/templates/completion_action_bar.mustache
View file

@ -38,7 +38,7 @@
"labelattributes":[
{
"name":"class",
"value":"sr-only"
"value":"visually-hidden"
}
]
}

6
course/templates/coursecard.mustache
View file

@ -39,7 +39,7 @@
data-course-id="{{{id}}}">
<a href="{{viewurl}}" tabindex="-1">
<div class="card-img-top" style='background-image: url("{{{courseimage}}}");'>
<span class="sr-only">{{fullname}}</span>
<span class="visually-hidden">{{fullname}}</span>
</div>
</a>
<div class="card-body pe-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
@ -47,7 +47,7 @@
<div class="w-100 text-truncate">
{{#showshortname}}
<div class="text-muted muted d-flex mb-1 flex-wrap">
<span class="sr-only">
<span class="visually-hidden">
{{#str}}aria:courseshortname, core_course{{/str}}
</span>
<div>
@ -57,7 +57,7 @@
{{/showshortname}}
<a href="{{viewurl}}" class="aalink coursename me-2 mb-1">
{{> core_course/favouriteicon }}
<span class="sr-only">
<span class="visually-hidden">
{{#str}}aria:coursename, core_course{{/str}}
</span>
{{$coursename}}{{/coursename}}

4
course/templates/defaultactivitycompletion.mustache
View file

@ -61,12 +61,12 @@
title="{{#str}} expandcategory, core, {{formattedname}} {{/str}}">
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
<span class="sr-only">{{#str}} expandcategory, core, {{formattedname}} {{/str}}</span>
<span class="visually-hidden">{{#str}} expandcategory, core, {{formattedname}} {{/str}}</span>
</span>
<span class="expanded-icon icon-no-margin me-1"
title="{{#str}} collapsecategory, core, {{formattedname}} {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}}
<span class="sr-only">{{#str}} collapsecategory, core, {{formatedname}} {{/str}}</span>
<span class="visually-hidden">{{#str}} collapsecategory, core, {{formatedname}} {{/str}}</span>
</span>
<img class="activityicon ms-4" src="{{icon}}" alt="" aria-hidden="true">
<h2 class="activityname ms-3 mb-0">{{{formattedname}}}</h2>

2
course/templates/favouriteicon.mustache
View file

@ -35,6 +35,6 @@
aria-hidden="{{^isfavourite}}true{{/isfavourite}}{{#isfavourite}}false{{/isfavourite}}"
>
{{#pix}} i/star, core, {{#str}} favourite, core_course {{/str}} {{/pix}}
<span class="sr-only">{{#str}} aria:favourite, core_course {{/str}}</span>
<span class="visually-hidden">{{#str}} aria:favourite, core_course {{/str}}</span>
</span>
</span>

2
course/templates/local/activitychooser/item.mustache
View file

@ -67,7 +67,7 @@
{{/legacyitem}}
<button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction" data-action="show-option-summary" tabindex="-1">
<span aria-hidden="true">{{#pix}} docs, core {{/pix}}</span>
<span class="sr-only">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
<span class="visually-hidden">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
</button>
</div>
</div>

2
course/templates/participants_actionbar.mustache
View file

@ -91,7 +91,7 @@
"labelattributes":[
{
"name":"class",
"value":"sr-only"
"value":"visually-hidden"
}
]
},

2
course/templates/view-cards.mustache
View file

@ -40,7 +40,7 @@
{{$coursename}} {{{fullname}}} {{/coursename}}
{{$coursecategory}}
{{#showcoursecategory}}
<span class="sr-only">
<span class="visually-hidden">
{{#str}}aria:coursecategory, core_course{{/str}}
</span>
<div class="text-truncate">{{{coursecategory}}}</div>