mirror of
https://github.com/moodle/moodle.git
synced 2025-08-06 09:26:35 +02:00
MDL-81825 theme_boost: Refactor .sr-only usages for BS5
- 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
parent
0888a6d324
commit
f9abc562f5
220 changed files with 469 additions and 439 deletions
|
|
@ -322,7 +322,7 @@ abstract class plugin_management_table extends flexible_table implements dynamic
|
|||
],
|
||||
'title' => $labelstr,
|
||||
'label' => $labelstr,
|
||||
'labelclasses' => 'sr-only',
|
||||
'labelclasses' => 'visually-hidden',
|
||||
];
|
||||
|
||||
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="input-group">
|
||||
<label for="searchinput-{{uniqid}}">
|
||||
<span class="sr-only">{{#str}} search, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} search, core {{/str}}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
id="searchinput-{{uniqid}}"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-primary search-icon">
|
||||
{{#pix}} a/search, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} search, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} search, core {{/str}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="form-duration defaultsnext">
|
||||
<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}}>
|
||||
<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}}>
|
||||
{{#options}}
|
||||
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="form-filesize defaultsnext">
|
||||
<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}}>
|
||||
<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}}>
|
||||
{{#options}}
|
||||
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
|
||||
|
|
|
|||
|
|
@ -46,13 +46,13 @@
|
|||
}}
|
||||
<div class="form-time defaultsnext">
|
||||
<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}}>
|
||||
{{#hours}}
|
||||
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
|
||||
{{/hours}}
|
||||
</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}}>
|
||||
{{#minutes}}
|
||||
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{name}}</option>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
* state - state of the toggle
|
||||
* title - title of the toggle tooltip
|
||||
* 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):
|
||||
{
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
}],
|
||||
"title": "Title example",
|
||||
"label": "Enable/disable reality",
|
||||
"labelclasses": "sr-only"
|
||||
"labelclasses": "visually-hidden"
|
||||
}
|
||||
}}
|
||||
<div id="container-{{id}}"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
data-choose="{{choose}}"
|
||||
data-sesskey="{{sesskey}}">
|
||||
<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>
|
||||
{{#reporturl}}
|
||||
<a
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
class="btn btn-link p-0 ms-2"
|
||||
title="{{#str}}themeusagereportname, admin, {{name}}{{/str}}">
|
||||
<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>
|
||||
{{/reporturl}}
|
||||
{{#settingsurl}}
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
class="btn btn-link p-0 ms-2"
|
||||
title="{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}">
|
||||
<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>
|
||||
{{/settingsurl}}
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<input type="hidden" name="choose" value="{{choose}}">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<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>
|
||||
</form>
|
||||
{{/actionurl}}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Unless the context is clear (as with the "Notifications" example, where it is un
|
|||
{{< example >}}
|
||||
<button type="button" class="btn btn-primary">
|
||||
Profile <span class="badge badge-light">9</span>
|
||||
<span class="sr-only">unread messages</span>
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ Adding in the previous and next controls. We recommend using `<button>` elements
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -98,11 +98,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -143,11 +143,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -171,11 +171,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -199,11 +199,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -227,11 +227,11 @@ Carousels support swiping left/right on touchscreen devices to move between slid
|
|||
</div>
|
||||
<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="sr-only">Previous</span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<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="sr-only">Next</span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
|
|||
<div class="btn-group">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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
|
||||
</button>
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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
|
||||
</button>
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
|
|
@ -374,7 +374,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
|
|||
Split dropup
|
||||
</button>
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<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
|
||||
</button>
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
|
|
@ -433,7 +433,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
|
|||
Split dropright
|
||||
</button>
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<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
|
||||
</button>
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<!-- 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 dropleft">
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<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 dropleft">
|
||||
<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>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
|
|
@ -757,7 +757,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
|
|||
<div class="btn-group">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
|
|
|
|||
|
|
@ -137,11 +137,11 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
|
|||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
<div class="form-row align-items-center">
|
||||
<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">
|
||||
</div>
|
||||
<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-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
|
|
@ -511,11 +511,11 @@ You can then remix that once again with size-specific column classes.
|
|||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<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">
|
||||
</div>
|
||||
<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-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
|
|
@ -544,7 +544,7 @@ And of course [custom form controls](#custom-forms) are supported.
|
|||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<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">
|
||||
<option selected>Choose...</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 **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 >}}
|
||||
<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">
|
||||
|
||||
<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-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
|
|
@ -622,7 +622,7 @@ Custom form controls and selects are also supported.
|
|||
|
||||
{{< callout warning >}}
|
||||
##### 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 >}}
|
||||
|
||||
## Help text
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
|
|||
<div class="input-group-prepend">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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">
|
||||
<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">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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:
|
||||
|
||||
- `<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`
|
||||
- Providing a `title` attribute
|
||||
- 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.
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav">
|
||||
<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 class="nav-item">
|
||||
<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>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<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="#">Pricing</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">
|
||||
<ul class="navbar-nav">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
|
||||
<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 class="nav-item">
|
||||
<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>
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<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 class="nav-item">
|
||||
<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">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<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 class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
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 >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
|
|
@ -22,7 +22,7 @@ Use the border spinners for a lightweight loading indicator.
|
|||
|
||||
{{< example >}}
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
|
|||
{{< spinner.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="spinner-border text-{{ .name }}" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{< /spinner.inline >}}
|
||||
|
|
@ -50,7 +50,7 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
|
|||
|
||||
{{< example >}}
|
||||
<div class="spinner-grow" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
|
|||
{{< spinner.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="spinner-grow text-{{ .name }}" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{- end -}}
|
||||
{{< /spinner.inline >}}
|
||||
|
|
@ -76,7 +76,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
|
|||
|
||||
{{< example >}}
|
||||
<div class="spinner-border m-5" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
|||
{{< example >}}
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -106,7 +106,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
|||
{{< example >}}
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -116,7 +116,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
|||
{{< example >}}
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -127,10 +127,10 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
|
|||
|
||||
{{< example >}}
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -138,10 +138,10 @@ Or, use custom CSS or inline styles to change the dimensions as needed.
|
|||
|
||||
{{< example >}}
|
||||
<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 class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
|
|||
{{< example >}}
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<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 class="btn btn-primary" type="button" disabled>
|
||||
<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 >}}
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<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 class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ The parameters for the template context are:
|
|||
## Examples
|
||||
|
||||
<div class="small">
|
||||
Checked toggle and with "sr-only" label.
|
||||
Checked toggle and with "visually-hidden" label.
|
||||
</div>
|
||||
{{< mustache template="core/toggle" >}}
|
||||
{
|
||||
|
|
@ -38,7 +38,7 @@ Checked toggle and with "sr-only" label.
|
|||
}],
|
||||
"title": "Toggle Enabled",
|
||||
"label": "Enable/disable status",
|
||||
"labelclasses": "sr-only"
|
||||
"labelclasses": "visually-hidden"
|
||||
}
|
||||
{{< /mustache >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ tip: you can use heading classes to style a native heading tag differently.
|
|||
|
||||
## For screenreaders
|
||||
|
||||
<h2 class="sr-only">Title for screen readers</h2>
|
||||
<a class="sr-only-focusable" href="#content">Skip to main content</a>
|
||||
<h2 class="visually-hidden">Title for screen readers</h2>
|
||||
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
|
||||
|
||||
## Text truncation
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
class="mform d-flex flex-wrap align-items-center simplesearchform p-2 justify-content-center">
|
||||
<div class="input-group w-100" data-region="docsearch">
|
||||
<label for="searchinput-componentlibrary">
|
||||
<span class="sr-only">Search component library</span>
|
||||
<span class="visually-hidden">Search component library</span>
|
||||
</label>
|
||||
<input type="text" id="searchinput-componentlibrary" class="form-control rounded" placeholder="Search"
|
||||
aria-label="Search component library" name="clsearch" data-region="input" autocomplete="off">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
##### 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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<div data-region="mustacherendered" class="{{ with .Get "class" }}{{ . }}{{ end }}">
|
||||
<div class="d-flex justify-content-center my-5">
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,6 @@
|
|||
disabled
|
||||
{{/attributes}}
|
||||
{{$label}}Enable/disable status{{/label}}
|
||||
{{$labelclasses}}sr-only{{/labelclasses}}
|
||||
{{$labelclasses}}visually-hidden{{/labelclasses}}
|
||||
{{/ core/toggle }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
<strong>{{#str}}headinglocal, tool_customlang{{/str}}</strong>
|
||||
</div>
|
||||
<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>
|
||||
{{#checkupdated}}
|
||||
<div class="uptodatewrapper">
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
}}
|
||||
<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">
|
||||
{{#filteroptions}}
|
||||
<option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<h3>{{#str}} selectacourse {{/str}}</h3>
|
||||
<div class="searchbar input-group w-50" role="search">
|
||||
<label for="searchinput">
|
||||
<span class="sr-only">{{#str}} searchcourses, tool_moodlenet {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} searchcourses, tool_moodlenet {{/str}}</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
data-region="search-input"
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<div class="clear d-none">
|
||||
<button class="btn p-0" data-region="clear-icon">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</span>
|
||||
{{/coursename}}
|
||||
{{$coursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
<span class="categoryname text-truncate">
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
}}
|
||||
<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">
|
||||
{{#filteroptions}}
|
||||
<option value="{{value}}" {{#selected}}selected="selected"{{/selected}}>{{{label}}}</option>
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ class aiplacement_action_management_table extends flexible_table implements dyna
|
|||
],
|
||||
'title' => $labelstr,
|
||||
'label' => $labelstr,
|
||||
'labelclasses' => 'sr-only',
|
||||
'labelclasses' => 'visually-hidden',
|
||||
];
|
||||
|
||||
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ class aiprovider_action_management_table extends flexible_table implements dynam
|
|||
],
|
||||
'title' => $labelstr,
|
||||
'label' => $labelstr,
|
||||
'labelclasses' => 'sr-only',
|
||||
'labelclasses' => 'visually-hidden',
|
||||
];
|
||||
|
||||
return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="ai-drawer-header">
|
||||
<button id="ai-drawer-close" class="btn ai-drawer-button" type="button" data-action="course-summarise">
|
||||
{{#pix}} e/cancel, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} closedrawer, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} closedrawer, core {{/str}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ai-drawer-body" data-hasdata="0" data-cancelled="0">
|
||||
|
|
|
|||
|
|
@ -412,7 +412,7 @@ abstract class backup_helper {
|
|||
}
|
||||
|
||||
$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(
|
||||
'div',
|
||||
$OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)),
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
aria-haspopup="true"
|
||||
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>
|
||||
<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>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
|
||||
>
|
||||
{{#str}} addtofavourites, block_myoverview {{/str}}
|
||||
<div class="sr-only">
|
||||
<div class="visually-hidden">
|
||||
{{#str}} aria:addtofavourites, block_myoverview {{/str}} {{{fullname}}}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
|
||||
>
|
||||
{{#str}} removefromfavourites, block_myoverview {{/str}}
|
||||
<div class="sr-only">
|
||||
<div class="visually-hidden">
|
||||
{{#str}} aria:removefromfavourites, block_myoverview {{/str}} {{{fullname}}}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
|
||||
>
|
||||
{{#str}} show, block_myoverview {{/str}}
|
||||
<div class="sr-only">
|
||||
<div class="visually-hidden">
|
||||
{{#str}} aria:showcourse, block_myoverview, {{fullname}} {{/str}}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
|
||||
>
|
||||
{{#str}} hidecourse, block_myoverview {{/str}}
|
||||
<div class="sr-only">
|
||||
<div class="visually-hidden">
|
||||
{{#str}} aria:hidecourse, block_myoverview, {{fullname}} {{/str}}
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,6 @@
|
|||
}
|
||||
}}
|
||||
<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}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
{{/progress}}
|
||||
{{$coursename}}
|
||||
<span class="multiline" title="{{fullname}}">
|
||||
<span class="sr-only">{{{fullname}}}</span>
|
||||
<span class="visually-hidden">{{{fullname}}}</span>
|
||||
<span aria-hidden="true">
|
||||
{{#shortentext}}55, {{{fullname}}} {{/shortentext}}
|
||||
</span>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
{{/coursename}}
|
||||
{{$coursecategory}}
|
||||
{{#showcoursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
<span class="categoryname text-truncate">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
{{#showcoursecategory}}
|
||||
<div class="px-1">|</div>
|
||||
{{/showcoursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:courseshortname, core_course{{/str}}
|
||||
</span>
|
||||
<div>{{{shortname}}}</div>
|
||||
|
|
@ -63,14 +63,14 @@
|
|||
{{/showshortname}}
|
||||
<a href="{{viewurl}}" class="aalink coursename">
|
||||
{{> core_course/favouriteicon }}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursename, core_course{{/str}}
|
||||
</span>
|
||||
{{{fullname}}}
|
||||
</a>
|
||||
{{#showcoursecategory}}
|
||||
<div class="text-muted muted d-flex flex-wrap">
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
<span class="categoryname">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
{{#showcoursecategory}}
|
||||
<div class="px-1">|</div>
|
||||
{{/showcoursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:courseshortname, core_course{{/str}}
|
||||
</span>
|
||||
<div>{{{shortname}}}</div>
|
||||
|
|
@ -63,13 +63,13 @@
|
|||
{{/showshortname}}
|
||||
<a href="{{viewurl}}" class="aalink coursename">
|
||||
{{> core_course/favouriteicon }}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursename, core_course{{/str}}
|
||||
</span>
|
||||
{{{fullname}}}
|
||||
</a>
|
||||
{{$coursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
{{#showcoursecategory}}
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</div>
|
||||
{{/visible}}
|
||||
<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}}}
|
||||
</div>
|
||||
{{#hasprogress}}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
{{< core_course/coursecard }}
|
||||
{{$coursecategory}}
|
||||
{{#showcoursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
<span class="text-truncate">{{{coursecategory}}}</span>
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ class core_calendar_renderer extends plugin_renderer_base {
|
|||
$labelattributes = [];
|
||||
if (empty($label)) {
|
||||
$label = get_string('listofcourses');
|
||||
$labelattributes['class'] = 'sr-only';
|
||||
$labelattributes['class'] = 'visually-hidden';
|
||||
}
|
||||
|
||||
$filterid = 'calendar-course-filter';
|
||||
|
|
|
|||
|
|
@ -40,4 +40,4 @@
|
|||
{{/filter_selector}}
|
||||
{{> core_calendar/add_event_button}}
|
||||
</div>
|
||||
<div aria-live="polite" class="sr-only calendar-announcements"></div>
|
||||
<div aria-live="polite" class="visually-hidden calendar-announcements"></div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<tr>
|
||||
{{# daynames }}
|
||||
<th class="header text-xs-center">
|
||||
<span class="sr-only">{{fullname}}</span>
|
||||
<span class="visually-hidden">{{fullname}}</span>
|
||||
<span aria-hidden="true">{{shortname}}</span>
|
||||
</th>
|
||||
{{/ daynames }}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
data-new-event-timestamp="{{neweventtimestamp}}"{{#istoday}} title="{{#str}} today, core_calendar {{/str}}"{{/istoday}}
|
||||
{{#hasevents}} data-title="{{viewdaylinktitle}}"{{/hasevents}}>
|
||||
<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}}
|
||||
<a data-action="view-day-link" href="#" class="aalink day" aria-label="{{viewdaylinktitle}}"
|
||||
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
{{/hasevents}}
|
||||
</div>
|
||||
<div class="d-md-none hidden-desktop hidden-tablet">
|
||||
<span class="sr-only">{{daytitle}}</span>
|
||||
<span class="visually-hidden">{{daytitle}}</span>
|
||||
{{#hasevents}}
|
||||
<a data-action="view-day-link" href="#" class="day aalink" aria-label="{{viewdaylinktitle}}"
|
||||
data-year="{{date.year}}" data-month="{{date.mon}}" data-day="{{mday}}"
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<tr>
|
||||
{{# daynames }}
|
||||
<th class="header text-xs-center">
|
||||
<span class="sr-only">{{fullname}}</span>
|
||||
<span class="visually-hidden">{{fullname}}</span>
|
||||
<span aria-hidden="true">{{shortname}}</span>
|
||||
</th>
|
||||
{{/ daynames }}
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
This is the timestamp for this month.
|
||||
}} data-day-timestamp="{{timestamp}}"{{!
|
||||
}}>{{!
|
||||
}}<span class="sr-only">{{daytitle}}</span>
|
||||
}}<span class="visually-hidden">{{daytitle}}</span>
|
||||
{{#popovertitle}}
|
||||
{{< core_calendar/minicalendar_day_link }}
|
||||
{{$day}}{{mday}}{{/day}}
|
||||
|
|
|
|||
|
|
@ -507,7 +507,7 @@ class comment {
|
|||
$html .= html_writer::start_tag('div', array('class' => 'db'));
|
||||
$html .= html_writer::tag('label',
|
||||
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::end_tag('div'); // .db
|
||||
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ class bankcontent implements renderable, templatable {
|
|||
$this->context->id,
|
||||
$strchoosecontext
|
||||
);
|
||||
$singleselect->set_label($strchoosecontext, ['class' => 'sr-only']);
|
||||
$singleselect->set_label($strchoosecontext, ['class' => 'visually-hidden']);
|
||||
$data->allowedcontexts = $singleselect->export_for_template($output);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@ class core_course_management_renderer extends plugin_renderer_base {
|
|||
$html .= html_writer::start_div('float-start ' . $checkboxclass);
|
||||
$html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
|
||||
$html .= html_writer::empty_tag('input', $bcatinput);
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
|
||||
$html .= html_writer::tag('label', $labeltext, array(
|
||||
'class' => 'custom-control-label',
|
||||
'for' => 'categorylistitem' . $category->id));
|
||||
|
|
@ -626,7 +626,7 @@ class core_course_management_renderer extends plugin_renderer_base {
|
|||
$html .= html_writer::start_div('float-start ' . $checkboxclass);
|
||||
$html .= html_writer::start_div('custom-control custom-checkbox me-1 ');
|
||||
$html .= html_writer::empty_tag('input', $bulkcourseinput);
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
|
||||
$html .= html_writer::tag('label', $labeltext, array(
|
||||
'class' => 'custom-control-label',
|
||||
'for' => 'courselistitem' . $course->id));
|
||||
|
|
@ -1205,7 +1205,7 @@ class core_course_management_renderer extends plugin_renderer_base {
|
|||
if ($bulkcourseinput) {
|
||||
$html .= html_writer::start_div('custom-control custom-checkbox me-1');
|
||||
$html .= html_writer::empty_tag('input', $bulkcourseinput);
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'sr-only');
|
||||
$labeltext = html_writer::span(get_string('bulkactionselect', 'moodle', $text), 'visually-hidden');
|
||||
$html .= html_writer::tag('label', $labeltext, array(
|
||||
'class' => 'custom-control-label',
|
||||
'for' => 'coursesearchlistitem' . $course->id));
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ class activity_navigation implements renderable, templatable {
|
|||
// Render the activity list dropdown menu if available.
|
||||
if (!empty($activitylist)) {
|
||||
$select = new url_select($activitylist, '', array('' => get_string('jumpto')));
|
||||
$select->set_label(get_string('jumpto'), array('class' => 'sr-only'));
|
||||
$select->set_label(get_string('jumpto'), ['class' => 'visually-hidden']);
|
||||
$select->attributes = array('id' => 'jump-to-activity');
|
||||
$this->activitylist = $select;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ class category_action_bar extends manage_categories_action_bar {
|
|||
}
|
||||
$currenturl = new moodle_url($this->page->url, ['categoryid' => $this->category->id]);
|
||||
$select = new \url_select($options, $currenturl, null);
|
||||
$select->set_label(get_string('categories'), ['class' => 'sr-only']);
|
||||
$select->set_label(get_string('categories'), ['class' => 'visually-hidden']);
|
||||
$select->class .= ' text-truncate w-100';
|
||||
return $select->export_for_template($output);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ class completion_action_bar implements templatable, renderable {
|
|||
);
|
||||
$selectmenu->set_label(
|
||||
get_string('coursecompletionnavigation', 'completion'),
|
||||
['class' => 'sr-only']
|
||||
['class' => 'visually-hidden']
|
||||
);
|
||||
|
||||
return [
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ class manage_categories_action_bar implements \renderable {
|
|||
|
||||
if ($content) {
|
||||
$urlselect = new \url_select($content, $activeurl, null);
|
||||
$urlselect->set_label(get_string('viewing'), ['class' => 'sr-only']);
|
||||
$urlselect->set_label(get_string('viewing'), ['class' => 'visually-hidden']);
|
||||
return $urlselect->export_for_template($output);
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ class manage_categories_action_bar implements \renderable {
|
|||
}
|
||||
|
||||
$select = new \url_select($options, $currenturl);
|
||||
$select->set_label(get_string('category'), ['class' => 'sr-only']);
|
||||
$select->set_label(get_string('category'), ['class' => 'visually-hidden']);
|
||||
$select->class .= ' text-truncate w-100';
|
||||
return $select->export_for_template($output);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
data-action="toggleSelectionCm"
|
||||
data-bulkcheckbox="1"
|
||||
>
|
||||
<label class="sr-only" for="cmCheckbox{{cmid}}">
|
||||
<label class="visually-hidden" for="cmCheckbox{{cmid}}">
|
||||
{{#str}} selectcm, core_courseformat, {{activityname}}{{/str}}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<div class="d-flex mt-2 text-success" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
|
||||
<div>
|
||||
{{#pix}}i/checked{{/pix}}
|
||||
<span class="sr-only">{{#str}}completion_automatic:done, core_course{{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}}completion_automatic:done, core_course{{/str}}</span>
|
||||
</div>
|
||||
<span>{{description}}</span>
|
||||
</div>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<div class="d-flex mt-2 text-danger" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
|
||||
<div>
|
||||
{{#pix}}e/cancel{{/pix}}
|
||||
<span class="sr-only">{{#str}}completion_automatic:failed, core_course{{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}}completion_automatic:failed, core_course{{/str}}</span>
|
||||
</div>
|
||||
<span>{{description}}</span>
|
||||
</div>
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<div class="d-flex mt-2" role="listitem" {{#accessibledescription}}title="{{.}}" aria-label="{{.}}"{{/accessibledescription}}>
|
||||
<div>
|
||||
{{#pix}}i/dot{{/pix}}
|
||||
<span class="sr-only">{{#str}}completion_automatic:todo, core_course{{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}}completion_automatic:todo, core_course{{/str}}</span>
|
||||
</div>
|
||||
<span>{{description}}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,11 +74,11 @@
|
|||
>
|
||||
<span class="collapsed-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
|
||||
{{#pix}} t/collapsedchevron, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
|
||||
</span>
|
||||
<span class="expanded-icon icon-no-margin me-1" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
|
||||
{{#pix}} t/expandedchevron, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
data-action="toggleSelectionSection"
|
||||
data-bulkcheckbox="1"
|
||||
>
|
||||
<label class="sr-only" for="sectionCheckbox{{id}}">
|
||||
<label class="visually-hidden" for="sectionCheckbox{{id}}">
|
||||
{{#selecttext}} {{selecttext}} {{/selecttext}}
|
||||
{{^selecttext}}
|
||||
{{#str}} selectsection, core_courseformat, {{name}}{{/str}}
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
<span class="dir-ltr-hide">
|
||||
{{#pix}}t/left, moodle, {{#str}}gotosection, course, {{name}}{{/str}}{{/pix}}
|
||||
</span>
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}gotosection, course, {{name}}{{/str}}
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -64,12 +64,12 @@
|
|||
aria-label="{{name}}">
|
||||
<span class="expanded-icon icon-no-margin p-2" title="{{#str}} collapse, core {{/str}}">
|
||||
{{#pix}} t/expandedchevron, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
|
||||
</span>
|
||||
<span class="collapsed-icon icon-no-margin p-2" title="{{#str}} expand, core {{/str}}">
|
||||
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
|
||||
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
|
||||
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<h{{headinglevel}} class="h4 sectionname course-content-item d-flex align-self-stretch align-items-center mb-0"
|
||||
|
|
|
|||
|
|
@ -83,12 +83,12 @@
|
|||
title="{{#str}} expand, core {{/str}}">
|
||||
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
|
||||
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
|
||||
<span class="sr-only">{{#str}} expand, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} expand, core {{/str}}</span>
|
||||
</span>
|
||||
<span class="expanded-icon icon-no-margin me-1"
|
||||
title="{{#str}} collapse, core {{/str}}">
|
||||
{{#pix}} t/expandedchevron, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} collapse, core {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} collapse, core {{/str}}</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="{{{sectionurl}}}"
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<form class="row">
|
||||
<div class="input-group pt-4 pb-1 col-md-6">
|
||||
<label for="search">
|
||||
<span class="sr-only">{{#str}} searchactivitiesbyname, course {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} searchactivitiesbyname, course {{/str}}</span>
|
||||
</label>
|
||||
<input type="text" name="search" id="search" class="form-control rounded-start" autocomplete="off"
|
||||
placeholder="{{#str}}search, core {{/str}}" {{#query}} value="{{query}}" autofocus {{/query}}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-outline-secondary rounded-end">
|
||||
<i class="icon fa fa-search fa-fw m-0" aria-hidden="true"></i>
|
||||
<span class="sr-only">{{#str}}submitsearch, course {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}}submitsearch, course {{/str}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
"labelattributes":[
|
||||
{
|
||||
"name":"class",
|
||||
"value":"sr-only"
|
||||
"value":"visually-hidden"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
data-course-id="{{{id}}}">
|
||||
<a href="{{viewurl}}" tabindex="-1">
|
||||
<div class="card-img-top" style='background-image: url("{{{courseimage}}}");'>
|
||||
<span class="sr-only">{{fullname}}</span>
|
||||
<span class="visually-hidden">{{fullname}}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="card-body pe-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<div class="w-100 text-truncate">
|
||||
{{#showshortname}}
|
||||
<div class="text-muted muted d-flex mb-1 flex-wrap">
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:courseshortname, core_course{{/str}}
|
||||
</span>
|
||||
<div>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
{{/showshortname}}
|
||||
<a href="{{viewurl}}" class="aalink coursename me-2 mb-1">
|
||||
{{> core_course/favouriteicon }}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursename, core_course{{/str}}
|
||||
</span>
|
||||
{{$coursename}}{{/coursename}}
|
||||
|
|
|
|||
|
|
@ -61,12 +61,12 @@
|
|||
title="{{#str}} expandcategory, core, {{formattedname}} {{/str}}">
|
||||
<span class="dir-rtl-hide">{{#pix}} t/collapsedchevron, core {{/pix}}</span>
|
||||
<span class="dir-ltr-hide">{{#pix}} t/collapsedchevron_rtl, core {{/pix}}</span>
|
||||
<span class="sr-only">{{#str}} expandcategory, core, {{formattedname}} {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} expandcategory, core, {{formattedname}} {{/str}}</span>
|
||||
</span>
|
||||
<span class="expanded-icon icon-no-margin me-1"
|
||||
title="{{#str}} collapsecategory, core, {{formattedname}} {{/str}}">
|
||||
{{#pix}} t/expandedchevron, core {{/pix}}
|
||||
<span class="sr-only">{{#str}} collapsecategory, core, {{formatedname}} {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} collapsecategory, core, {{formatedname}} {{/str}}</span>
|
||||
</span>
|
||||
<img class="activityicon ms-4" src="{{icon}}" alt="" aria-hidden="true">
|
||||
<h2 class="activityname ms-3 mb-0">{{{formattedname}}}</h2>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@
|
|||
aria-hidden="{{^isfavourite}}true{{/isfavourite}}{{#isfavourite}}false{{/isfavourite}}"
|
||||
>
|
||||
{{#pix}} i/star, core, {{#str}} favourite, core_course {{/str}} {{/pix}}
|
||||
<span class="sr-only">{{#str}} aria:favourite, core_course {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} aria:favourite, core_course {{/str}}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
{{/legacyitem}}
|
||||
<button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction" data-action="show-option-summary" tabindex="-1">
|
||||
<span aria-hidden="true">{{#pix}} docs, core {{/pix}}</span>
|
||||
<span class="sr-only">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
"labelattributes":[
|
||||
{
|
||||
"name":"class",
|
||||
"value":"sr-only"
|
||||
"value":"visually-hidden"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
{{$coursename}} {{{fullname}}} {{/coursename}}
|
||||
{{$coursecategory}}
|
||||
{{#showcoursecategory}}
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}}aria:coursecategory, core_course{{/str}}
|
||||
</span>
|
||||
<div class="text-truncate">{{{coursecategory}}}</div>
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ class general_action_bar extends action_bar {
|
|||
}
|
||||
|
||||
$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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
type="button"
|
||||
>
|
||||
{{# 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 class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 fw-bold mb-0 ms-auto"
|
||||
type="button"
|
||||
|
|
@ -83,11 +83,11 @@
|
|||
aria-controls="criteria-{{id}}">
|
||||
<span class="collapsed-icon">
|
||||
{{#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 class="expanded-icon">
|
||||
{{#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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score"
|
||||
min="0" max="{{maxscore}}"
|
||||
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}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
type="button"
|
||||
>
|
||||
{{#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>
|
||||
{{/hascomments}}
|
||||
</div>
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{/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>
|
||||
|
|
|
|||
|
|
@ -404,7 +404,7 @@ class gradingform_rubric_renderer extends plugin_renderer_base {
|
|||
'class' => '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);
|
||||
$rubrictemplate .= $rubrictable;
|
||||
if ($mode == gradingform_rubric_controller::DISPLAY_EDIT_FULL) {
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@
|
|||
aria-controls="criteria-{{id}}">
|
||||
<span class="collapsed-icon">
|
||||
{{#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 class="expanded-icon">
|
||||
{{#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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1520,7 +1520,7 @@ class grade_report_grader extends grade_report {
|
|||
'class' => 'gradeitemheader',
|
||||
'aria-describedby' => $describedbyid
|
||||
]);
|
||||
$courseheader .= html_writer::div($showing, 'sr-only', [
|
||||
$courseheader .= html_writer::div($showing, 'visually-hidden', [
|
||||
'id' => $describedbyid
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
{{/ core/search_input_auto }}
|
||||
<form class="columnsdropdownform flex-column h-100">
|
||||
<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">
|
||||
{{>gradereport_grader/collapse/collapseresults}}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -25,5 +25,5 @@
|
|||
}}
|
||||
<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>
|
||||
<span class="sr-only">{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}}reopencolumn, gradereport_grader, {{name}}{{/str}}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<form>
|
||||
<div class="alert alert-warning">
|
||||
{{#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">
|
||||
<input class="form-check-input" type="checkbox" value="1" id="override">
|
||||
<label class="form-check-label" for="override">
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<p class ="fw-bold">
|
||||
{{#str}}bulkinsertvalue, gradereport_singleview{{/str}}
|
||||
</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}}>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
{{#datatype}}data-type="{{datatype}}"{{/datatype}}
|
||||
{{#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>
|
||||
<span class="sr-only">{{#str}} cellactions, gradereport_grader {{/str}}</span>
|
||||
<span class="visually-hidden">{{#str}} cellactions, gradereport_grader {{/str}}</span>
|
||||
</button>
|
||||
|
||||
<div role="menu" class="dropdown-menu">
|
||||
|
|
|
|||
2
lib/amd/build/copy_to_clipboard.min.js
vendored
2
lib/amd/build/copy_to_clipboard.min.js
vendored
|
|
@ -26,6 +26,6 @@ define("core/copy_to_clipboard",["core/str","core/toast","core/prefetch"],(funct
|
|||
* Copy to clipboard
|
||||
* </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)&©Button.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)&©Button.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
|
||||
File diff suppressed because one or more lines are too long
2
lib/amd/build/datafilter/filtertype.min.js
vendored
2
lib/amd/build/datafilter/filtertype.min.js
vendored
|
|
@ -5,6 +5,6 @@ define("core/datafilter/filtertype",["exports","core/form-autocomplete","core/da
|
|||
* @module core/datafilter/filtertype
|
||||
* @copyright 2020 Andrew Nicols <andrew@nicols.co.uk>
|
||||
* @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
|
||||
File diff suppressed because one or more lines are too long
2
lib/amd/build/dropzone.min.js
vendored
2
lib/amd/build/dropzone.min.js
vendored
|
|
@ -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
|
||||
File diff suppressed because one or more lines are too long
2
lib/amd/build/local/reactive/srlogger.min.js
vendored
2
lib/amd/build/local/reactive/srlogger.min.js
vendored
|
|
@ -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
|
||||
|
|
@ -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"}
|
||||
|
|
@ -101,11 +101,11 @@ const addEventListeners = () => {
|
|||
// 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.
|
||||
// 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.
|
||||
const copyRegion = document.createElement('textarea');
|
||||
copyRegion.value = textToCopy;
|
||||
copyRegion.classList.add('sr-only');
|
||||
copyRegion.classList.add('visually-hidden');
|
||||
document.body.appendChild(copyRegion);
|
||||
|
||||
copyNodeContentToClipboard(copyButton, copyRegion);
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default class {
|
|||
// Create a hidden label for the filter value.
|
||||
const filterValueLabel = document.createElement('label');
|
||||
filterValueLabel.setAttribute('for', dataSource.id);
|
||||
filterValueLabel.classList.add('sr-only');
|
||||
filterValueLabel.classList.add('visually-hidden');
|
||||
filterValueLabel.innerText = dataSource.getAttribute('data-field-title');
|
||||
|
||||
// Append this label to the filter value container.
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ const DropZone = class {
|
|||
this.getFileElementFromEvent(e).click();
|
||||
});
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
// 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.
|
||||
* 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
|
||||
* @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
|
||||
*/
|
||||
|
|
@ -58,7 +58,7 @@ export default class SRLogger extends Logger {
|
|||
if (!loggerFeedback) {
|
||||
loggerFeedback = document.createElement('div');
|
||||
loggerFeedback.id = SRLogger.liveRegionId;
|
||||
loggerFeedback.classList.add('sr-only');
|
||||
loggerFeedback.classList.add('visually-hidden');
|
||||
loggerFeedback.setAttribute('aria-live', 'polite');
|
||||
document.body.append(loggerFeedback);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -631,7 +631,7 @@ class secondary extends view {
|
|||
}
|
||||
|
||||
$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;
|
||||
} else {
|
||||
return $this->get_other_overflow_menu_data($activenode);
|
||||
|
|
@ -684,7 +684,7 @@ class secondary extends view {
|
|||
}
|
||||
$selectdata = static::create_menu_element([$menunode], false);
|
||||
$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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3812,10 +3812,10 @@ EOD;
|
|||
'data-droptarget' => '1',
|
||||
];
|
||||
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);
|
||||
} 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);
|
||||
}
|
||||
|
|
@ -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'])) {
|
||||
return html_writer::div($heading, 'sr-only');
|
||||
return html_writer::div($heading, 'visually-hidden');
|
||||
}
|
||||
|
||||
$contextheader = new context_header($heading, $headinglevel, $imagedata, $userbuttons);
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ class participants_action_bar implements renderable {
|
|||
$activeurl = $activeurl ?: $this->find_active_page($urlselectcontent, URL_MATCH_BASE);
|
||||
|
||||
$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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ class report_helper {
|
|||
|
||||
}
|
||||
$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(
|
||||
'div',
|
||||
$OUTPUT->render_from_template('core/tertiary_navigation_selector', $selectmenu->export_for_template($OUTPUT)),
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ var CSS = {
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string "h5poptions" component}}' +
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -113,7 +113,7 @@ var CSS = {
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string "h5poptions" component}}' +
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ var CSS = {
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string "h5poptions" component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string "h5poptions" component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string "h5poptions" component}}' +
|
||||
|
|
|
|||
|
|
@ -401,7 +401,7 @@ var COMPONENTNAME = 'atto_media',
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string name component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string name component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string name component}}' +
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -401,7 +401,7 @@ var COMPONENTNAME = 'atto_media',
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string name component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string name component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string name component}}' +
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@ var COMPONENTNAME = 'atto_media',
|
|||
'<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'<span class="sr-only">{{get_string name component}}</span>' +
|
||||
'<span class="visually-hidden">{{get_string name component}}</span>' +
|
||||
'</a>' +
|
||||
'<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' +
|
||||
'{{get_string name component}}' +
|
||||
|
|
|
|||
|
|
@ -192,7 +192,9 @@ Y.extend(Editor, Y.Base, {
|
|||
|
||||
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.appendChild(description);
|
||||
this._wrapper.setAttribute('aria-describedby', description.generateID());
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -190,7 +190,9 @@ Y.extend(Editor, Y.Base, {
|
|||
|
||||
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.appendChild(description);
|
||||
this._wrapper.setAttribute('aria-describedby', description.generateID());
|
||||
|
|
|
|||
4
lib/editor/atto/yui/src/editor/js/editor.js
vendored
4
lib/editor/atto/yui/src/editor/js/editor.js
vendored
|
|
@ -190,7 +190,9 @@ Y.extend(Editor, Y.Base, {
|
|||
|
||||
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.appendChild(description);
|
||||
this._wrapper.setAttribute('aria-describedby', description.generateID());
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<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="spinner-border tiny-aiplacement-spinner-style" role="status">
|
||||
<span class="sr-only">
|
||||
<span class="visually-hidden">
|
||||
{{#str}} loading, tiny_aiplacement{{/str}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue