L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-55822 message: accessibility improvements for popovers

Browse Source
This commit is contained in:
Ryan Wyllie
2016-10-07 16:26:40 +08:00
committed by Mark Nelson
parent 99c7f0a731
commit eeee7bca80
6 changed files with 107 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lang/en/message.php
+2
View File
@@ -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:';
message/amd/src/notification_popover_controller.js
+1 -1
View File
@@ -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"]',
};
message/templates/message_content_item.mustache
+5 -8
View File
@@ -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>
message/templates/notification_content_item.mustache
+13 -7
View File
@@ -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}}
theme/bootstrapbase/less/moodle/popover_region.less
+52 -31
View File
@@ -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) {
theme/bootstrapbase/style/moodle.css
+34 -27
View File
@@ -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;