mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-25 10:26:17 +02:00
Code Issues 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:50:27 +00:00
parent 45f83c203f
commit a1e9bd2dae
No known key found for this signature in database
GPG Key ID: A81A96D6045F6164
4 changed files with 21 additions and 12 deletions

2
message/amd/build/message_drawer_view_overview_section.min.js vendored

File diff suppressed because one or more lines are too long

2
message/amd/build/message_drawer_view_overview_section.min.js.map

File diff suppressed because one or more lines are too long

10
message/amd/src/message_drawer_view_overview_section.js

@ -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');
}
};

19
message/templates/message_drawer_view_overview_section.mustache

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