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 2024-11-08 10:35:21 +01:00
parent 0888a6d324
commit f9abc562f5
220 changed files with 469 additions and 439 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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">

View file

@ -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">

View file

@ -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}}

View file

@ -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>