MDL-86998 message: Fix accessibility issues in notification settings

* Fix missing labels for the checkboxes that enable notification plugins
* Add an accessible name for the Default notification preferences table
* Fix missing table header for the preference column of the Default
  notification preferences table.
* Accessibility Behat test coverage for the Notification settings
  admin page
* Remove the unnecessary title attributes for the visually hidden labels
This commit is contained in:
Jun Pataleta
2025-11-11 17:30:14 +08:00
parent f4ec6dcd7b
commit ac52b10f9f
4 changed files with 22 additions and 12 deletions
+1
View File
@@ -69,6 +69,7 @@ $string['disallowed'] = 'Locked off';
$string['editmessages'] = 'Edit messages';
$string['emailtagline'] = 'This is a copy of a message sent to you on the site {$a->sitename}. Go to <a href="{$a->url}">{$a->url}</a> to reply.';
$string['enabled'] = 'Enabled';
$string['enablenotificationplugin'] = 'Enable notification plugin: {$a}';
$string['errorcallingprocessor'] = 'Error calling defined output';
$string['errorconversationdoesnotexist'] = 'Conversation does not exist';
$string['errormessagetoolong'] = 'The message is longer than the maximum allowed.';
+11 -2
View File
@@ -75,6 +75,8 @@ class core_message_renderer extends plugin_renderer_base {
public function manage_messageoutputs($processors) {
// Display the current workflows
$table = new html_table();
$table->caption = get_string('messageoutputs', 'message');
$table->captionhide = true;
$table->attributes['class'] = 'admintable table generaltable table-hover';
$table->data = array();
$table->head = array(
@@ -90,7 +92,11 @@ class core_message_renderer extends plugin_renderer_base {
$row = new html_table_row();
$row->attributes['class'] = 'messageoutputs';
$name = new html_table_cell(get_string('pluginname', 'message_'.$processor->name));
$pluginname = get_string('pluginname', 'message_' . $processor->name);
$name = new html_table_cell($pluginname);
$name->header = true;
$name->attributes['class'] = 'fw-normal';
$name->attributes['scope'] = 'row';
$enable = new html_table_cell();
if (!$processor->available) {
$enable->text = html_writer::nonempty_tag('span', get_string('outputnotavailable', 'message'),
@@ -98,7 +104,10 @@ class core_message_renderer extends plugin_renderer_base {
);
} else {
$enable->text = html_writer::checkbox($processor->name, $processor->id, $processor->enabled, '',
array('id' => $processor->name)
[
'id' => $processor->name,
'aria-label' => get_string('enablenotificationplugin', 'message', $pluginname),
]
);
}
// Settings
@@ -70,13 +70,15 @@
}
}}
<div class="preferences-page-container">
<h2>{{#str}} managemessageoutputs, message {{/str}}</h2>
<h2 id="defaultnotificationprefsheading">{{#str}} managemessageoutputs, message {{/str}}</h2>
<div class="preferences-container">
<table class="table table-hover preference-table">
<table class="table table-hover preference-table" aria-labelledby="defaultnotificationprefsheading">
<thead>
<tr>
<th></th>
<th>
<span class="visually-hidden">{{#str}}preference, message{{/str}}</span>
</th>
<th>{{#str}} enabled, core_message {{/str}}</th>
{{#processors}}
<th data-processor-name="{{name}}">{{{displayname}}}</th>
@@ -98,8 +100,7 @@
class="form-check-input provider_enabled"
{{#enabled}}checked{{/enabled}}
>
<label for="{{{enabledsetting}}}" class="form-check-label"
title="{{enabledlabel}}">
<label for="{{{enabledsetting}}}" class="form-check-label">
<span class="accesshide">{{enabledlabel}}</span>
</label>
</div>
@@ -116,8 +117,7 @@
class="form-check-input enabled_message_setting"
{{#enabled}}checked{{/enabled}}
>
<label for="{{{enabledsetting}}}" class="form-check-label"
title="{{enabledlabel}}">
<label for="{{{enabledsetting}}}" class="form-check-label">
{{#str}} enabled, core_message {{/str}}
</label>
</div>
@@ -130,8 +130,7 @@
class="form-check-input locked_message_setting"
{{#locked}}checked{{/locked}}
>
<label for="{{{lockedsetting}}}" class="form-check-label"
title="{{lockedlabel}}">
<label for="{{{lockedsetting}}}" class="form-check-label">
{{#str}} forced, core_message {{/str}}
</label>
</div>
@@ -40,7 +40,7 @@ Feature: To be able to see and save user message preferences as admin
And "[data-processor-name='email']" "css_element" should not exist
And "[data-processor-name='airnotifier']" "css_element" should exist
@javascript
@javascript @accessibility
Scenario: An admin can set the default notification preferences
Given I log in as "admin"
And I navigate to "Messaging > Notification settings" in site administration
@@ -54,6 +54,7 @@ Feature: To be able to see and save user message preferences as admin
| mod_feedback_submission_enabled[email] | 1 |
| mod_feedback_submission_locked[email] | 1 |
| mod_feedback_message_disable | 0 |
And the "region-main" "region" should meet accessibility standards with "best-practice" extra tests
And I log in as "student1"
And I follow "Preferences" in the user menu
When I click on "Notification preferences" "link" in the "#page-content" "css_element"