From e41b3485ba4b86dbe7abd6ef0bdb847748fefe97 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Mon, 19 Apr 2021 21:21:04 +0100
Subject: [PATCH 1/3] MDL-57831 message: Boostrap controls for notification
 preferences.

Switch from previous custom controls that caused problems with
overflowing labels when using long language strings.
---
 ...references_component_notification.mustache | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index 3318f0865a5..d709c69556b 100644
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -71,21 +71,15 @@
                                 {{#loggedin}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#checked}}checked{{/checked}}
                                                     {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-status-container" tabindex="0">
-                                                    <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                    <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                    {{> core/loading }}
-                                                </div>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}
@@ -96,21 +90,15 @@
                                 {{#loggedoff}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#checked}}checked{{/checked}}
                                                     {{#disableall}}disabled{{/disableall}} />
-                                                <div class="preference-state-status-container" tabindex="0">
-                                                    <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                    <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                    {{> core/loading }}
-                                                </div>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}

From 702b119f57960171b02b0c8242302b067f9b2060 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Wed, 21 Apr 2021 21:46:29 +0100
Subject: [PATCH 2/3] MDL-57831 theme_boost: accessibility update for message
 preferences.

The preferences table did not meet accessibility guidelines regarding
colour contrast between hovered rows and the disabled switch
elements.

Ensure white background is used for all table cells, and replace the
highlighted columns used to differentiate processors with borders.
---
 message/templates/notification_preferences.mustache | 2 +-
 theme/boost/scss/moodle/message.scss                | 8 ++++----
 theme/boost/style/moodle.css                        | 6 +++---
 theme/classic/style/moodle.css                      | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/message/templates/notification_preferences.mustache b/message/templates/notification_preferences.mustache
index ac4b959f773..9bc7cdd715e 100644
--- a/message/templates/notification_preferences.mustache
+++ b/message/templates/notification_preferences.mustache
@@ -84,7 +84,7 @@
         {{> core/loading }}
     </div>
     <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
-        <table class="table table-hover preference-table">
+        <table class="table preference-table">
             <thead>
                 <tr>
                     <th>{{displayname}}</th>
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 593673ac091..6c95150857a 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -48,18 +48,18 @@
             }
         }
         tr {
+            th {
+                border-left: 1px solid $border-color;
+            }
             td {
                 &:not(:first-child) {
                     width: 150px;
                     text-align: center;
                 }
                 &:nth-child(even) {
-                    background-color: #f7f7f7;
+                    border: 1px solid $border-color;
                 }
             }
-            th:nth-child(even) {
-                background-color: #f7f7f7;
-            }
         }
         .preference-row {
             .hover-tooltip-container {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c5e5a302c6c..cd012d4002b 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15095,13 +15095,13 @@ a.ygtvspacer:hover {
       display: none; }
     .preferences-container .preference-table thead th.unconfigured .config-warning {
       display: inline-block; }
+  .preferences-container .preference-table tr th {
+    border-left: 1px solid #dee2e6; }
   .preferences-container .preference-table tr td:not(:first-child) {
     width: 150px;
     text-align: center; }
   .preferences-container .preference-table tr td:nth-child(even) {
-    background-color: #f7f7f7; }
-  .preferences-container .preference-table tr th:nth-child(even) {
-    background-color: #f7f7f7; }
+    border: 1px solid #dee2e6; }
   .preferences-container .preference-table .preference-row .hover-tooltip-container {
     display: inline-block; }
   .preferences-container .preference-table .preference-row .preference-name {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 047068c9c2f..ebf37d3ef78 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15319,13 +15319,13 @@ a.ygtvspacer:hover {
       display: none; }
     .preferences-container .preference-table thead th.unconfigured .config-warning {
       display: inline-block; }
+  .preferences-container .preference-table tr th {
+    border-left: 1px solid #dee2e6; }
   .preferences-container .preference-table tr td:not(:first-child) {
     width: 150px;
     text-align: center; }
   .preferences-container .preference-table tr td:nth-child(even) {
-    background-color: #f7f7f7; }
-  .preferences-container .preference-table tr th:nth-child(even) {
-    background-color: #f7f7f7; }
+    border: 1px solid #dee2e6; }
   .preferences-container .preference-table .preference-row .hover-tooltip-container {
     display: inline-block; }
   .preferences-container .preference-table .preference-row .preference-name {

From f9f679611de79ac472beef25220dee7650d47f54 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Thu, 22 Apr 2021 16:11:02 +0100
Subject: [PATCH 3/3] MDL-57831 tool_monitor: update Behat tests for message
 preferences.

---
 admin/tool/monitor/tests/behat/subscription.feature | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin/tool/monitor/tests/behat/subscription.feature b/admin/tool/monitor/tests/behat/subscription.feature
index 9b74a68cdbb..c91d45a6951 100644
--- a/admin/tool/monitor/tests/behat/subscription.feature
+++ b/admin/tool/monitor/tests/behat/subscription.feature
@@ -102,7 +102,7 @@ Feature: tool_monitor_subscriptions
     Given I log in as "admin"
     And I follow "Preferences" in the user menu
     And I click on "Notification preferences" "link" in the "#page-content" "css_element"
-    And I click on "//td[@data-processor-name='popup']//label[@class='preference-state']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
+    And I click on "//td[@data-processor-name='popup']//label[@data-state='loggedin']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
     And I wait until the page is ready
     And I follow "Preferences" in the user menu
     And I follow "Event monitoring"
@@ -123,7 +123,7 @@ Feature: tool_monitor_subscriptions
     Given I log in as "teacher1"
     And I follow "Preferences" in the user menu
     And I click on "Notification preferences" "link" in the "#page-content" "css_element"
-    And I click on "//td[@data-processor-name='popup']//label[@class='preference-state']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
+    And I click on "//td[@data-processor-name='popup']//label[@data-state='loggedin']" "xpath_element" in the "Notifications of rule subscriptions" "table_row"
     And I wait until the page is ready
     And I follow "Preferences" in the user menu
     And I follow "Event monitoring"