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
roland04 · Nov 8, 2024 · b44f9ec · b44f9ec
1 parent d015c4c
commit b44f9ec
Show file tree

Hide file tree

Showing 220 changed files with 464 additions and 439 deletions.
diff --git a/admin/classes/table/plugin_management_table.php b/admin/classes/table/plugin_management_table.php
@@ -322,7 +322,7 @@ protected function col_enabled(stdClass $row): string {
             ],
             'title' => $labelstr,
             'label' => $labelstr,
-            'labelclasses' => 'sr-only',
+            'labelclasses' => 'visually-hidden',
         ];
 
         return $OUTPUT->render_from_template('core_admin/setting_configtoggle', $params);

diff --git a/admin/templates/header_search_input.mustache b/admin/templates/header_search_input.mustache
@@ -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>

diff --git a/admin/templates/setting_configduration.mustache b/admin/templates/setting_configduration.mustache
@@ -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>

diff --git a/admin/templates/setting_configfilesize.mustache b/admin/templates/setting_configfilesize.mustache
@@ -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>

diff --git a/admin/templates/setting_configtime.mustache b/admin/templates/setting_configtime.mustache
@@ -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>

diff --git a/admin/templates/setting_configtoggle.mustache b/admin/templates/setting_configtoggle.mustache
@@ -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}}"

diff --git a/admin/templates/themeselector/theme_card.mustache b/admin/templates/themeselector/theme_card.mustache
@@ -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}}

diff --git a/admin/tool/componentlibrary/content/bootstrap/components/badge.md b/admin/tool/componentlibrary/content/bootstrap/components/badge.md
@@ -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 >}}
 

diff --git a/admin/tool/componentlibrary/content/bootstrap/components/carousel.md b/admin/tool/componentlibrary/content/bootstrap/components/carousel.md
@@ -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 >}}

diff --git a/admin/tool/componentlibrary/content/bootstrap/components/dropdowns.md b/admin/tool/componentlibrary/content/bootstrap/components/dropdowns.md
@@ -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>