L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-80183 message: improve ARIA labelling of total/unread counts.

Browse Source
This commit is contained in:
Paul Holden
2024-02-22 15:53:00 +00:00
parent 45f83c203f
commit a1e9bd2dae
4 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
message/amd/build/message_drawer_view_overview_section.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
message/amd/build/message_drawer_view_overview_section.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
message/amd/src/message_drawer_view_overview_section.js
+6 -4
View File
@@ -65,6 +65,7 @@ function(
SECTION_TOTAL_COUNT: '[data-region="section-total-count"]',
SECTION_TOTAL_COUNT_CONTAINER: '[data-region="section-total-count-container"]',
SECTION_UNREAD_COUNT: '[data-region="section-unread-count"]',
SECTION_UNREAD_COUNT_CONTAINER: '[data-region="section-unread-count-container"]',
PLACEHOLDER_CONTAINER: '[data-region="placeholder-container"]'
};
@@ -120,7 +121,7 @@ function(
countElement.text(count);
container.removeClass('hidden');
Str.get_string('totalconversations', 'core_message', count).done(function(string) {
container.attr('aria-label', string);
$('#' + container.attr('aria-labelledby')).text(string);
});
var numPlaceholders = count > 20 ? 20 : count;
@@ -149,15 +150,16 @@ function(
* @param {Number} count The unread count
*/
var renderUnreadCount = function(root, count) {
var countElement = root.find(SELECTORS.SECTION_UNREAD_COUNT);
var container = root.find(SELECTORS.SECTION_UNREAD_COUNT_CONTAINER);
var countElement = container.find(SELECTORS.SECTION_UNREAD_COUNT);
countElement.text(count);
Str.get_string('unreadconversations', 'core_message', count).done(function(string) {
countElement.attr('aria-label', string);
$('#' + container.attr('aria-labelledby')).text(string);
});
if (count > 0) {
countElement.removeClass('hidden');
container.removeClass('hidden');
}
};
message/templates/message_drawer_view_overview_section.mustache
+13 -6
View File
@@ -54,19 +54,26 @@
{{#pix}} t/expanded, core {{/pix}}
</span>
<span class="font-weight-bold">{{$title}}{{/title}}</span>
<small class="hidden ml-1" data-region="section-total-count-container">
(<span aria-hidden="true" data-region="section-total-count">{{count.total}}</span>{{!
}}<span class="sr-only">{{#str}} totalconversations, core_message, {{count.total}} {{/str}}</span>)
<small
class="hidden ml-1"
data-region="section-total-count-container" aria-labelledby="{{$region}}{{/region}}-total-count-label"
>
(<span aria-hidden="true" data-region="section-total-count">{{count.total}}</span>)
<span class="sr-only" id="{{$region}}{{/region}}-total-count-label">
{{#str}} totalconversations, core_message, {{count.total}} {{/str}}
</span>
</small>
<span class="hidden ml-2" data-region="loading-icon-container">
{{> core/loading }}
</span>
<span
class="{{^count.unread}}hidden{{/count.unread}} badge rounded-pill bg-primary text-white ml-auto"
data-region="section-unread-count"
data-region="section-unread-count-container" aria-labelledby="{{$region}}{{/region}}-unread-count-label"
>
<span aria-hidden="true">{{count.unread}}</span>
<span class="sr-only">{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}</span>
<span aria-hidden="true" data-region="section-unread-count">{{count.unread}}</span>
<span class="sr-only" id="{{$region}}{{/region}}-unread-count-label">
{{#str}} unreadconversations, core_message, {{count.unread}} {{/str}}
</span>
</span>
</button>
</div>