MDL-86998 message: Fix accessibility issues in notification preferences

* Fix missing column heading for the preference column
* Fix incorrect label for the toggle controls
* Make the preference name a table heading with a row scope so that the
  toggle controls will be programmatically associated to it.
* Apply a col scope for the processor column headings to
  programmatically associate the toggle controls to their respective
  columns.

lang/en/message.php

@@ -151,6 +151,7 @@ $string['page-message-x'] = 'Any message pages';
 $string['participants'] = 'Participants';
 $string['pendingcontactrequests'] = 'There are {$a} pending contact requests';
 $string['permitted'] = 'Permitted';
+$string['preference'] = 'Preference';
 $string['privacy'] = 'Privacy';
 $string['privacy_desc'] = 'You can restrict who can message you';
 $string['privacy:metadata:core_favourites'] = 'The conversations starred by the user';

message/templates/notification_preferences.mustache

@@ -69,7 +69,7 @@
     }
 }}
 <div class="preferences-page-container">
-    <h2>{{#str}} notificationpreferences, message {{/str}}</h2>
+    <h2 id="notificationpreferencesheading">{{#str}} notificationpreferences, message {{/str}}</h2>
     <div class="checkbox-container" data-region="disable-notification-container">
         <input id="disable-notifications"
            type="checkbox"
@@ -79,10 +79,12 @@
         {{> core/loading }}
     </div>
     <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
-        <table class="table preference-table">
+        <table class="table preference-table" aria-labelledby="notificationpreferencesheading">
             <thead>
                 <tr>
-                    <th>{{{displayname}}}</th>
+                    <th scope="col">
+                        <span class="sr-only">{{#str}}preference, message{{/str}}</span>
+                    </th>
                     {{#processors}}
                         {{> message/notification_preferences_processor }}
                     {{/processors}}

message/templates/notification_preferences_component_notification.mustache

@@ -47,7 +47,7 @@
     }
 }}
 <tr class="preference-row" data-region="preference-row" data-preference-key="{{{preferencekey}}}">
-    <td class="preference-name">{{{displayname}}}</td>
+    <th class="preference-name font-weight-normal" scope="row">{{{displayname}}}</th>
     {{#processors}}
         <td {{^userconfigured}}class="disabled"{{/userconfigured}} data-processor-name="{{name}}">
             {{#locked}}
@@ -64,8 +64,8 @@
                                 {{#disableall}} disabled="true" {{/disableall}}
                                 {{#enabled}}checked{{/enabled}}
                             >
-                            <label for="{{{preferencekey}}}_{{{name}}}" class="custom-control-label"
-                                title="{{enabledlabel}}" >
+                            <label for="{{{preferencekey}}}_{{{name}}}" class="sr-only">
+                                {{enabledlabel}}
                             </label>
                         </div>
                     </div>

message/templates/notification_preferences_processor.mustache

@@ -41,7 +41,7 @@
         "contextid": 3
     }
 }}
-<th {{^userconfigured}}class="unconfigured"{{/userconfigured}} data-processor-name="{{name}}">
+<th {{^userconfigured}}class="unconfigured"{{/userconfigured}} data-processor-name="{{name}}" scope="col">
     {{#hassettings}}
         <a href="#"
             data-processor-setting

message/tests/behat/message_manage_notification_preferences.feature

@@ -90,6 +90,7 @@ Feature: Manage notification preferences - Email
     Then the field "message_provider_mod_assign_assign_notification_email" matches value "0"
     And I should not see "Enabled" in the "Assignment notifications" "table_row"
 
+  @accessibility
   Scenario: Lock email notifications for Forum providers
     Given I log in as "admin"
     When I navigate to "Messaging > Notification settings" in site administration
@@ -109,6 +110,7 @@ Feature: Manage notification preferences - Email
     And I click on "Notification preferences" "link" in the "#page-content" "css_element"
     And I should see "Locked on" in the "[data-preference-key=message_provider_mod_forum_posts]" "css_element"
     And I should see "Locked off" in the "[data-preference-key=message_provider_mod_forum_digests]" "css_element"
+    And the page should meet accessibility standards with "best-practice" extra tests
 
   Scenario: User can disable notification preferences
     Given the following "courses" exist: