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

2
admin/classes/table/plugin_management_table.php
View file

@ -322,7 +322,7 @@ abstract class plugin_management_table extends flexible_table implements dynamic
], ],
'title' => $labelstr, 'title' => $labelstr,
'label' => $labelstr, 'label' => $labelstr,
'labelclasses' => 'sr-only', 'labelclasses' => 'visually-hidden',
]; ];
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params); return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);

4
admin/templates/header_search_input.mustache
View file

@ -29,7 +29,7 @@
<form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center simplesearchform"> <form autocomplete="off" action="{{action}}" method="get" accept-charset="utf-8" class="mform d-flex flex-wrap align-items-center simplesearchform">
<div class="input-group"> <div class="input-group">
<label for="searchinput-{{uniqid}}"> <label for="searchinput-{{uniqid}}">
<span class="sr-only">{{#str}} search, core {{/str}}</span> <span class="visually-hidden">{{#str}} search, core {{/str}}</span>
</label> </label>
<input type="text" <input type="text"
id="searchinput-{{uniqid}}" id="searchinput-{{uniqid}}"
@ -44,7 +44,7 @@
<div class="input-group-append"> <div class="input-group-append">
<button type="submit" class="btn btn-primary search-icon"> <button type="submit" class="btn btn-primary search-icon">
{{#pix}} a/search, core {{/pix}} {{#pix}} a/search, core {{/pix}}
<span class="sr-only">{{#str}} search, core {{/str}}</span> <span class="visually-hidden">{{#str}} search, core {{/str}}</span>
</button> </button>
</div> </div>
</div> </div>

2
admin/templates/setting_configduration.mustache
View file

@ -41,7 +41,7 @@
<div class="form-duration defaultsnext"> <div class="form-duration defaultsnext">
<div class="d-flex flex-wrap align-items-center"> <div class="d-flex flex-wrap align-items-center">
<input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}> <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
<label class="sr-only" for="{{id}}u">{{#str}}durationunits, admin{{/str}}</label> <label class="visually-hidden" for="{{id}}u">{{#str}}durationunits, admin{{/str}}</label>
<select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}> <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>
{{#options}} {{#options}}
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option> <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>

2
admin/templates/setting_configfilesize.mustache
View file

@ -41,7 +41,7 @@
<div class="form-filesize defaultsnext"> <div class="form-filesize defaultsnext">
<div class="d-flex flex-wrap align-items-center"> <div class="d-flex flex-wrap align-items-center">
<input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}> <input type="text" size="5" id="{{id}}v" name="{{name}}[v]" value="{{value}}" class="form-control text-ltr" {{#readonly}}disabled{{/readonly}}>
<label class="sr-only" for="{{id}}u">{{#str}}filesizeunits, admin{{/str}}</label> <label class="visually-hidden" for="{{id}}u">{{#str}}filesizeunits, admin{{/str}}</label>
<select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}> <select id="{{id}}u" name="{{name}}[u]" class="form-control custom-select" {{#readonly}}disabled{{/readonly}}>
{{#options}} {{#options}}
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option> <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>

4
admin/templates/setting_configtime.mustache
View file

@ -46,13 +46,13 @@
}} }}
<div class="form-time defaultsnext"> <div class="form-time defaultsnext">
<div class="d-flex flex-wrap align-items-center text-ltr"> <div class="d-flex flex-wrap align-items-center text-ltr">
<label class="sr-only" for="{{id}}h">{{#str}}hours{{/str}}</label> <label class="visually-hidden" for="{{id}}h">{{#str}}hours{{/str}}</label>
<select id="{{id}}h" name="{{name}}[h]" class="custom-select" {{#readonly}}disabled{{/readonly}}> <select id="{{id}}h" name="{{name}}[h]" class="custom-select" {{#readonly}}disabled{{/readonly}}>
{{#hours}} {{#hours}}
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option> <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
{{/hours}} {{/hours}}
</select>: </select>:
<label class="sr-only" for="{{id}}m">{{#str}}minutes{{/str}}</label> <label class="visually-hidden" for="{{id}}m">{{#str}}minutes{{/str}}</label>
<select id="{{id}}m" name="{{name}}[m]" class="custom-select" {{#readonly}}disabled{{/readonly}}> <select id="{{id}}m" name="{{name}}[m]" class="custom-select" {{#readonly}}disabled{{/readonly}}>
{{#minutes}} {{#minutes}}
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option> <option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>

4
admin/templates/setting_configtoggle.mustache
View file

@ -29,7 +29,7 @@
* state - state of the toggle * state - state of the toggle
* title - title of the toggle tooltip * title - title of the toggle tooltip
* label - label of the toggle * label - label of the toggle
* labelclasses - classes for the label (sr-only for screen readers) * labelclasses - classes for the label (visually-hidden for screen readers)
Example context (json): Example context (json):
{ {
@ -44,7 +44,7 @@
}], }],
"title": "Title example", "title": "Title example",
"label": "Enable/disable reality", "label": "Enable/disable reality",
"labelclasses": "sr-only" "labelclasses": "visually-hidden"
} }
}} }}
<div id="container-{{id}}" <div id="container-{{id}}"

8
admin/templates/themeselector/theme_card.mustache
View file

@ -52,7 +52,7 @@
data-choose="{{choose}}" data-choose="{{choose}}"
data-sesskey="{{sesskey}}"> data-sesskey="{{sesskey}}">
<i class="icon fa fa-info-circle m-0" aria-hidden="true"></i> <i class="icon fa fa-info-circle m-0" aria-hidden="true"></i>
<span class="sr-only">{{#str}}previewthemename, moodle, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}previewthemename, moodle, {{name}}{{/str}}</span>
</button> </button>
{{#reporturl}} {{#reporturl}}
<a <a
@ -61,7 +61,7 @@
class="btn btn-link p-0 ms-2" class="btn btn-link p-0 ms-2"
title="{{#str}}themeusagereportname, admin, {{name}}{{/str}}"> title="{{#str}}themeusagereportname, admin, {{name}}{{/str}}">
<i class="icon fa fa-area-chart m-0" aria-hidden="true"></i> <i class="icon fa fa-area-chart m-0" aria-hidden="true"></i>
<span class="sr-only">{{#str}}themeusagereportname, admin, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}themeusagereportname, admin, {{name}}{{/str}}</span>
</a> </a>
{{/reporturl}} {{/reporturl}}
{{#settingsurl}} {{#settingsurl}}
@ -71,7 +71,7 @@
class="btn btn-link p-0 ms-2" class="btn btn-link p-0 ms-2"
title="{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}"> title="{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}">
<i class="icon fa fa-cog m-0" aria-hidden="true"></i> <i class="icon fa fa-cog m-0" aria-hidden="true"></i>
<span class="sr-only">{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}</span>
</a> </a>
{{/settingsurl}} {{/settingsurl}}
</div> </div>
@ -91,7 +91,7 @@
<input type="hidden" name="choose" value="{{choose}}"> <input type="hidden" name="choose" value="{{choose}}">
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
<span aria-hidden="true">{{#str}}selecttheme, moodle{{/str}}</span> <span aria-hidden="true">{{#str}}selecttheme, moodle{{/str}}</span>
<span class="sr-only">{{#str}}selectthemename, moodle, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}selectthemename, moodle, {{name}}{{/str}}</span>
</button> </button>
</form> </form>
{{/actionurl}} {{/actionurl}}

2
admin/tool/componentlibrary/content/bootstrap/components/badge.md
View file

@ -34,7 +34,7 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}} {{< example >}}
<button type="button" class="btn btn-primary"> <button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span> Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span> <span class="visually-hidden">unread messages</span>
</button> </button>
{{< /example >}} {{< /example >}}

24
admin/tool/componentlibrary/content/bootstrap/components/carousel.md
View file

@ -65,11 +65,11 @@ Adding in the previous and next controls. We recommend using `<button>` elements
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -98,11 +98,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -143,11 +143,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -171,11 +171,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -199,11 +199,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}
@ -227,11 +227,11 @@ Carousels support swiping left/right on touchscreen devices to move between slid
</div> </div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev"> <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next"> <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>
{{< /example >}} {{< /example >}}

36
admin/tool/componentlibrary/content/bootstrap/components/dropdowns.md
View file

@ -150,7 +150,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -163,7 +163,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -176,7 +176,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -189,7 +189,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -202,7 +202,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -215,7 +215,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -232,7 +232,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -264,7 +264,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button> <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -291,7 +291,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Large split button Large split button
</button> </button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
... ...
@ -315,7 +315,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button> <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -342,7 +342,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Small split button Small split button
</button> </button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
... ...
@ -374,7 +374,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup Split dropup
</button> </button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -403,7 +403,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup Split dropup
</button> </button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
@ -433,7 +433,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright Split dropright
</button> </button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span> <span class="visually-hidden">Toggle Dropright</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -462,7 +462,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright Split dropright
</button> </button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span> <span class="visually-hidden">Toggle Dropright</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
@ -490,7 +490,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group"> <div class="btn-group">
<div class="btn-group dropleft"> <div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span> <span class="visually-hidden">Toggle Dropleft</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -521,7 +521,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group"> <div class="btn-group">
<div class="btn-group dropleft"> <div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span> <span class="visually-hidden">Toggle Dropleft</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
@ -757,7 +757,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button> <button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>

22
admin/tool/componentlibrary/content/bootstrap/components/forms.md
View file

@ -137,11 +137,11 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
{{< example >}} {{< example >}}
<form class="form-inline"> <form class="form-inline">
<div class="form-group mb-2"> <div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label> <label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com"> <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div> </div>
<div class="form-group mx-sm-3 mb-2"> <div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label> <label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password"> <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div> </div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button> <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
@ -478,11 +478,11 @@ The example below uses a flexbox utility to vertically center the contents and c
<form> <form>
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-auto"> <div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label> <label class="visually-hidden" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"> <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div> </div>
<div class="col-auto"> <div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label> <label class="visually-hidden" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2"> <div class="input-group mb-2">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text">@</div> <div class="input-group-text">@</div>
@ -511,11 +511,11 @@ You can then remix that once again with size-specific column classes.
<form> <form>
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-sm-3 my-1"> <div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label> <label class="visually-hidden" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe"> <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div> </div>
<div class="col-sm-3 my-1"> <div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label> <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text">@</div> <div class="input-group-text">@</div>
@ -544,7 +544,7 @@ And of course [custom form controls](#custom-forms) are supported.
<form> <form>
<div class="form-row align-items-center"> <div class="form-row align-items-center">
<div class="col-auto my-1"> <div class="col-auto my-1">
<label class="me-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label> <label class="me-sm-2 visually-hidden" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select me-sm-2" id="inlineFormCustomSelect"> <select class="custom-select me-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option> <option selected>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
@ -573,14 +573,14 @@ Use the `.form-inline` class to display a series of labels, form controls, and b
- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`. - Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices. - Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices.
You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`. You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.visually-hidden`.
{{< example >}} {{< example >}}
<form class="form-inline"> <form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label> <label class="visually-hidden" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 me-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"> <input type="text" class="form-control mb-2 me-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> <label class="visually-hidden" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 me-sm-2"> <div class="input-group mb-2 me-sm-2">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text">@</div> <div class="input-group-text">@</div>
@ -622,7 +622,7 @@ Custom form controls and selects are also supported.
{{< callout warning >}} {{< callout warning >}}
##### Alternatives to hidden labels ##### Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.visually-hidden` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
{{< /callout >}} {{< /callout >}}
## Help text ## Help text

8
admin/tool/componentlibrary/content/bootstrap/components/input-group.md
View file

@ -226,7 +226,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<div class="input-group-prepend"> <div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -244,7 +244,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<div class="input-group-append"> <div class="input-group-append">
<button type="button" class="btn btn-outline-secondary">Action</button> <button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
@ -367,11 +367,11 @@ Ensure that all form controls have an appropriate accessible name so that their
For situations where it's not possible to include a visible `<label>` or appropriate text content, there are alternative ways of still providing an accessible name, such as: For situations where it's not possible to include a visible `<label>` or appropriate text content, there are alternative ways of still providing an accessible name, such as:
- `<label>` elements hidden using the `.sr-only` class - `<label>` elements hidden using the `.visually-hidden` class
- Pointing to an existing element that can act as a label using `aria-labelledby` - Pointing to an existing element that can act as a label using `aria-labelledby`
- Providing a `title` attribute - Providing a `title` attribute
- Explicitly setting the accessible name on an element using `aria-label` - Explicitly setting the accessible name on an element using `aria-label`
If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches. If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
While using visually hidden content (`.sr-only`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability. While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

24
admin/tool/componentlibrary/content/bootstrap/components/navbar.md
View file

@ -44,7 +44,7 @@ Here's an example of all the sub-components included in a responsive light-theme
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
@ -126,7 +126,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -152,7 +152,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link active" href="#">Home <span class="visually-hidden">(current)</span></a>
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a> <a class="nav-link disabled">Disabled</a>
@ -172,7 +172,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -269,7 +269,7 @@ Mix and match with other components and utilities as needed.
<div class="collapse navbar-collapse" id="navbarText"> <div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -298,7 +298,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<div class="collapse navbar-collapse" id="navbarColor01"> <div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -325,7 +325,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<div class="collapse navbar-collapse" id="navbarColor02"> <div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -352,7 +352,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
<div class="collapse navbar-collapse" id="navbarColor03"> <div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
@ -455,7 +455,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
<div class="collapse navbar-collapse" id="navbarScroll"> <div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;"> <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
@ -504,7 +504,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
<a class="navbar-brand" href="#">Hidden brand</a> <a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mt-2 mt-lg-0"> <ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
@ -533,7 +533,7 @@ With a brand name shown on the left and toggler on the right:
<div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mt-2 mt-lg-0"> <ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
@ -562,7 +562,7 @@ With a toggler on the left and brand name on the right:
<div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mt-2 mt-lg-0"> <ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>

30
admin/tool/componentlibrary/content/bootstrap/components/spinners.md
View file

@ -10,7 +10,7 @@ toc: true
Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes. Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="sr-only">Loading...</span>`. For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
{{< callout info >}} {{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}} {{< partial "callout-info-prefersreducedmotion.md" >}}
@ -22,7 +22,7 @@ Use the border spinners for a lightweight loading indicator.
{{< example >}} {{< example >}}
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{< /example >}} {{< /example >}}
@ -34,7 +34,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
{{< spinner.inline >}} {{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-border text-{{ .name }}" role="status"> <div class="spinner-border text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{- end -}} {{- end -}}
{{< /spinner.inline >}} {{< /spinner.inline >}}
@ -50,7 +50,7 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
{{< example >}} {{< example >}}
<div class="spinner-grow" role="status"> <div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{< /example >}} {{< /example >}}
@ -60,7 +60,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
{{< spinner.inline >}} {{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }} {{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-grow text-{{ .name }}" role="status"> <div class="spinner-grow text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{- end -}} {{- end -}}
{{< /spinner.inline >}} {{< /spinner.inline >}}
@ -76,7 +76,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
{{< example >}} {{< example >}}
<div class="spinner-border m-5" role="status"> <div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{< /example >}} {{< /example >}}
@ -89,7 +89,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}} {{< example >}}
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -106,7 +106,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}} {{< example >}}
<div class="clearfix"> <div class="clearfix">
<div class="spinner-border float-end" role="status"> <div class="spinner-border float-end" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -116,7 +116,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}} {{< example >}}
<div class="text-center"> <div class="text-center">
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -127,10 +127,10 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
{{< example >}} {{< example >}}
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow spinner-grow-sm" role="status"> <div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{< /example >}} {{< /example >}}
@ -138,10 +138,10 @@ Or, use custom CSS or inline styles to change the dimensions as needed.
{{< example >}} {{< example >}}
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"> <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
{{< /example >}} {{< /example >}}
@ -152,7 +152,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}} {{< example >}}
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</button> </button>
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@ -163,7 +163,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}} {{< example >}}
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</button> </button>
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>

4
admin/tool/componentlibrary/content/moodle/components/toggle.md
View file

@ -26,7 +26,7 @@ The parameters for the template context are:
## Examples ## Examples
<div class="small"> <div class="small">
Checked toggle and with "sr-only" label. Checked toggle and with "visually-hidden" label.
</div> </div>
{{< mustache template="core/toggle" >}} {{< mustache template="core/toggle" >}}
{ {
@ -38,7 +38,7 @@ Checked toggle and with "sr-only" label.
}], }],
"title": "Toggle Enabled", "title": "Toggle Enabled",
"label": "Enable/disable status", "label": "Enable/disable status",
"labelclasses": "sr-only" "labelclasses": "visually-hidden"
} }
{{< /mustache >}} {{< /mustache >}}

4
admin/tool/componentlibrary/content/moodle/themes/text.md
View file

@ -58,8 +58,8 @@ tip: you can use heading classes to style a native heading tag differently.
## For screenreaders ## For screenreaders
<h2 class="sr-only">Title for screen readers</h2> <h2 class="visually-hidden">Title for screen readers</h2>
<a class="sr-only-focusable" href="#content">Skip to main content</a> <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
## Text truncation ## Text truncation

2
admin/tool/componentlibrary/hugo/site/layouts/_default/docs.html
View file

@ -9,7 +9,7 @@
class="mform d-flex flex-wrap align-items-center simplesearchform p-2 justify-content-center"> class="mform d-flex flex-wrap align-items-center simplesearchform p-2 justify-content-center">
<div class="input-group w-100" data-region="docsearch"> <div class="input-group w-100" data-region="docsearch">
<label for="searchinput-componentlibrary"> <label for="searchinput-componentlibrary">
<span class="sr-only">Search component library</span> <span class="visually-hidden">Search component library</span>
</label> </label>
<input type="text" id="searchinput-componentlibrary" class="form-control rounded" placeholder="Search" <input type="text" id="searchinput-componentlibrary" class="form-control rounded" placeholder="Search"
aria-label="Search component library" name="clsearch" data-region="input" autocomplete="off"> aria-label="Search component library" name="clsearch" data-region="input" autocomplete="off">

2
admin/tool/componentlibrary/hugo/site/layouts/partials/callout-warning-color-assistive-technologies.md
View file

@ -1,3 +1,3 @@
##### Conveying meaning to assistive technologies ##### Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

2
admin/tool/componentlibrary/hugo/site/layouts/partials/skippy.html
View file

@ -1,3 +1,3 @@
<a class="skippy sr-only" href="#content"> <a class="skippy visually-hidden" href="#content">
<span class="skippy-text">Skip to main content</span> <span class="skippy-text">Skip to main content</span>
</a> </a>

2
admin/tool/componentlibrary/hugo/site/layouts/shortcodes/mustache.html
View file

@ -41,7 +41,7 @@
<div data-region="mustacherendered" class="{{ with .Get "class" }}{{ . }}{{ end }}"> <div data-region="mustacherendered" class="{{ with .Get "class" }}{{ . }}{{ end }}">
<div class="d-flex justify-content-center my-5"> <div class="d-flex justify-content-center my-5">
<div class="spinner-grow text-secondary" role="status"> <div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
</div> </div>

2
admin/tool/componentlibrary/templates/examples/toggle/example.mustache
View file

@ -36,6 +36,6 @@
disabled disabled
{{/attributes}} {{/attributes}}
{{$label}}Enable/disable status{{/label}} {{$label}}Enable/disable status{{/label}}
{{$labelclasses}}sr-only{{/labelclasses}} {{$labelclasses}}visually-hidden{{/labelclasses}}
{{/ core/toggle }} {{/ core/toggle }}
</div> </div>

2
admin/tool/customlang/templates/translator.mustache
View file

@ -129,7 +129,7 @@
<strong>{{#str}}headinglocal, tool_customlang{{/str}}</strong> <strong>{{#str}}headinglocal, tool_customlang{{/str}}</strong>
</div> </div>
<div class="py-2 py-md-0 px-md-3"> <div class="py-2 py-md-0 px-md-3">
<label for="{{id}}" class="sr-only sr-only-focusable">{{{ component }}}/{{{ stringid }}}</label> <label for="{{id}}" class="visually-hidden visually-hidden-focusable">{{{ component }}}/{{{ stringid }}}</label>
<textarea class="form-control w-100 border-box" id="{{id}}" name="cust[{{id}}]" cols="40" rows="3">{{{ local }}}</textarea> <textarea class="form-control w-100 border-box" id="{{id}}" name="cust[{{id}}]" cols="40" rows="3">{{{ local }}}</textarea>
{{#checkupdated}} {{#checkupdated}}
<div class="uptodatewrapper"> <div class="uptodatewrapper">

2
admin/tool/dataprivacy/templates/request_filter.mustache
View file

@ -52,7 +52,7 @@
} }
}} }}
<form method="post" action="{{action}}" class="mb-1" role="search" id="request_filter_form"> <form method="post" action="{{action}}" class="mb-1" role="search" id="request_filter_form">
<label for="request-filters" class="sr-only">{{#str}}filters{{/str}}</label> <label for="request-filters" class="visually-hidden">{{#str}}filters{{/str}}</label>
<select name="request-filters[]" id="request-filters" multiple="multiple" class="form-autocomplete-original-select"> <select name="request-filters[]" id="request-filters" multiple="multiple" class="form-autocomplete-original-select">
{{#filteroptions}} {{#filteroptions}}
<option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option> <option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option>

4
admin/tool/moodlenet/templates/select_page.mustache
View file

@ -32,7 +32,7 @@
<h3>{{#str}} selectacourse {{/str}}</h3> <h3>{{#str}} selectacourse {{/str}}</h3>
<div class="searchbar input-group w-50" role="search"> <div class="searchbar input-group w-50" role="search">
<label for="searchinput"> <label for="searchinput">
<span class="sr-only">{{#str}} searchcourses, tool_moodlenet {{/str}}</span> <span class="visually-hidden">{{#str}} searchcourses, tool_moodlenet {{/str}}</span>
</label> </label>
<input type="text" <input type="text"
data-region="search-input" data-region="search-input"
@ -49,7 +49,7 @@
<div class="clear d-none"> <div class="clear d-none">
<button class="btn p-0" data-region="clear-icon"> <button class="btn p-0" data-region="clear-icon">
<span class="d-flex" aria-hidden="true">{{#pix}} e/cancel, core {{/pix}}</span> <span class="d-flex" aria-hidden="true">{{#pix}} e/cancel, core {{/pix}}</span>
<span class="sr-only">{{#str}} clearsearch, tool_moodlenet {{/str}}</span> <span class="visually-hidden">{{#str}} clearsearch, tool_moodlenet {{/str}}</span>
</button> </button>
</div> </div>
</div> </div>

2
admin/tool/moodlenet/templates/view-cards.mustache
View file

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

2
admin/tool/policy/templates/acceptances_filter.mustache
View file

@ -52,7 +52,7 @@
} }
}} }}
<form method="post" action="{{action}}" class="mb-1" role="search"> <form method="post" action="{{action}}" class="mb-1" role="search">
<label for="unified-filters" class="sr-only">{{#str}}filters , tool_policy{{/str}}</label> <label for="unified-filters" class="visually-hidden">{{#str}}filters , tool_policy{{/str}}</label>
<select name="unified-filters[]" id="unified-filters" multiple="multiple" data-originaloptionsjson="{{originaloptionsjson}}" class="form-autocomplete-original-select"> <select name="unified-filters[]" id="unified-filters" multiple="multiple" data-originaloptionsjson="{{originaloptionsjson}}" class="form-autocomplete-original-select">
{{#filteroptions}} {{#filteroptions}}
<option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option> <option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option>

2
ai/classes/table/aiplacement_action_management_table.php
View file

@ -170,7 +170,7 @@ class aiplacement_action_management_table extends flexible_table implements dyna
], ],
'title' => $labelstr, 'title' => $labelstr,
'label' => $labelstr, 'label' => $labelstr,
'labelclasses' => 'sr-only', 'labelclasses' => 'visually-hidden',
]; ];
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params); return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);

2
ai/classes/table/aiprovider_action_management_table.php
View file

@ -162,7 +162,7 @@ class aiprovider_action_management_table extends flexible_table implements dynam
], ],
'title' => $labelstr, 'title' => $labelstr,
'label' => $labelstr, 'label' => $labelstr,
'labelclasses' => 'sr-only', 'labelclasses' => 'visually-hidden',
]; ];
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params); return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);

2
ai/placement/courseassist/templates/drawer.mustache
View file

@ -35,7 +35,7 @@
<div class="ai-drawer-header"> <div class="ai-drawer-header">
<button id="ai-drawer-close" class="btn ai-drawer-button" type="button" data-action="course-summarise"> <button id="ai-drawer-close" class="btn ai-drawer-button" type="button" data-action="course-summarise">
{{#pix}} e/cancel, core {{/pix}} {{#pix}} e/cancel, core {{/pix}}
<span class="sr-only">{{#str}} closedrawer, core {{/str}}</span> <span class="visually-hidden">{{#str}} closedrawer, core {{/str}}</span>
</button> </button>
</div> </div>
<div class="ai-drawer-body" data-hasdata="0" data-cancelled="0"> <div class="ai-drawer-body" data-hasdata="0" data-cancelled="0">

2
backup/util/helper/backup_helper.class.php
View file

@ -412,7 +412,7 @@ abstract class backup_helper {
} }
$selectmenu = new \core\output\select_menu('coursereusetype', $menuarray, $activeurl); $selectmenu = new \core\output\select_menu('coursereusetype', $menuarray, $activeurl);
$selectmenu->set_label(get_string('coursereusenavigationmenu'), ['class' => 'sr-only']); $selectmenu->set_label(get_string('coursereusenavigationmenu'), ['class' => 'visually-hidden']);
$options = \html_writer::tag( $options = \html_writer::tag(
'div', 'div',
$OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)), $OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)),

10
blocks/myoverview/templates/course-action-menu.mustache
View file

@ -31,7 +31,7 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false"> aria-expanded="false">
<i class="icon fa fa-ellipsis-v fa-fw m-0" title="{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}" aria-hidden="true"></i> <i class="icon fa fa-ellipsis-v fa-fw m-0" title="{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}" aria-hidden="true"></i>
<span class="sr-only">{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}</span> <span class="visually-hidden">{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}</span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#" <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
@ -40,7 +40,7 @@
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}" aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
> >
{{#str}} addtofavourites, block_myoverview {{/str}} {{#str}} addtofavourites, block_myoverview {{/str}}
<div class="sr-only"> <div class="visually-hidden">
{{#str}} aria:addtofavourites, block_myoverview {{/str}} {{{fullname}}} {{#str}} aria:addtofavourites, block_myoverview {{/str}} {{{fullname}}}
</div> </div>
</a> </a>
@ -50,7 +50,7 @@
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}" aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
> >
{{#str}} removefromfavourites, block_myoverview {{/str}} {{#str}} removefromfavourites, block_myoverview {{/str}}
<div class="sr-only"> <div class="visually-hidden">
{{#str}} aria:removefromfavourites, block_myoverview {{/str}} {{{fullname}}} {{#str}} aria:removefromfavourites, block_myoverview {{/str}} {{{fullname}}}
</div> </div>
</a> </a>
@ -60,7 +60,7 @@
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}" aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
> >
{{#str}} show, block_myoverview {{/str}} {{#str}} show, block_myoverview {{/str}}
<div class="sr-only"> <div class="visually-hidden">
{{#str}} aria:showcourse, block_myoverview, {{fullname}} {{/str}} {{#str}} aria:showcourse, block_myoverview, {{fullname}} {{/str}}
</div> </div>
</a> </a>
@ -70,7 +70,7 @@
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}" aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
> >
{{#str}} hidecourse, block_myoverview {{/str}} {{#str}} hidecourse, block_myoverview {{/str}}
<div class="sr-only"> <div class="visually-hidden">
{{#str}} aria:hidecourse, block_myoverview, {{fullname}} {{/str}} {{#str}} aria:hidecourse, block_myoverview, {{fullname}} {{/str}}
</div> </div>
</a> </a>

2
blocks/myoverview/templates/progress-bar.mustache
View file

@ -25,6 +25,6 @@
} }
}} }}
<div class="progress-text"> <div class="progress-text">
<span class="sr-only">{{#str}}aria:courseprogress, block_myoverview{{/str}}</span> <span class="visually-hidden">{{#str}}aria:courseprogress, block_myoverview{{/str}}</span>
{{#str}}completepercent, block_myoverview, <span>{{progress}}</span>{{/str}} {{#str}}completepercent, block_myoverview, <span>{{progress}}</span>{{/str}}
</div> </div>

4
blocks/myoverview/templates/view-cards.mustache
View file

@ -51,7 +51,7 @@
{{/progress}} {{/progress}}
{{$coursename}} {{$coursename}}
<span class="multiline" title="{{fullname}}"> <span class="multiline" title="{{fullname}}">
<span class="sr-only">{{{fullname}}}</span> <span class="visually-hidden">{{{fullname}}}</span>
<span aria-hidden="true"> <span aria-hidden="true">
{{#shortentext}}55, {{{fullname}}} {{/shortentext}} {{#shortentext}}55, {{{fullname}}} {{/shortentext}}
</span> </span>
@ -59,7 +59,7 @@
{{/coursename}} {{/coursename}}
{{$coursecategory}} {{$coursecategory}}
{{#showcoursecategory}} {{#showcoursecategory}}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:coursecategory, core_course{{/str}} {{#str}}aria:coursecategory, core_course{{/str}}
</span> </span>
<span class="categoryname text-truncate"> <span class="categoryname text-truncate">

8
blocks/myoverview/templates/view-list.mustache
View file

@ -45,7 +45,7 @@
<div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0"> <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
<a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100"> <a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100">
<div class="rounded list-image mw-100" style='background-image: url("{{{courseimage}}}");'> <div class="rounded list-image mw-100" style='background-image: url("{{{courseimage}}}");'>
<span class="sr-only">{{fullname}}</span> <span class="visually-hidden">{{fullname}}</span>
</div> </div>
</a> </a>
</div> </div>
@ -55,7 +55,7 @@
{{#showcoursecategory}} {{#showcoursecategory}}
<div class="px-1">|</div> <div class="px-1">|</div>
{{/showcoursecategory}} {{/showcoursecategory}}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:courseshortname, core_course{{/str}} {{#str}}aria:courseshortname, core_course{{/str}}
</span> </span>
<div>{{{shortname}}}</div> <div>{{{shortname}}}</div>
@ -63,14 +63,14 @@
{{/showshortname}} {{/showshortname}}
<a href="{{viewurl}}" class="aalink coursename"> <a href="{{viewurl}}" class="aalink coursename">
{{> core_course/favouriteicon }} {{> core_course/favouriteicon }}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:coursename, core_course{{/str}} {{#str}}aria:coursename, core_course{{/str}}
</span> </span>
{{{fullname}}} {{{fullname}}}
</a> </a>
{{#showcoursecategory}} {{#showcoursecategory}}
<div class="text-muted muted d-flex flex-wrap"> <div class="text-muted muted d-flex flex-wrap">
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:coursecategory, core_course{{/str}} {{#str}}aria:coursecategory, core_course{{/str}}
</span> </span>
<span class="categoryname"> <span class="categoryname">

10
blocks/myoverview/templates/view-summary.mustache
View file

@ -45,7 +45,7 @@
<div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0"> <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
<a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100"> <a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100">
<div class="summary-image rounded mw-100" style='background-image: url("{{{courseimage}}}");'> <div class="summary-image rounded mw-100" style='background-image: url("{{{courseimage}}}");'>
<span class="sr-only">{{fullname}}</span> <span class="visually-hidden">{{fullname}}</span>
</div> </div>
</a> </a>
</div> </div>
@ -55,7 +55,7 @@
{{#showcoursecategory}} {{#showcoursecategory}}
<div class="px-1">|</div> <div class="px-1">|</div>
{{/showcoursecategory}} {{/showcoursecategory}}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:courseshortname, core_course{{/str}} {{#str}}aria:courseshortname, core_course{{/str}}
</span> </span>
<div>{{{shortname}}}</div> <div>{{{shortname}}}</div>
@ -63,13 +63,13 @@
{{/showshortname}} {{/showshortname}}
<a href="{{viewurl}}" class="aalink coursename"> <a href="{{viewurl}}" class="aalink coursename">
{{> core_course/favouriteicon }} {{> core_course/favouriteicon }}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:coursename, core_course{{/str}} {{#str}}aria:coursename, core_course{{/str}}
</span> </span>
{{{fullname}}} {{{fullname}}}
</a> </a>
{{$coursecategory}} {{$coursecategory}}
<span class="sr-only"> <span class="visually-hidden">
{{#str}}aria:coursecategory, core_course{{/str}} {{#str}}aria:coursecategory, core_course{{/str}}
</span> </span>
{{#showcoursecategory}} {{#showcoursecategory}}
@ -86,7 +86,7 @@
</div> </div>
{{/visible}} {{/visible}}
<div class="summary"> <div class="summary">
<span class="sr-only">{{#str}}aria:coursesummary, block_myoverview{{/str}}</span> <span class="visually-hidden">{{#str}}aria:coursesummary, block_myoverview{{/str}}</span>
{{{summary}}} {{{summary}}}
</div> </div>
{{#hasprogress}} {{#hasprogress}}

2
blocks/recentlyaccessedcourses/templates/course-card.mustache
View file

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

2
calendar/renderer.php
View file

@ -255,7 +255,7 @@ class core_calendar_renderer extends plugin_renderer_base {
$labelattributes = []; $labelattributes = [];
if (empty($label)) { if (empty($label)) {
$label = get_string('listofcourses'); $label = get_string('listofcourses');
$labelattributes['class'] = 'sr-only'; $labelattributes['class'] = 'visually-hidden';
} }
$filterid = 'calendar-course-filter'; $filterid = 'calendar-course-filter';

2
calendar/templates/header.mustache
View file

@ -40,4 +40,4 @@
{{/filter_selector}} {{/filter_selector}}
{{> core_calendar/add_event_button}} {{> core_calendar/add_event_button}}
</div> </div>
<div aria-live="polite" class="sr-only calendar-announcements"></div> <div aria-live="polite" class="visually-hidden calendar-announcements"></div>

6
calendar/templates/month_detailed.mustache
View file

@ -47,7 +47,7 @@
<tr> <tr>
{{# daynames }} {{# daynames }}
<th class="header text-xs-center"> <th class="header text-xs-center">
<span class="sr-only">{{fullname}}</span> <span class="visually-hidden">{{fullname}}</span>
<span aria-hidden="true">{{shortname}}</span> <span aria-hidden="true">{{shortname}}</span>
</th> </th>
{{/ daynames }} {{/ daynames }}
@ -75,7 +75,7 @@
data-new-event-timestamp="{{neweventtimestamp}}"{{#istoday}} title="{{#str}} today, core_calendar {{/str}}"{{/istoday}} data-new-event-timestamp="{{neweventtimestamp}}"{{#istoday}} title="{{#str}} today, core_calendar {{/str}}"{{/istoday}}
{{#hasevents}} data-title="{{viewdaylinktitle}}"{{/hasevents}}> {{#hasevents}} data-title="{{viewdaylinktitle}}"{{/hasevents}}>
<div class="d-none d-md-block hidden-phone text-xs-center"> <div class="d-none d-md-block hidden-phone text-xs-center">
<span class="sr-only">{{daytitle}}</span> <span class="visually-hidden">{{daytitle}}</span>
{{#hasevents}} {{#hasevents}}
<a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}" <a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}" data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
@ -147,7 +147,7 @@
{{/hasevents}} {{/hasevents}}
</div> </div>
<div class="d-md-none hidden-desktop hidden-tablet"> <div class="d-md-none hidden-desktop hidden-tablet">
<span class="sr-only">{{daytitle}}</span> <span class="visually-hidden">{{daytitle}}</span>
{{#hasevents}} {{#hasevents}}
<a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}" <a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}"
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}" data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"

4
calendar/templates/month_mini.mustache
View file

@ -79,7 +79,7 @@
<tr> <tr>
{{# daynames }} {{# daynames }}
<th class="header text-xs-center"> <th class="header text-xs-center">
<span class="sr-only">{{fullname}}</span> <span class="visually-hidden">{{fullname}}</span>
<span aria-hidden="true">{{shortname}}</span> <span aria-hidden="true">{{shortname}}</span>
</th> </th>
{{/ daynames }} {{/ daynames }}
@ -129,7 +129,7 @@
This is the timestamp for this month. This is the timestamp for this month.
}} data-day-timestamp="{{timestamp}}"{{! }} data-day-timestamp="{{timestamp}}"{{!
}}>{{! }}>{{!
}}<span class="sr-only">{{daytitle}}</span> }}<span class="visually-hidden">{{daytitle}}</span>
{{#popovertitle}} {{#popovertitle}}
{{< core_calendar/minicalendar_day_link }} {{< core_calendar/minicalendar_day_link }}
{{$day}}{{mday}}{{/day}} {{$day}}{{mday}}{{/day}}

2
comment/lib.php
View file

@ -507,7 +507,7 @@ class comment {
$html .= html_writer::start_tag('div', array('class' => 'db')); $html .= html_writer::start_tag('div', array('class' => 'db'));
$html .= html_writer::tag('label', $html .= html_writer::tag('label',
get_string('comment', 'comment'), get_string('comment', 'comment'),
['for' => 'dlg-content-'.$this->cid, 'class' => 'sr-only']); ['for' => 'dlg-content-'.$this->cid, 'class' => 'visually-hidden']);
$html .= html_writer::tag('textarea', '', $textareaattrs); $html .= html_writer::tag('textarea', '', $textareaattrs);
$html .= html_writer::end_tag('div'); // .db $html .= html_writer::end_tag('div'); // .db

2
contentbank/classes/output/bankcontent.php
View file

@ -165,7 +165,7 @@ class bankcontent implements renderable, templatable {
$this->context->id, $this->context->id,
$strchoosecontext $strchoosecontext
); );
$singleselect->set_label($strchoosecontext, ['class' => 'sr-only']); $singleselect->set_label($strchoosecontext, ['class' => 'visually-hidden']);
$data->allowedcontexts = $singleselect->export_for_template($output); $data->allowedcontexts = $singleselect->export_for_template($output);
} }

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('float-start ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox me-1 '); $html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
$html .= html_writer::empty_tag('input', $bcatinput); $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( $html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label', 'class' => 'custom-control-label',
'for' => 'categorylistitem' . $category->id)); '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('float-start ' . $checkboxclass);
$html .= html_writer::start_div('custom-control custom-checkbox me-1 '); $html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
$html .= html_writer::empty_tag('input', $bulkcourseinput); $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( $html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label', 'class' => 'custom-control-label',
'for' => 'courselistitem' . $course->id)); 'for' => 'courselistitem' . $course->id));
@ -1205,7 +1205,7 @@ class core_course_management_renderer extends plugin_renderer_base {
if ($bulkcourseinput) { if ($bulkcourseinput) {
$html .= html_writer::start_div('custom-control custom-checkbox me-1'); $html .= html_writer::start_div('custom-control custom-checkbox me-1');
$html .= html_writer::empty_tag('input', $bulkcourseinput); $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( $html .= html_writer::tag('label', $labeltext, array(
'class' => 'custom-control-label', 'class' => 'custom-control-label',
'for' => 'coursesearchlistitem' . $course->id)); '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. // Render the activity list dropdown menu if available.
if (!empty($activitylist)) { if (!empty($activitylist)) {
$select = new url_select($activitylist, '', array('' => get_string('jumpto'))); $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'); $select->attributes = array('id' => 'jump-to-activity');
$this->activitylist = $select; $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]); $currenturl = new moodle_url($this->page->url, ['categoryid' => $this->category->id]);
$select = new \url_select($options, $currenturl, null); $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'; $select->class .= ' text-truncate w-100';
return $select->export_for_template($output); 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( $selectmenu->set_label(
get_string('coursecompletionnavigation', 'completion'), get_string('coursecompletionnavigation', 'completion'),
['class' => 'sr-only'] ['class' => 'visually-hidden']
); );
return [ 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) { if ($content) {
$urlselect = new \url_select($content, $activeurl, null); $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); return $urlselect->export_for_template($output);
} }
@ -117,7 +117,7 @@ class manage_categories_action_bar implements \renderable {
} }
$select = new \url_select($options, $currenturl); $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'; $select->class .= ' text-truncate w-100';
return $select->export_for_template($output); 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-action="toggleSelectionCm"
data-bulkcheckbox="1" data-bulkcheckbox="1"
> >
<label class="sr-only" for="cmCheckbox{{cmid}}"> <label class="visually-hidden" for="cmCheckbox{{cmid}}">
{{#str}} selectcm, core_courseformat, {{activityname}}{{/str}} {{#str}} selectcm, core_courseformat, {{activityname}}{{/str}}
</label> </label>
</div> </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 class="d-flex mt-2 text-success" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div> <div>
{{#pix}}i/checked{{/pix}} {{#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> </div>
<span>{{description}}</span> <span>{{description}}</span>
</div> </div>
@ -60,7 +60,7 @@
<div class="d-flex mt-2 text-danger" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}> <div class="d-flex mt-2 text-danger" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div> <div>
{{#pix}}e/cancel{{/pix}} {{#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> </div>
<span>{{description}}</span> <span>{{description}}</span>
</div> </div>
@ -69,7 +69,7 @@
<div class="d-flex mt-2" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}> <div class="d-flex mt-2" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
<div> <div>
{{#pix}}i/dot{{/pix}} {{#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> </div>
<span>{{description}}</span> <span>{{description}}</span>
</div> </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}}"> <span class="collapsed-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
{{#pix}} t/collapsedchevron, core {{/pix}} {{#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>
<span class="expanded-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}"> <span class="expanded-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}} {{#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>
</a> </a>
<a href="#" <a href="#"

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

@ -33,7 +33,7 @@
data-action="toggleSelectionSection" data-action="toggleSelectionSection"
data-bulkcheckbox="1" data-bulkcheckbox="1"
> >
<label class="sr-only" for="sectionCheckbox{{id}}"> <label class="visually-hidden" for="sectionCheckbox{{id}}">
{{#selecttext}} {{selecttext}} {{/selecttext}} {{#selecttext}} {{selecttext}} {{/selecttext}}
{{^selecttext}} {{^selecttext}}
{{#str}} selectsection, core_courseformat, {{name}}{{/str}} {{#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"> <span class="dir-ltr-hide">
{{#pix}}t/left, moodle, {{#str}}gotosection, course, {{name}}{{/str}}{{/pix}} {{#pix}}t/left, moodle, {{#str}}gotosection, course, {{name}}{{/str}}{{/pix}}
</span> </span>
<span class="sr-only"> <span class="visually-hidden">
{{#str}}gotosection, course, {{name}}{{/str}} {{#str}}gotosection, course, {{name}}{{/str}}
</span> </span>
</a> </a>

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

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

4
course/templates/activity_list.mustache
View file

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

2
course/templates/completion_action_bar.mustache
View file

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

6
course/templates/coursecard.mustache
View file

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

4
course/templates/defaultactivitycompletion.mustache
View file

@ -61,12 +61,12 @@
title="{{#str}} expandcategory, core, {{formattedname}} {{/str}}"> title="{{#str}} expandcategory, core, {{formattedname}} {{/str}}">
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span> <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="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>
<span class="expanded-icon icon-no-margin me-1" <span class="expanded-icon icon-no-margin me-1"
title="{{#str}} collapsecategory, core, {{formattedname}} {{/str}}"> title="{{#str}} collapsecategory, core, {{formattedname}} {{/str}}">
{{#pix}} t/expandedchevron, core {{/pix}} {{#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> </span>
<img class="activityicon ms-4" src="{{icon}}" alt="" aria-hidden="true"> <img class="activityicon ms-4" src="{{icon}}" alt="" aria-hidden="true">
<h2 class="activityname ms-3 mb-0">{{{formattedname}}}</h2> <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}}" aria-hidden="{{^isfavourite}}true{{/isfavourite}}{{#isfavourite}}false{{/isfavourite}}"
> >
{{#pix}} i/star, core, {{#str}} favourite, core_course {{/str}} {{/pix}} {{#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>
</span> </span>

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

@ -67,7 +67,7 @@
{{/legacyitem}} {{/legacyitem}}
<button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction" data-action="show-option-summary" tabindex="-1"> <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 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> </button>
</div> </div>
</div> </div>

2
course/templates/participants_actionbar.mustache
View file

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

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

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

2
grade/classes/output/general_action_bar.php
View file

@ -188,7 +188,7 @@ class general_action_bar extends action_bar {
} }
$selectmenu = new select_menu('gradesactionselect', $menu, $this->activeurl->out(false)); $selectmenu = new select_menu('gradesactionselect', $menu, $this->activeurl->out(false));
$selectmenu->set_label(get_string('gradebooknavigationmenu', 'grades'), ['class' => 'sr-only']); $selectmenu->set_label(get_string('gradebooknavigationmenu', 'grades'), ['class' => 'visually-hidden']);
return $selectmenu; return $selectmenu;
} }

12
grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
View file

@ -73,7 +73,7 @@
type="button" type="button"
> >
{{# pix }} info, gradingform_guide {{/ pix }} {{# pix }} info, gradingform_guide {{/ pix }}
<span class="sr-only">{{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}informationforcriterion, gradingform_guide, {{name}}{{/str}}</span>
</button> </button>
<button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 fw-bold mb-0 ms-auto" <button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 fw-bold mb-0 ms-auto"
type="button" type="button"
@ -83,11 +83,11 @@
aria-controls="criteria-{{id}}"> aria-controls="criteria-{{id}}">
<span class="collapsed-icon"> <span class="collapsed-icon">
{{#pix}} t/collapsed, core {{/pix}} {{#pix}} t/collapsed, core {{/pix}}
<span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span> <span class="visually-hidden">{{#str}} expandcriterion, core_grades {{/str}}</span>
</span> </span>
<span class="expanded-icon"> <span class="expanded-icon">
{{#pix}} t/expanded, core {{/pix}} {{#pix}} t/expanded, core {{/pix}}
<span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span> <span class="visually-hidden">{{#str}} collapsecriterion, core_grades {{/str}}</span>
</span> </span>
</button> </button>
</div> </div>
@ -108,7 +108,7 @@
aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score"
min="0" max="{{maxscore}}" min="0" max="{{maxscore}}"
aria-label="{{#str}}scoreforcriterion, gradingform_guide, {{name}}{{/str}}"> aria-label="{{#str}}scoreforcriterion, gradingform_guide, {{name}}{{/str}}">
<span id="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-hidden="true" class="sr-only">{{! <span id="gradingform_guide-{{uniqid}}-help-{{id}}-score" aria-hidden="true" class="visually-hidden">{{!
}}{{#str}}score_help, gradingform_guide, { "criterion": {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}} }}{{#str}}score_help, gradingform_guide, { "criterion": {{# quote }}{{ name }}{{/ quote }}, "maxscore": {{# quote }}{{ maxscore }}{{/ quote }} }{{/str}}
</span> </span>
</div> </div>
@ -134,7 +134,7 @@
type="button" type="button"
> >
{{#pix}}plus, gradingform_guide{{/pix}} {{#pix}}plus, gradingform_guide{{/pix}}
<span class="sr-only">{{#str}}commentpickerforcriterion, gradingform_guide, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}commentpickerforcriterion, gradingform_guide, {{name}}{{/str}}</span>
</button> </button>
{{/hascomments}} {{/hascomments}}
</div> </div>
@ -150,7 +150,7 @@
</div> </div>
</div> </div>
{{/hascomments}} {{/hascomments}}
<span id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" aria-hidden="true" class="sr-only">{{#str}}remark_help, gradingform_guide{{/str}}</span> <span id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" aria-hidden="true" class="visually-hidden">{{#str}}remark_help, gradingform_guide{{/str}}</span>
</div> </div>
</div> </div>
</div> </div>

2
grade/grading/form/rubric/renderer.php
View file

@ -404,7 +404,7 @@ class gradingform_rubric_renderer extends plugin_renderer_base {
'class' => 'criteria', 'class' => 'criteria',
'id' => '{NAME}-criteria', 'id' => '{NAME}-criteria',
]; ];
$caption = html_writer::tag('caption', get_string('rubric', 'gradingform_rubric'), ['class' => 'sr-only']); $caption = html_writer::tag('caption', get_string('rubric', 'gradingform_rubric'), ['class' => 'visually-hidden']);
$rubrictable = html_writer::tag('table', $caption . $criteriastr, $rubrictableparams); $rubrictable = html_writer::tag('table', $caption . $criteriastr, $rubrictableparams);
$rubrictemplate .= $rubrictable; $rubrictemplate .= $rubrictable;
if ($mode == gradingform_rubric_controller::DISPLAY_EDIT_FULL) { if ($mode == gradingform_rubric_controller::DISPLAY_EDIT_FULL) {

4
grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
View file

@ -68,11 +68,11 @@
aria-controls="criteria-{{id}}"> aria-controls="criteria-{{id}}">
<span class="collapsed-icon"> <span class="collapsed-icon">
{{#pix}} t/collapsed, core {{/pix}} {{#pix}} t/collapsed, core {{/pix}}
<span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span> <span class="visually-hidden">{{#str}} expandcriterion, core_grades {{/str}}</span>
</span> </span>
<span class="expanded-icon"> <span class="expanded-icon">
{{#pix}} t/expanded, core {{/pix}} {{#pix}} t/expanded, core {{/pix}}
<span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span> <span class="visually-hidden">{{#str}} collapsecriterion, core_grades {{/str}}</span>
</span> </span>
</button> </button>
</div> </div>

2
grade/report/grader/lib.php
View file

@ -1520,7 +1520,7 @@ class grade_report_grader extends grade_report {
'class' => 'gradeitemheader', 'class' => 'gradeitemheader',
'aria-describedby' => $describedbyid 'aria-describedby' => $describedbyid
]); ]);
$courseheader .= html_writer::div($showing, 'sr-only', [ $courseheader .= html_writer::div($showing, 'visually-hidden', [
'id' => $describedbyid 'id' => $describedbyid
]); ]);

2
grade/report/grader/templates/collapse/collapsebody.mustache
View file

@ -43,7 +43,7 @@
{{/ core/search_input_auto }} {{/ core/search_input_auto }}
<form class="columnsdropdownform flex-column h-100"> <form class="columnsdropdownform flex-column h-100">
<fieldset> <fieldset>
<legend class="sr-only">{{#str}} aria:dropdowncolumns, gradereport_grader {{/str}}</legend> <legend class="visually-hidden">{{#str}} aria:dropdowncolumns, gradereport_grader {{/str}}</legend>
<ul id="collapse-{{instance}}-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" data-region="search-result-items-container"> <ul id="collapse-{{instance}}-listbox" class="searchresultitemscontainer overflow-auto py-2 px-1 list-group mx-0 text-truncate" data-region="search-result-items-container">
{{>gradereport_grader/collapse/collapseresults}} {{>gradereport_grader/collapse/collapseresults}}
</ul> </ul>

2
grade/report/grader/templates/collapse/icon.mustache
View file

@ -25,5 +25,5 @@
}} }}
<button type="button" class="btn btn-link btn-icon icon-size-3" data-hider="expand" data-col="{{field}}"> <button type="button" class="btn btn-link btn-icon icon-size-3" data-hider="expand" data-col="{{field}}">
<i class="icon fa fa-plus m-0" title="{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}" aria-hidden="true"></i> <i class="icon fa fa-plus m-0" title="{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}" aria-hidden="true"></i>
<span class="sr-only">{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}</span> <span class="visually-hidden">{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}</span>
</button> </button>

4
grade/report/singleview/templates/bulkinsert.mustache
View file

@ -24,7 +24,7 @@
<form> <form>
<div class="alert alert-warning"> <div class="alert alert-warning">
{{#str}}unsavedataalert, gradereport_singleview{{/str}} {{#str}}unsavedataalert, gradereport_singleview{{/str}}
<span class="sr-only">{{#str}}unsaveddatawarning, gradereport_singleview{{/str}}</span> <span class="visually-hidden">{{#str}}unsaveddatawarning, gradereport_singleview{{/str}}</span>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="1" id="override"> <input class="form-check-input" type="checkbox" value="1" id="override">
<label class="form-check-label" for="override"> <label class="form-check-label" for="override">
@ -47,7 +47,7 @@
<p class ="fw-bold"> <p class ="fw-bold">
{{#str}}bulkinsertvalue, gradereport_singleview{{/str}} {{#str}}bulkinsertvalue, gradereport_singleview{{/str}}
</p> </p>
<label for="{{name}}" class="sr-only">{{#str}}bulkinsertvalue, gradereport_singleview{{/str}}</label> <label for="{{name}}" class="visually-hidden">{{#str}}bulkinsertvalue, gradereport_singleview{{/str}}</label>
<input type="text" name="{{name}}" id="{{id}}" value="0" class="form-control text-ltr" disabled {{#readonly}}readonly{{/readonly}}> <input type="text" name="{{name}}" id="{{id}}" value="0" class="form-control text-ltr" disabled {{#readonly}}readonly{{/readonly}}>
</div> </div>

2
grade/templates/cellmenu.mustache
View file

@ -46,7 +46,7 @@
{{#datatype}}data-type="{{datatype}}"{{/datatype}} {{#datatype}}data-type="{{datatype}}"{{/datatype}}
{{#dataid}}data-id="{{dataid}}"{{/dataid}}> {{#dataid}}data-id="{{dataid}}"{{/dataid}}>
<i class="icon fa fa-ellipsis-h fa-fw m-0" title="{{#str}} cellactions, gradereport_grader {{/str}}" aria-hidden="true"></i> <i class="icon fa fa-ellipsis-h fa-fw m-0" title="{{#str}} cellactions, gradereport_grader {{/str}}" aria-hidden="true"></i>
<span class="sr-only">{{#str}} cellactions, gradereport_grader {{/str}}</span> <span class="visually-hidden">{{#str}} cellactions, gradereport_grader {{/str}}</span>
</button> </button>
<div role="menu" class="dropdown-menu"> <div role="menu" class="dropdown-menu">

2
lib/amd/build/copy_to_clipboard.min.js vendored
View file

@ -26,6 +26,6 @@ define("core/copy_to_clipboard",["core/str","core/toast","core/prefetch"],(funct
* Copy to clipboard * Copy to clipboard
* </button> * </button>
*/ */
const copyNodeContentToClipboard=(copyButton,copyTarget)=>(copyTarget.select(),document.execCommand("copy")?(displaySuccessToast(copyButton),!0):(displayFailureToast(),!1)),displaySuccessToast=copyButton=>getSuccessText(copyButton).then((successMessage=>(0,_toast.add)(successMessage,{}))),displayFailureToast=()=>getFailureText().then((message=>(0,_toast.add)(message,{type:"warning"}))),getFailureText=()=>(0,_str.getString)("unabletocopytoclipboard","core"),getSuccessText=copyButton=>copyButton.dataset.clipboardSuccessMessage?Promise.resolve(copyButton.dataset.clipboardSuccessMessage):(0,_str.getString)("textcopiedtoclipboard","core"),getTextFromContainer=container=>container.value?container.value:container.innerText?container.innerText:null;let loaded=!1;loaded||((0,_prefetch.prefetchStrings)("core",["textcopiedtoclipboard","unabletocopytoclipboard"]),document.addEventListener("click",(e=>{const copyButton=e.target.closest('[data-action="copytoclipboard"]');if(!copyButton)return;if(!copyButton.dataset.clipboardTarget)return;const copyTarget=document.querySelector(copyButton.dataset.clipboardTarget);if(!copyTarget)return;e.preventDefault();const textToCopy=getTextFromContainer(copyTarget);if(textToCopy)if(navigator.clipboard)navigator.clipboard.writeText(textToCopy).then((()=>displaySuccessToast(copyButton))).catch();else if(copyTarget instanceof HTMLInputElement||copyTarget instanceof HTMLTextAreaElement)copyTarget.focus(),copyNodeContentToClipboard(copyButton,copyTarget)&&copyButton.focus();else{const copyRegion=document.createElement("textarea");copyRegion.value=textToCopy,copyRegion.classList.add("sr-only"),document.body.appendChild(copyRegion),copyNodeContentToClipboard(copyButton,copyRegion),copyRegion.remove(),copyButton.focus()}else displayFailureToast()})),loaded=!0)})); const copyNodeContentToClipboard=(copyButton,copyTarget)=>(copyTarget.select(),document.execCommand("copy")?(displaySuccessToast(copyButton),!0):(displayFailureToast(),!1)),displaySuccessToast=copyButton=>getSuccessText(copyButton).then((successMessage=>(0,_toast.add)(successMessage,{}))),displayFailureToast=()=>getFailureText().then((message=>(0,_toast.add)(message,{type:"warning"}))),getFailureText=()=>(0,_str.getString)("unabletocopytoclipboard","core"),getSuccessText=copyButton=>copyButton.dataset.clipboardSuccessMessage?Promise.resolve(copyButton.dataset.clipboardSuccessMessage):(0,_str.getString)("textcopiedtoclipboard","core"),getTextFromContainer=container=>container.value?container.value:container.innerText?container.innerText:null;let loaded=!1;loaded||((0,_prefetch.prefetchStrings)("core",["textcopiedtoclipboard","unabletocopytoclipboard"]),document.addEventListener("click",(e=>{const copyButton=e.target.closest('[data-action="copytoclipboard"]');if(!copyButton)return;if(!copyButton.dataset.clipboardTarget)return;const copyTarget=document.querySelector(copyButton.dataset.clipboardTarget);if(!copyTarget)return;e.preventDefault();const textToCopy=getTextFromContainer(copyTarget);if(textToCopy)if(navigator.clipboard)navigator.clipboard.writeText(textToCopy).then((()=>displaySuccessToast(copyButton))).catch();else if(copyTarget instanceof HTMLInputElement||copyTarget instanceof HTMLTextAreaElement)copyTarget.focus(),copyNodeContentToClipboard(copyButton,copyTarget)&&copyButton.focus();else{const copyRegion=document.createElement("textarea");copyRegion.value=textToCopy,copyRegion.classList.add("visually-hidden"),document.body.appendChild(copyRegion),copyNodeContentToClipboard(copyButton,copyRegion),copyRegion.remove(),copyButton.focus()}else displayFailureToast()})),loaded=!0)}));
//# sourceMappingURL=copy_to_clipboard.min.js.map //# sourceMappingURL=copy_to_clipboard.min.js.map

2
lib/amd/build/copy_to_clipboard.min.js.map
View file

File diff suppressed because one or more lines are too long

2
lib/amd/build/datafilter/filtertype.min.js vendored
View file

@ -5,6 +5,6 @@ define("core/datafilter/filtertype",["exports","core/form-autocomplete","core/da
* @module core/datafilter/filtertype * @module core/datafilter/filtertype
* @copyright 2020 Andrew Nicols <andrew@nicols.co.uk> * @copyright 2020 Andrew Nicols <andrew@nicols.co.uk>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_formAutocomplete=_interopRequireDefault(_formAutocomplete),_selectors=_interopRequireDefault(_selectors),_notification=_interopRequireDefault(_notification);return _exports.default=class{constructor(filterType,rootNode,initialValues){this.filterType=filterType,this.rootNode=rootNode,this.addValueSelector(initialValues).then((()=>{const filterRoot=this.filterRoot;return filterRoot&&filterRoot.querySelector(_selectors.default.data.required)&&filterRoot.querySelector(_selectors.default.filter.actions.remove).remove(),filterRoot})).catch(_notification.default.exception)}tearDown(){}get placeholder(){return(0,_str.getString)("placeholdertypeorselect","core")}get showSuggestions(){return!0}async addValueSelector(){let initialValues=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];const filterValueNode=this.getFilterValueNode(),sourceDataNode=this.getSourceDataForFilter();if(!sourceDataNode)throw new Error("No source data for filter.");filterValueNode.innerHTML=sourceDataNode.outerHTML;const dataSource=filterValueNode.querySelector("select");dataSource.id="filter-value-"+dataSource.getAttribute("data-field-name");const filterValueLabel=document.createElement("label");return filterValueLabel.setAttribute("for",dataSource.id),filterValueLabel.classList.add("sr-only"),filterValueLabel.innerText=dataSource.getAttribute("data-field-title"),filterValueNode.appendChild(filterValueLabel),initialValues.forEach((filterValue=>{let selectedOption=dataSource.querySelector('option[value="'.concat(filterValue,'"]'));selectedOption?selectedOption.selected=!0:this.showSuggestions||(selectedOption=document.createElement("option"),selectedOption.value=filterValue,selectedOption.innerHTML=filterValue,selectedOption.selected=!0,dataSource.append(selectedOption))})),_formAutocomplete.default.enhance(dataSource,"1"==dataSource.dataset.allowCustom,null,await this.placeholder,!1,this.showSuggestions,null,!dataSource.multiple,{items:"core/datafilter/autocomplete_selection_items",layout:"core/datafilter/autocomplete_layout",selection:"core/datafilter/autocomplete_selection"})}get filterRoot(){return this.rootNode.querySelector(_selectors.default.filter.byName(this.filterType))}getSourceDataForFilter(){return this.rootNode.querySelector(_selectors.default.filterset.regions.datasource).querySelector(_selectors.default.data.fields.byName(this.filterType))}getFilterValueNode(){return this.filterRoot.querySelector(_selectors.default.filter.regions.values)}get name(){return this.filterType}get jointype(){return parseInt(this.filterRoot.querySelector(_selectors.default.filter.fields.join).value,10)}get rawValues(){const filterValueSelect=this.getFilterValueNode().querySelector("select");return Object.values((select=filterValueSelect,select.querySelectorAll(":checked"))).map((option=>option.value));var select}get values(){return this.rawValues.map((option=>parseInt(option,10)))}get filterOptions(){return[]}get filterValue(){return{name:this.name,jointype:this.jointype,values:this.values,filteroptions:this.filterOptions}}},_exports.default})); */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_formAutocomplete=_interopRequireDefault(_formAutocomplete),_selectors=_interopRequireDefault(_selectors),_notification=_interopRequireDefault(_notification);return _exports.default=class{constructor(filterType,rootNode,initialValues){this.filterType=filterType,this.rootNode=rootNode,this.addValueSelector(initialValues).then((()=>{const filterRoot=this.filterRoot;return filterRoot&&filterRoot.querySelector(_selectors.default.data.required)&&filterRoot.querySelector(_selectors.default.filter.actions.remove).remove(),filterRoot})).catch(_notification.default.exception)}tearDown(){}get placeholder(){return(0,_str.getString)("placeholdertypeorselect","core")}get showSuggestions(){return!0}async addValueSelector(){let initialValues=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];const filterValueNode=this.getFilterValueNode(),sourceDataNode=this.getSourceDataForFilter();if(!sourceDataNode)throw new Error("No source data for filter.");filterValueNode.innerHTML=sourceDataNode.outerHTML;const dataSource=filterValueNode.querySelector("select");dataSource.id="filter-value-"+dataSource.getAttribute("data-field-name");const filterValueLabel=document.createElement("label");return filterValueLabel.setAttribute("for",dataSource.id),filterValueLabel.classList.add("visually-hidden"),filterValueLabel.innerText=dataSource.getAttribute("data-field-title"),filterValueNode.appendChild(filterValueLabel),initialValues.forEach((filterValue=>{let selectedOption=dataSource.querySelector('option[value="'.concat(filterValue,'"]'));selectedOption?selectedOption.selected=!0:this.showSuggestions||(selectedOption=document.createElement("option"),selectedOption.value=filterValue,selectedOption.innerHTML=filterValue,selectedOption.selected=!0,dataSource.append(selectedOption))})),_formAutocomplete.default.enhance(dataSource,"1"==dataSource.dataset.allowCustom,null,await this.placeholder,!1,this.showSuggestions,null,!dataSource.multiple,{items:"core/datafilter/autocomplete_selection_items",layout:"core/datafilter/autocomplete_layout",selection:"core/datafilter/autocomplete_selection"})}get filterRoot(){return this.rootNode.querySelector(_selectors.default.filter.byName(this.filterType))}getSourceDataForFilter(){return this.rootNode.querySelector(_selectors.default.filterset.regions.datasource).querySelector(_selectors.default.data.fields.byName(this.filterType))}getFilterValueNode(){return this.filterRoot.querySelector(_selectors.default.filter.regions.values)}get name(){return this.filterType}get jointype(){return parseInt(this.filterRoot.querySelector(_selectors.default.filter.fields.join).value,10)}get rawValues(){const filterValueSelect=this.getFilterValueNode().querySelector("select");return Object.values((select=filterValueSelect,select.querySelectorAll(":checked"))).map((option=>option.value));var select}get values(){return this.rawValues.map((option=>parseInt(option,10)))}get filterOptions(){return[]}get filterValue(){return{name:this.name,jointype:this.jointype,values:this.values,filteroptions:this.filterOptions}}},_exports.default}));
//# sourceMappingURL=filtertype.min.js.map //# sourceMappingURL=filtertype.min.js.map

2
lib/amd/build/datafilter/filtertype.min.js.map
View file

File diff suppressed because one or more lines are too long

2
lib/amd/build/dropzone.min.js vendored
View file

@ -1,3 +1,3 @@
define("core/dropzone",["exports","core/str","core/log","core/prefetch","core/templates"],(function(_exports,_str,_log,_prefetch,_templates){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_log=_interopRequireDefault(_log),_templates=_interopRequireDefault(_templates);var _default=class{constructor(dropZoneElement,fileTypes,callback){_defineProperty(this,"dropZoneElement",void 0),_defineProperty(this,"fileTypes",void 0),_defineProperty(this,"callback",void 0),_defineProperty(this,"dropZoneLabel",""),(0,_prefetch.prefetchString)("core","addfilesdrop"),this.dropZoneElement=dropZoneElement,this.fileTypes=fileTypes,this.callback=callback}init(){return this.dropZoneElement.addEventListener("dragover",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.add("dragover"))})),this.dropZoneElement.addEventListener("dragleave",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"))})),this.dropZoneElement.addEventListener("drop",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"),this.callback(e.dataTransfer.files))})),this.dropZoneElement.addEventListener("click",(e=>{this.getDropZoneContainerFromEvent(e)&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("click",(e=>{e.target.closest(".dropzone-sr-only-focusable")&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("change",(e=>{const fileInput=this.getFileElementFromEvent(e);fileInput&&(e.preventDefault(),this.callback(fileInput.files))})),this.renderDropZone(this.dropZoneElement,this.fileTypes),_log.default.info("Dropzone has been initialized!"),this}getDropZoneFromEvent(e){return e.target.closest(".dropzone")}getDropZoneContainerFromEvent(e){return e.target.closest(".dropzone-container")}getFileElementFromEvent(e){return e.target.closest(".dropzone-container").querySelector(".drop-zone-fileinput")}setLabel(label){this.dropZoneLabel=label}getLabel(){return this.dropZoneLabel}async renderDropZone(dropZoneElement,fileTypes){this.getLabel()||this.setLabel(await(0,_str.getString)("addfilesdrop","core"));const dropZoneLabel=this.getLabel();dropZoneElement.innerHTML=await _templates.default.render("core/dropzone",{label:dropZoneLabel,filetypes:fileTypes})}};return _exports.default=_default,_exports.default})); define("core/dropzone",["exports","core/str","core/log","core/prefetch","core/templates"],(function(_exports,_str,_log,_prefetch,_templates){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_log=_interopRequireDefault(_log),_templates=_interopRequireDefault(_templates);var _default=class{constructor(dropZoneElement,fileTypes,callback){_defineProperty(this,"dropZoneElement",void 0),_defineProperty(this,"fileTypes",void 0),_defineProperty(this,"callback",void 0),_defineProperty(this,"dropZoneLabel",""),(0,_prefetch.prefetchString)("core","addfilesdrop"),this.dropZoneElement=dropZoneElement,this.fileTypes=fileTypes,this.callback=callback}init(){return this.dropZoneElement.addEventListener("dragover",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.add("dragover"))})),this.dropZoneElement.addEventListener("dragleave",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"))})),this.dropZoneElement.addEventListener("drop",(e=>{const dropZone=this.getDropZoneFromEvent(e);dropZone&&(e.preventDefault(),dropZone.classList.remove("dragover"),this.callback(e.dataTransfer.files))})),this.dropZoneElement.addEventListener("click",(e=>{this.getDropZoneContainerFromEvent(e)&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("click",(e=>{e.target.closest(".dropzone-visually-hidden-focusable")&&this.getFileElementFromEvent(e).click()})),this.dropZoneElement.addEventListener("change",(e=>{const fileInput=this.getFileElementFromEvent(e);fileInput&&(e.preventDefault(),this.callback(fileInput.files))})),this.renderDropZone(this.dropZoneElement,this.fileTypes),_log.default.info("Dropzone has been initialized!"),this}getDropZoneFromEvent(e){return e.target.closest(".dropzone")}getDropZoneContainerFromEvent(e){return e.target.closest(".dropzone-container")}getFileElementFromEvent(e){return e.target.closest(".dropzone-container").querySelector(".drop-zone-fileinput")}setLabel(label){this.dropZoneLabel=label}getLabel(){return this.dropZoneLabel}async renderDropZone(dropZoneElement,fileTypes){this.getLabel()||this.setLabel(await(0,_str.getString)("addfilesdrop","core"));const dropZoneLabel=this.getLabel();dropZoneElement.innerHTML=await _templates.default.render("core/dropzone",{label:dropZoneLabel,filetypes:fileTypes})}};return _exports.default=_default,_exports.default}));
//# sourceMappingURL=dropzone.min.js.map //# sourceMappingURL=dropzone.min.js.map

2
lib/amd/build/dropzone.min.js.map
View file

File diff suppressed because one or more lines are too long

2
lib/amd/build/local/reactive/srlogger.min.js vendored
View file

@ -1,3 +1,3 @@
define("core/local/reactive/srlogger",["exports","core/local/reactive/logger"],(function(_exports,_logger){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_logger=(obj=_logger)&&obj.__esModule?obj:{default:obj};class SRLogger extends _logger.default{add(entry){if(entry.feedbackMessage){let loggerFeedback=document.getElementById(SRLogger.liveRegionId);loggerFeedback||(loggerFeedback=document.createElement("div"),loggerFeedback.id=SRLogger.liveRegionId,loggerFeedback.classList.add("sr-only"),loggerFeedback.setAttribute("aria-live","polite"),document.body.append(loggerFeedback)),loggerFeedback.innerHTML=entry.feedbackMessage,setTimeout((()=>{loggerFeedback.innerHTML=""}),4e3)}}}return _exports.default=SRLogger,function(obj,key,value){key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value}(SRLogger,"liveRegionId","sr-logger-feedback-container"),_exports.default})); define("core/local/reactive/srlogger",["exports","core/local/reactive/logger"],(function(_exports,_logger){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_logger=(obj=_logger)&&obj.__esModule?obj:{default:obj};class SRLogger extends _logger.default{add(entry){if(entry.feedbackMessage){let loggerFeedback=document.getElementById(SRLogger.liveRegionId);loggerFeedback||(loggerFeedback=document.createElement("div"),loggerFeedback.id=SRLogger.liveRegionId,loggerFeedback.classList.add("visually-hidden"),loggerFeedback.setAttribute("aria-live","polite"),document.body.append(loggerFeedback)),loggerFeedback.innerHTML=entry.feedbackMessage,setTimeout((()=>{loggerFeedback.innerHTML=""}),4e3)}}}return _exports.default=SRLogger,function(obj,key,value){key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value}(SRLogger,"liveRegionId","sr-logger-feedback-container"),_exports.default}));
//# sourceMappingURL=srlogger.min.js.map //# sourceMappingURL=srlogger.min.js.map

2
lib/amd/build/local/reactive/srlogger.min.js.map
View file

@ -1 +1 @@
{"version":3,"file":"srlogger.min.js","sources":["../../../src/local/reactive/srlogger.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Screen reader-only (sr-only) reactive mutations logger class.\n *\n * This logger can be used by the StateManager to log mutation feedbacks and actions.\n * The feedback messages logged by this logger will be rendered in a sr-only, ARIA live region.\n *\n * @module core/local/reactive/srlogger\n * @class SRLogger\n * @copyright 2023 Jun Pataleta <jun@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Logger from 'core/local/reactive/logger';\n\n/**\n * Logger entry structure.\n *\n * @typedef {object} LoggerEntry\n * @property {string} feedbackMessage Feedback message.\n */\n\n/**\n * Screen reader-only (sr-only) reactive mutations logger class.\n *\n * @class SRLogger\n */\nexport default class SRLogger extends Logger {\n /**\n * The element ID of the ARIA live region where the logger feedback will be rendered.\n *\n * @type {string}\n */\n static liveRegionId = 'sr-logger-feedback-container';\n\n /**\n * Add a log entry.\n * @param {LoggerEntry} entry Log entry.\n */\n add(entry) {\n if (entry.feedbackMessage) {\n // Fetch or create an ARIA live region that will serve as the container for the logger feedback.\n let loggerFeedback = document.getElementById(SRLogger.liveRegionId);\n if (!loggerFeedback) {\n loggerFeedback = document.createElement('div');\n loggerFeedback.id = SRLogger.liveRegionId;\n loggerFeedback.classList.add('sr-only');\n loggerFeedback.setAttribute('aria-live', 'polite');\n document.body.append(loggerFeedback);\n }\n // Set the ARIA live region's contents with the feedback.\n loggerFeedback.innerHTML = entry.feedbackMessage;\n\n // Clear the feedback message after 4 seconds to avoid the contents from being read out in case the user navigates\n // to this region. This is similar to the default timeout of toast messages before disappearing from view.\n setTimeout(() => {\n loggerFeedback.innerHTML = '';\n }, 4000);\n }\n }\n}\n"],"names":["SRLogger","Logger","add","entry","feedbackMessage","loggerFeedback","document","getElementById","liveRegionId","createElement","id","classList","setAttribute","body","append","innerHTML","setTimeout"],"mappings":"iQAyCqBA,iBAAiBC,gBAYlCC,IAAIC,UACIA,MAAMC,gBAAiB,KAEnBC,eAAiBC,SAASC,eAAeP,SAASQ,cACjDH,iBACDA,eAAiBC,SAASG,cAAc,OACxCJ,eAAeK,GAAKV,SAASQ,aAC7BH,eAAeM,UAAUT,IAAI,WAC7BG,eAAeO,aAAa,YAAa,UACzCN,SAASO,KAAKC,OAAOT,iBAGzBA,eAAeU,UAAYZ,MAAMC,gBAIjCY,YAAW,KACPX,eAAeU,UAAY,KAC5B,kLA9BMf,wBAMK"} {"version":3,"file":"srlogger.min.js","sources":["../../../src/local/reactive/srlogger.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Screen reader-only (visually-hidden) reactive mutations logger class.\n *\n * This logger can be used by the StateManager to log mutation feedbacks and actions.\n * The feedback messages logged by this logger will be rendered in a visually-hidden, ARIA live region.\n *\n * @module core/local/reactive/srlogger\n * @class SRLogger\n * @copyright 2023 Jun Pataleta <jun@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Logger from 'core/local/reactive/logger';\n\n/**\n * Logger entry structure.\n *\n * @typedef {object} LoggerEntry\n * @property {string} feedbackMessage Feedback message.\n */\n\n/**\n * Screen reader-only (visually-hidden) reactive mutations logger class.\n *\n * @class SRLogger\n */\nexport default class SRLogger extends Logger {\n /**\n * The element ID of the ARIA live region where the logger feedback will be rendered.\n *\n * @type {string}\n */\n static liveRegionId = 'sr-logger-feedback-container';\n\n /**\n * Add a log entry.\n * @param {LoggerEntry} entry Log entry.\n */\n add(entry) {\n if (entry.feedbackMessage) {\n // Fetch or create an ARIA live region that will serve as the container for the logger feedback.\n let loggerFeedback = document.getElementById(SRLogger.liveRegionId);\n if (!loggerFeedback) {\n loggerFeedback = document.createElement('div');\n loggerFeedback.id = SRLogger.liveRegionId;\n loggerFeedback.classList.add('visually-hidden');\n loggerFeedback.setAttribute('aria-live', 'polite');\n document.body.append(loggerFeedback);\n }\n // Set the ARIA live region's contents with the feedback.\n loggerFeedback.innerHTML = entry.feedbackMessage;\n\n // Clear the feedback message after 4 seconds to avoid the contents from being read out in case the user navigates\n // to this region. This is similar to the default timeout of toast messages before disappearing from view.\n setTimeout(() => {\n loggerFeedback.innerHTML = '';\n }, 4000);\n }\n }\n}\n"],"names":["SRLogger","Logger","add","entry","feedbackMessage","loggerFeedback","document","getElementById","liveRegionId","createElement","id","classList","setAttribute","body","append","innerHTML","setTimeout"],"mappings":"iQAyCqBA,iBAAiBC,gBAYlCC,IAAIC,UACIA,MAAMC,gBAAiB,KAEnBC,eAAiBC,SAASC,eAAeP,SAASQ,cACjDH,iBACDA,eAAiBC,SAASG,cAAc,OACxCJ,eAAeK,GAAKV,SAASQ,aAC7BH,eAAeM,UAAUT,IAAI,mBAC7BG,eAAeO,aAAa,YAAa,UACzCN,SAASO,KAAKC,OAAOT,iBAGzBA,eAAeU,UAAYZ,MAAMC,gBAIjCY,YAAW,KACPX,eAAeU,UAAY,KAC5B,kLA9BMf,wBAMK"}

4
lib/amd/src/copy_to_clipboard.js
View file

@ -101,11 +101,11 @@ const addEventListeners = () => {
// This copyTarget is not an input, or text area so cannot be used with the execCommand('copy') command. // This copyTarget is not an input, or text area so cannot be used with the execCommand('copy') command.
// To work around this we create a new textarea and copy that. // To work around this we create a new textarea and copy that.
// This textarea must be part of the DOM and must be visible. // This textarea must be part of the DOM and must be visible.
// We (ab)use the sr-only tag to ensure that it is considered visible to the browser, whilst being // We (ab)use the visually-hidden tag to ensure that it is considered visible to the browser, whilst being
// hidden from view by the user. // hidden from view by the user.
const copyRegion = document.createElement('textarea'); const copyRegion = document.createElement('textarea');
copyRegion.value = textToCopy; copyRegion.value = textToCopy;
copyRegion.classList.add('sr-only'); copyRegion.classList.add('visually-hidden');
document.body.appendChild(copyRegion); document.body.appendChild(copyRegion);
copyNodeContentToClipboard(copyButton, copyRegion); copyNodeContentToClipboard(copyButton, copyRegion);

2
lib/amd/src/datafilter/filtertype.js
View file

@ -109,7 +109,7 @@ export default class {
// Create a hidden label for the filter value. // Create a hidden label for the filter value.
const filterValueLabel = document.createElement('label'); const filterValueLabel = document.createElement('label');
filterValueLabel.setAttribute('for', dataSource.id); filterValueLabel.setAttribute('for', dataSource.id);
filterValueLabel.classList.add('sr-only'); filterValueLabel.classList.add('visually-hidden');
filterValueLabel.innerText = dataSource.getAttribute('data-field-title'); filterValueLabel.innerText = dataSource.getAttribute('data-field-title');
// Append this label to the filter value container. // Append this label to the filter value container.

2
lib/amd/src/dropzone.js
View file

@ -111,7 +111,7 @@ const DropZone = class {
this.getFileElementFromEvent(e).click(); this.getFileElementFromEvent(e).click();
}); });
this.dropZoneElement.addEventListener('click', (e) => { this.dropZoneElement.addEventListener('click', (e) => {
const dropZoneLabel = e.target.closest('.dropzone-sr-only-focusable'); const dropZoneLabel = e.target.closest('.dropzone-visually-hidden-focusable');
if (!dropZoneLabel) { if (!dropZoneLabel) {
return; return;
} }

8
lib/amd/src/local/reactive/srlogger.js
View file

@ -14,10 +14,10 @@
// along with Moodle. If not, see <http://www.gnu.org/licenses/>. // along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/** /**
* Screen reader-only (sr-only) reactive mutations logger class. * Screen reader-only (visually-hidden) reactive mutations logger class.
* *
* This logger can be used by the StateManager to log mutation feedbacks and actions. * This logger can be used by the StateManager to log mutation feedbacks and actions.
* The feedback messages logged by this logger will be rendered in a sr-only, ARIA live region. * The feedback messages logged by this logger will be rendered in a visually-hidden, ARIA live region.
* *
* @module core/local/reactive/srlogger * @module core/local/reactive/srlogger
* @class SRLogger * @class SRLogger
@ -35,7 +35,7 @@ import Logger from 'core/local/reactive/logger';
*/ */
/** /**
* Screen reader-only (sr-only) reactive mutations logger class. * Screen reader-only (visually-hidden) reactive mutations logger class.
* *
* @class SRLogger * @class SRLogger
*/ */
@ -58,7 +58,7 @@ export default class SRLogger extends Logger {
if (!loggerFeedback) { if (!loggerFeedback) {
loggerFeedback = document.createElement('div'); loggerFeedback = document.createElement('div');
loggerFeedback.id = SRLogger.liveRegionId; loggerFeedback.id = SRLogger.liveRegionId;
loggerFeedback.classList.add('sr-only'); loggerFeedback.classList.add('visually-hidden');
loggerFeedback.setAttribute('aria-live', 'polite'); loggerFeedback.setAttribute('aria-live', 'polite');
document.body.append(loggerFeedback); document.body.append(loggerFeedback);
} }

4
lib/classes/navigation/views/secondary.php
View file

@ -631,7 +631,7 @@ class secondary extends view {
} }
$menuselect = new url_select($menuarray, $selectedoverflownodeurl ?? $this->page->url, null); $menuselect = new url_select($menuarray, $selectedoverflownodeurl ?? $this->page->url, null);
$menuselect->set_label(get_string('browsecourseadminindex', 'course'), ['class' => 'sr-only']); $menuselect->set_label(get_string('browsecourseadminindex', 'course'), ['class' => 'visually-hidden']);
return $menuselect; return $menuselect;
} else { } else {
return $this->get_other_overflow_menu_data($activenode); return $this->get_other_overflow_menu_data($activenode);
@ -684,7 +684,7 @@ class secondary extends view {
} }
$selectdata = static::create_menu_element([$menunode], false); $selectdata = static::create_menu_element([$menunode], false);
$urlselect = new url_select($selectdata, $matchednode->action->out(false), null); $urlselect = new url_select($selectdata, $matchednode->action->out(false), null);
$urlselect->set_label(get_string('browsesettingindex', 'course'), ['class' => 'sr-only']); $urlselect->set_label(get_string('browsesettingindex', 'course'), ['class' => 'visually-hidden']);
return $urlselect; return $urlselect;
} }

9
lib/classes/output/core_renderer.php
View file

@ -3812,10 +3812,10 @@ EOD;
'data-droptarget' => '1', 'data-droptarget' => '1',
]; ];
if ($this->page->blocks->region_has_content($displayregion, $this)) { if ($this->page->blocks->region_has_content($displayregion, $this)) {
$content = html_writer::tag('h2', get_string('blocks'), ['class' => 'sr-only']) . $content = html_writer::tag('h2', get_string('blocks'), ['class' => 'visually-hidden']) .
$this->blocks_for_region($displayregion, $fakeblocksonly); $this->blocks_for_region($displayregion, $fakeblocksonly);
} else { } else {
$content = html_writer::tag('h2', get_string('blocks'), ['class' => 'sr-only']); $content = html_writer::tag('h2', get_string('blocks'), ['class' => 'visually-hidden']);
} }
return html_writer::tag($tag, $content, $attributes); return html_writer::tag($tag, $content, $attributes);
} }
@ -4222,9 +4222,10 @@ EOD;
} }
} }
// Return the heading wrapped in an sr-only element so it is only visible to screen-readers for nocontextheader layouts. // Return the heading wrapped in an visually-hidden element so it is only visible to screen-readers
// for nocontextheader layouts.
if (!empty($this->page->layout_options['nocontextheader'])) { if (!empty($this->page->layout_options['nocontextheader'])) {
return html_writer::div($heading, 'sr-only'); return html_writer::div($heading, 'visually-hidden');
} }
$contextheader = new context_header($heading, $headinglevel, $imagedata, $userbuttons); $contextheader = new context_header($heading, $headinglevel, $imagedata, $userbuttons);

2
lib/classes/output/participants_action_bar.php
View file

@ -207,7 +207,7 @@ class participants_action_bar implements renderable {
$activeurl = $activeurl ?: $this->find_active_page($urlselectcontent, URL_MATCH_BASE); $activeurl = $activeurl ?: $this->find_active_page($urlselectcontent, URL_MATCH_BASE);
$selectmenu = new select_menu('participantsnavigation', $urlselectcontent, $activeurl); $selectmenu = new select_menu('participantsnavigation', $urlselectcontent, $activeurl);
$selectmenu->set_label(get_string('participantsnavigation', 'course'), ['class' => 'sr-only']); $selectmenu->set_label(get_string('participantsnavigation', 'course'), ['class' => 'visually-hidden']);
return $selectmenu->export_for_template($output); return $selectmenu->export_for_template($output);
} }

2
lib/classes/report_helper.php
View file

@ -70,7 +70,7 @@ class report_helper {
} }
$selectmenu = new \core\output\select_menu('reporttype', $menuarray, $activeurl); $selectmenu = new \core\output\select_menu('reporttype', $menuarray, $activeurl);
$selectmenu->set_label(get_string('reporttype'), ['class' => 'sr-only']); $selectmenu->set_label(get_string('reporttype'), ['class' => 'visually-hidden']);
$options = \html_writer::tag( $options = \html_writer::tag(
'div', 'div',
$OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)), $OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)),

2
lib/editor/atto/plugins/h5p/yui/build/moodle-atto_h5p-button/moodle-atto_h5p-button-debug.js vendored
View file

@ -113,7 +113,7 @@ var CSS = {
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' + '<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string "h5poptions" component}}' + '{{get_string "h5poptions" component}}' +

4
lib/editor/atto/plugins/h5p/yui/build/moodle-atto_h5p-button/moodle-atto_h5p-button-min.js vendored
View file

File diff suppressed because one or more lines are too long

2
lib/editor/atto/plugins/h5p/yui/build/moodle-atto_h5p-button/moodle-atto_h5p-button.js vendored
View file

@ -113,7 +113,7 @@ var CSS = {
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' + '<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string "h5poptions" component}}' + '{{get_string "h5poptions" component}}' +

2
lib/editor/atto/plugins/h5p/yui/src/button/js/button.js vendored
View file

@ -111,7 +111,7 @@ var CSS = {
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' + '<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string "h5poptions" component}}' + '{{get_string "h5poptions" component}}' +

2
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js vendored
View file

@ -401,7 +401,7 @@ var COMPONENTNAME = 'atto_media',
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string name component}}</span>' + '<span class="visually-hidden">{{get_string name component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string name component}}' + '{{get_string name component}}' +

2
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js vendored
View file

File diff suppressed because one or more lines are too long

2
lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js vendored
View file

@ -401,7 +401,7 @@ var COMPONENTNAME = 'atto_media',
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string name component}}</span>' + '<span class="visually-hidden">{{get_string name component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string name component}}' + '{{get_string name component}}' +

2
lib/editor/atto/plugins/media/yui/src/button/js/button.js vendored
View file

@ -399,7 +399,7 @@ var COMPONENTNAME = 'atto_media',
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
'</span>' + '</span>' +
'</span>' + '</span>' +
'<span class="sr-only">{{get_string name component}}</span>' + '<span class="visually-hidden">{{get_string name component}}</span>' +
'</a>' + '</a>' +
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
'{{get_string name component}}' + '{{get_string name component}}' +

4
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js vendored
View file

@ -192,7 +192,9 @@ Y.extend(Editor, Y.Base, {
this._eventHandles = []; this._eventHandles = [];
var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'); var description = Y.Node.create(
'<div class="visually-hidden">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'
);
this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />'); this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
this._wrapper.appendChild(description); this._wrapper.appendChild(description);
this._wrapper.setAttribute('aria-describedby', description.generateID()); this._wrapper.setAttribute('aria-describedby', description.generateID());

10
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js vendored
View file

File diff suppressed because one or more lines are too long

4
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js vendored
View file

@ -190,7 +190,9 @@ Y.extend(Editor, Y.Base, {
this._eventHandles = []; this._eventHandles = [];
var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'); var description = Y.Node.create(
'<div class="visually-hidden">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'
);
this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />'); this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
this._wrapper.appendChild(description); this._wrapper.appendChild(description);
this._wrapper.setAttribute('aria-describedby', description.generateID()); this._wrapper.setAttribute('aria-describedby', description.generateID());

4
lib/editor/atto/yui/src/editor/js/editor.js vendored
View file

@ -190,7 +190,9 @@ Y.extend(Editor, Y.Base, {
this._eventHandles = []; this._eventHandles = [];
var description = Y.Node.create('<div class="sr-only">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'); var description = Y.Node.create(
'<div class="visually-hidden">' + M.util.get_string('richtexteditor', 'editor_atto') + '</div>'
);
this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />'); this._wrapper = Y.Node.create('<div class="' + CSS.WRAPPER + '" role="application" />');
this._wrapper.appendChild(description); this._wrapper.appendChild(description);
this._wrapper.setAttribute('aria-describedby', description.generateID()); this._wrapper.setAttribute('aria-describedby', description.generateID());

2
lib/editor/tiny/plugins/aiplacement/templates/loading.mustache
View file

@ -37,7 +37,7 @@
<div id="{{elementid}}_tiny_aiplacement_spinner" class="tiny-aiplacement-loading-spinner-container hidden"> <div id="{{elementid}}_tiny_aiplacement_spinner" class="tiny-aiplacement-loading-spinner-container hidden">
<div class="tiny-aiplacement-loading-spinner d-flex justify-content-center align-items-center flex-column"> <div class="tiny-aiplacement-loading-spinner d-flex justify-content-center align-items-center flex-column">
<div class="spinner-border tiny-aiplacement-spinner-style" role="status"> <div class="spinner-border tiny-aiplacement-spinner-style" role="status">
<span class="sr-only"> <span class="visually-hidden">
{{#str}} loading, tiny_aiplacement{{/str}} {{#str}} loading, tiny_aiplacement{{/str}}
</span> </span>
</div> </div>

Some files were not shown because too many files have changed in this diff Show more