From eeee7bca80c852ec6d3fb3d9077ad49240a09b90 Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Thu, 15 Sep 2016 05:03:22 +0000
Subject: [PATCH] MDL-55822 message: accessibility improvements for popovers

---
 lang/en/message.php                           |  2 +
 .../src/notification_popover_controller.js    |  2 +-
 .../templates/message_content_item.mustache   | 13 ++-
 .../notification_content_item.mustache        | 20 +++--
 .../less/moodle/popover_region.less           | 83 ++++++++++++-------
 theme/bootstrapbase/style/moodle.css          | 61 ++++++++------
 6 files changed, 107 insertions(+), 74 deletions(-)

diff --git a/lang/en/message.php b/lang/en/message.php
index 7f7ca12d3e4..56357624e79 100644
--- a/lang/en/message.php
+++ b/lang/en/message.php
@@ -187,5 +187,7 @@ $string['userisblockingyounoncontact'] = '{$a} only accepts messages from their
 $string['userssearchresults'] = 'Users found: {$a}';
 $string['viewinganotherusersmessagearea'] = 'You are viewing another user\'s message area.';
 $string['viewconversation'] = 'View conversation';
+$string['viewmessageswith'] = 'View messages with {$a}';
+$string['viewunreadmessageswith'] = 'View unread messages with {$a}';
 $string['writeamessage'] = 'Write a message...';
 $string['you'] = 'You:';
diff --git a/message/amd/src/notification_popover_controller.js b/message/amd/src/notification_popover_controller.js
index cd589bf4fb8..5cd337849b6 100644
--- a/message/amd/src/notification_popover_controller.js
+++ b/message/amd/src/notification_popover_controller.js
@@ -36,7 +36,7 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
         ALL_NOTIFICATIONS_CONTAINER: '[data-region="all-notifications"]',
         NOTIFICATION: '[data-region="notification-content-item-container"]',
         UNREAD_NOTIFICATION: '[data-region="notification-content-item-container"].unread',
-        NOTIFICATION_LINK: '[data-region="content-item-link"]',
+        NOTIFICATION_LINK: '[data-action="content-item-link"]',
         EMPTY_MESSAGE: '[data-region="empty-message"]',
         COUNT_CONTAINER: '[data-region="count-container"]',
     };
diff --git a/message/templates/message_content_item.mustache b/message/templates/message_content_item.mustache
index 78b0e942cf7..269cd8d076e 100644
--- a/message/templates/message_content_item.mustache
+++ b/message/templates/message_content_item.mustache
@@ -34,14 +34,14 @@
     }
 
 }}
-<div class="content-item-container {{^isread}}unread{{/isread}}"
+<a class="content-item-container {{^isread}}unread{{/isread}}"
     data-region="message-content-item-container"
     role="listitem"
+    href="{{{contexturl}}}"
+    {{^isread}}aria-label="{{#str}} viewunreadmessageswith, message, {{fullname}} {{/str}}"{{/isread}}
+    {{#isread}}aria-label="{{#str}} viewmessageswith, message, {{fullname}} {{/str}}"{{/isread}}
     tabindex="0">
 
-    {{#contexturl}}
-    <a class="content-item-link" href="{{{.}}}">
-    {{/contexturl}}
     <div class="content-item">
         <div class="profile-image-container">
             <img src="{{{profileimageurl}}}" />
@@ -59,7 +59,4 @@
             <span data-region="unread-count" class="badge badge-important">{{unreadcount}}</span>
         </div>
     </div>
-    {{#contexturl}}
-    </a>
-    {{/contexturl}}
-</div>
+</a>
diff --git a/message/templates/notification_content_item.mustache b/message/templates/notification_content_item.mustache
index 8e235e061d0..06638553197 100644
--- a/message/templates/notification_content_item.mustache
+++ b/message/templates/notification_content_item.mustache
@@ -34,7 +34,13 @@
     }
 
 }}
-<div class="content-item-container {{^read}}unread{{/read}}"
+{{#contexturl}}
+<a href="{{{.}}}" data-action="content-item-link"
+{{/contexturl}}
+{{^contexturl}}
+<div
+{{/contexturl}}
+    class="content-item-container {{^read}}unread{{/read}}"
     data-region="notification-content-item-container"
     data-id="{{id}}"
     role="listitem"
@@ -42,9 +48,6 @@
     {{^read}}aria-label="{{#str}} unreadnotification, message, {{subject}} {{/str}}"{{/read}}
     tabindex="0">
 
-    {{#contexturl}}
-    <a class="content-item-link" href="{{{.}}}" data-region="content-item-link">
-    {{/contexturl}}
     <div class="content-item-body">
         <div class="notification-image">
             <img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
@@ -54,8 +57,11 @@
     <div class="content-item-footer">
         <div class="timestamp">{{timecreatedpretty}}</div>
     </div>
-    {{#contexturl}}
-    </a>
-    {{/contexturl}}
+
     {{#viewmoreurl}}<a href="{{{.}}}" class="view-more">{{#str}} viewmore {{/str}}</a>{{/viewmoreurl}}
+{{#contexturl}}
+</a>
+{{/contexturl}}
+{{^contexturl}}
 </div>
+{{/contexturl}}
diff --git a/theme/bootstrapbase/less/moodle/popover_region.less b/theme/bootstrapbase/less/moodle/popover_region.less
index f34f74316c0..3a456b7b615 100644
--- a/theme/bootstrapbase/less/moodle/popover_region.less
+++ b/theme/bootstrapbase/less/moodle/popover_region.less
@@ -258,6 +258,9 @@
                     padding: 5px;
                     position: relative;
                     margin: 0;
+                    display: block;
+                    color: inherit;
+                    text-decoration: none;
 
                     &:hover {
                         color: #fff;
@@ -285,16 +288,6 @@
                         }
                     }
 
-                    .content-item-link {
-                        color: inherit;
-                        text-decoration: none;
-
-                        &:hover {
-                            color: inherit;
-                            text-decoration: none;
-                        }
-                    }
-
                     .content-item-body {
                         box-sizing: border-box;
 
@@ -386,36 +379,30 @@
                         border-bottom: 1px solid #ddd;
                         box-sizing: border-box;
                         padding: 5px;
-                        height: 66px;
                         cursor: pointer;
+                        color: inherit;
+                        text-decoration: none;
+                        display: block;
 
                         &:hover {
                             color: #fff;
                             background-color: #79b5e6;
                         }
 
-                        .content-item-link {
-                            color: inherit;
-                            text-decoration: none;
-
-                            &:hover {
-                                color: inherit;
-                                text-decoration: none;
-                            }
-                        }
-
                         .content-item {
                             height: 100%;
                             width: 100%;
+                            box-sizing: border-box;
 
                             .profile-image-container {
-                                height: 100%;
-                                width: 20%;
+                                width: 30px;
                                 display: inline-block;
                                 text-align: center;
+                                vertical-align: middle;
+                                float: left;
 
                                 img {
-                                    height: 100%;
+                                    width: 100%;
                                     display: inline-block;
                                     vertical-align: middle;
                                     border-radius: 50%;
@@ -425,13 +412,14 @@
                             .content-item-body {
                                 display: inline-block;
                                 box-sizing: border-box;
-                                vertical-align: middle;
-                                width: 75%;
-                                height: 100%;
+                                width: ~"calc(100% - 30px)";
+                                font-size: 12px;
+                                padding-left: 10px;
+                                overflow: hidden;
 
                                 h3 {
-                                    font-size: 14px;
-                                    line-height: 14px;
+                                    font-size: 12px;
+                                    line-height: 12px;
                                     margin: 0;
                                     width: 100%;
                                 }
@@ -446,16 +434,22 @@
                             }
                         }
                         &.unread {
-                            background-color: #f1f1f1;
+                            background-color: #f4f4f4;
+
+                            &:hover {
+                                background-color: #79b5e6;
+                            }
 
                             .content-item-body {
-                                width: 65%;
+                                font-weight: 600;
+                                width: ~"calc(90% - 30px)";
                             }
 
                             .unread-count-container {
                                 display: inline-block;
                                 width: 10%;
                                 text-align: center;
+                                float: right;
                             }
 
                             &:hover {
@@ -565,6 +559,33 @@
             }
         }
     }
+
+    .popover-region-messages {
+        .popover-region-container {
+            .popover-region-content-container {
+                .popover-region-content {
+                    .messages {
+                        .content-item-container {
+                            .content-item {
+                                .profile-image-container {
+                                    float: right;
+                                }
+
+                                .content-item-body {
+                                    padding-left: 0;
+                                    padding-right: 10px;
+                                }
+
+                                .unread-count-container {
+                                    float: left;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 @media (max-width: 767px) {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 66ffe7f5d4f..4c403f7e39d 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -7693,6 +7693,9 @@ body.path-question-type .mform fieldset.hidden {
   padding: 5px;
   position: relative;
   margin: 0;
+  display: block;
+  color: inherit;
+  text-decoration: none;
 }
 .popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container:hover {
   color: #fff;
@@ -7711,14 +7714,6 @@ body.path-question-type .mform fieldset.hidden {
 .popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container.unread .content-item-body .notification-message {
   font-weight: 600;
 }
-.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-link {
-  color: inherit;
-  text-decoration: none;
-}
-.popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-link:hover {
-  color: inherit;
-  text-decoration: none;
-}
 .popover-region-notifications.popover-region .popover-region-container .popover-region-content .content-item-container .content-item-body {
   box-sizing: border-box;
 }
@@ -7773,33 +7768,29 @@ body.path-question-type .mform fieldset.hidden {
   border-bottom: 1px solid #ddd;
   box-sizing: border-box;
   padding: 5px;
-  height: 66px;
   cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  display: block;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container:hover {
   color: #fff;
   background-color: #79b5e6;
 }
-.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-link {
-  color: inherit;
-  text-decoration: none;
-}
-.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-link:hover {
-  color: inherit;
-  text-decoration: none;
-}
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item {
   height: 100%;
   width: 100%;
+  box-sizing: border-box;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .profile-image-container {
-  height: 100%;
-  width: 20%;
+  width: 30px;
   display: inline-block;
   text-align: center;
+  vertical-align: middle;
+  float: left;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .profile-image-container img {
-  height: 100%;
+  width: 100%;
   display: inline-block;
   vertical-align: middle;
   border-radius: 50%;
@@ -7807,13 +7798,14 @@ body.path-question-type .mform fieldset.hidden {
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-body {
   display: inline-block;
   box-sizing: border-box;
-  vertical-align: middle;
-  width: 75%;
-  height: 100%;
+  width: calc(100% - 30px);
+  font-size: 12px;
+  padding-left: 10px;
+  overflow: hidden;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item .content-item-body h3 {
-  font-size: 14px;
-  line-height: 14px;
+  font-size: 12px;
+  line-height: 12px;
   margin: 0;
   width: 100%;
 }
@@ -7824,15 +7816,20 @@ body.path-question-type .mform fieldset.hidden {
   display: none;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread {
-  background-color: #f1f1f1;
+  background-color: #f4f4f4;
+}
+.popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread:hover {
+  background-color: #79b5e6;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread .content-item-body {
-  width: 65%;
+  font-weight: 600;
+  width: calc(90% - 30px);
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread .unread-count-container {
   display: inline-block;
   width: 10%;
   text-align: center;
+  float: right;
 }
 .popover-region-messages.popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container.unread:hover {
   color: #fff;
@@ -7886,6 +7883,16 @@ body.path-question-type .mform fieldset.hidden {
 .dir-rtl .popover-region-notifications .popover-region .popover-region-container .popover-region-content-container .popover-region-content .content-item-container .content-item-controls {
   text-align: left;
 }
+.dir-rtl .popover-region-messages .popover-region-container .popover-region-content-container .popover-region-content .messages .content-item-container .content-item .profile-image-container {
+  float: right;
+}
+.dir-rtl .popover-region-messages .popover-region-container .popover-region-content-container .popover-region-content .messages .content-item-container .content-item .content-item-body {
+  padding-left: 0;
+  padding-right: 10px;
+}
+.dir-rtl .popover-region-messages .popover-region-container .popover-region-content-container .popover-region-content .messages .content-item-container .content-item .unread-count-container {
+  float: left;
+}
 @media (max-width: 767px) {
   .navbar .popover-region .popover-region-container {
     right: -70px;