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

MDL-65373 forum: accessibility changes for discussion

Browse Source
This commit is contained in:
Ryan Wyllie
2019-05-09 09:10:40 +08:00
parent 2018f4ebc1
commit 23129586db
8 changed files with 75 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mod/forum/amd/build/discussion.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
define(["jquery","core/custom_interaction_events","mod_forum/selectors"],function(a,b,c){var d=function(a){var b=a.prev(c.post.post);if(b.length){var d=b.find(c.post.post).last();d.length?d.focus():b.focus()}else a.parents(c.post.post).first().focus()},e=function(b){var d=b.find(c.post.post).first();if(d.length)d.focus();else{var e=b.next(c.post.post);e.length?e.focus():b.parents().toArray().forEach(function(b){var d=a(b).next(c.post.post);if(d.length)return void d.focus()})}},f=function(f){var g=f.find(c.post.post);g.each(function(b,d){var e=a(d).find(c.post.action),f=e.first();e.attr("tabindex","-1"),f.attr("tabindex",0)}),b.define(f,[b.events.up,b.events.down,b.events.next,b.events.previous,b.events.home,b.events.end]),f.on(b.events.up,function(){var b=a(document.activeElement).closest(c.post.post);b.length?d(b):f.find(c.post.post).first().focus()}),f.on(b.events.down,function(){var b=a(document.activeElement).closest(c.post.post);b.length?e(b):f.find(c.post.post).first().focus()}),f.on(b.events.home,function(){f.find(c.post.post).first().focus()}),f.on(b.events.end,function(){f.find(c.post.post).last().focus()}),f.on(b.events.next,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=e.next(c.post.action);g.attr("tabindex","-1"),h.length||(h=g.first()),h.attr("tabindex",0),h.focus(),d.originalEvent.preventDefault()}),f.on(b.events.previous,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=e.prev(c.post.action);g.attr("tabindex","-1"),h.length||(h=g.last()),h.attr("tabindex",0),h.focus(),d.originalEvent.preventDefault()}),f.on(b.events.home,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=g.first();g.attr("tabindex","-1"),h.attr("tabindex",0),h.focus(),b.stopPropagation(),d.originalEvent.preventDefault()}),f.on(b.events.end,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=g.last();g.attr("tabindex","-1"),h.attr("tabindex",0),h.focus(),b.stopPropagation(),d.originalEvent.preventDefault()})};return{init:function(a){f(a)}}});
define(["jquery","core/custom_interaction_events","mod_forum/selectors"],function(a,b,c){var d=function(a){var b=a.prev(c.post.post);if(b.length){var d=b.find(c.post.post).last();d.length?d.focus():b.focus()}else a.parents(c.post.post).first().focus()},e=function(b){var d=b.find(c.post.post).first();if(d.length)d.focus();else{var e=b.next(c.post.post);e.length?e.focus():b.parents().toArray().forEach(function(b){var d=a(b).next(c.post.post);if(d.length)return void d.focus()})}},f=function(b){var d=a(b).closest(c.post.inpageReplyContent);return!!d.length},g=function(g){var h=g.find(c.post.post);h.each(function(b,d){var e=a(d).find(c.post.action),f=e.first();e.attr("tabindex","-1"),f.attr("tabindex",0)}),b.define(g,[b.events.up,b.events.down,b.events.next,b.events.previous,b.events.home,b.events.end]),g.on(b.events.up,function(b,e){var h=document.activeElement;if(!f(h)){var i=a(h).closest(c.post.post);i.length?d(i):g.find(c.post.post).first().focus(),e.originalEvent.preventDefault()}}),g.on(b.events.down,function(b,d){var h=document.activeElement;if(!f(h)){var i=a(h).closest(c.post.post);i.length?e(i):g.find(c.post.post).first().focus(),d.originalEvent.preventDefault()}}),g.on(b.events.home,function(a,b){f(document.activeElement)||(g.find(c.post.post).first().focus(),b.originalEvent.preventDefault())}),g.on(b.events.end,function(a,b){f(document.activeElement)||(g.find(c.post.post).last().focus(),b.originalEvent.preventDefault())}),g.on(b.events.next,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=e.next(c.post.action);g.attr("tabindex","-1"),h.length||(h=g.first()),h.attr("tabindex",0),h.focus(),d.originalEvent.preventDefault()}),g.on(b.events.previous,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=e.prev(c.post.action);g.attr("tabindex","-1"),h.length||(h=g.last()),h.attr("tabindex",0),h.focus(),d.originalEvent.preventDefault()}),g.on(b.events.home,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=g.first();g.attr("tabindex","-1"),h.attr("tabindex",0),h.focus(),b.stopPropagation(),d.originalEvent.preventDefault()}),g.on(b.events.end,c.post.action,function(b,d){var e=a(b.target),f=e.closest(c.post.actionsContainer),g=f.find(c.post.action),h=g.last();g.attr("tabindex","-1"),h.attr("tabindex",0),h.focus(),b.stopPropagation(),d.originalEvent.preventDefault()})};return{init:function(a){g(a)}}});
mod/forum/amd/src/discussion.js
+49 -6
View File
@@ -100,6 +100,17 @@ function(
}
};
/**
* Check if the element is inside the in page reply section.
*
* @param {Object} element The element to check
* @return {Boolean}
*/
var isElementInInPageReplySection = function(element) {
var inPageReply = $(element).closest(Selectors.post.inpageReplyContent);
return inPageReply.length ? true : false;
};
/**
* Initialise the keyboard accessibility controls for the discussion.
*
@@ -125,32 +136,64 @@ function(
CustomEvents.events.end,
]);
root.on(CustomEvents.events.up, function() {
var focusPost = $(document.activeElement).closest(Selectors.post.post);
root.on(CustomEvents.events.up, function(e, data) {
var activeElement = document.activeElement;
if (isElementInInPageReplySection(activeElement)) {
// Focus is currently inside the in page reply section so don't move focus
// to another post.
return;
}
var focusPost = $(activeElement).closest(Selectors.post.post);
if (focusPost.length) {
focusPreviousPost(focusPost);
} else {
root.find(Selectors.post.post).first().focus();
}
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.down, function() {
var focusPost = $(document.activeElement).closest(Selectors.post.post);
root.on(CustomEvents.events.down, function(e, data) {
var activeElement = document.activeElement;
if (isElementInInPageReplySection(activeElement)) {
// Focus is currently inside the in page reply section so don't move focus
// to another post.
return;
}
var focusPost = $(activeElement).closest(Selectors.post.post);
if (focusPost.length) {
focusNextPost(focusPost);
} else {
root.find(Selectors.post.post).first().focus();
}
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.home, function() {
root.on(CustomEvents.events.home, function(e, data) {
if (isElementInInPageReplySection(document.activeElement)) {
// Focus is currently inside the in page reply section so don't move focus
// to another post.
return;
}
root.find(Selectors.post.post).first().focus();
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.end, function() {
root.on(CustomEvents.events.end, function(e, data) {
if (isElementInInPageReplySection(document.activeElement)) {
// Focus is currently inside the in page reply section so don't move focus
// to another post.
return;
}
root.find(Selectors.post.post).last().focus();
data.originalEvent.preventDefault();
});
root.on(CustomEvents.events.next, Selectors.post.action, function(e, data) {
mod/forum/classes/local/renderers/discussion_list.php
+3 -1
View File
@@ -173,7 +173,9 @@ class discussion_list {
'settings' => [
'excludetext' => true,
'togglemoreicon' => true
]
],
'totaldiscussioncount' => $alldiscussionscount,
'visiblediscussioncount' => count($discussions)
];
if (!$discussions) {
mod/forum/lang/en/forum.php
+1
View File
@@ -591,6 +591,7 @@ $string['searchwords'] = 'These words can appear anywhere in the post';
$string['seeallposts'] = 'See all posts made by this user';
$string['settings'] = 'Settings';
$string['shortpost'] = 'Short post';
$string['showingcountoftotaldiscussions'] = 'Showing {$a->count} of {$a->total} discussions';
$string['showsubscribers'] = 'Show/edit current subscribers';
$string['singleforum'] = 'A single simple discussion';
$string['smallmessage'] = '{$a->user} posted in {$a->forumname}';
mod/forum/styles.css
+8
View File
@@ -336,3 +336,11 @@ span.unread {
.privatereplyinfo {
font-size: 80%;
}
/* This style is copied directly from the Bootstrap reboot file which adds button outline */
/* stylelint-disable declaration-block-no-duplicate-properties */
.post-actions .btn:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
/* stylelint-enable declaration-block-no-duplicate-properties */
mod/forum/templates/discussion_list.mustache
+8 -1
View File
@@ -57,7 +57,14 @@
{{{ pagination }}}
{{/discussion_top_pagination}}
{{$discussion_list_output}}
<table class="table table-hover table-striped">
<span id="discussion-table-description-{{uniqid}}" class="sr-only">
{{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}
</span>
<table
class="table table-hover table-striped"
aria-label='{{#str}} showingcountoftotaldiscussions, mod_forum, {"count": "{{visiblediscussioncount}}", "total":"{{totaldiscussioncount}}"} {{/str}}'
aria-describedby="discussion-table-description-{{uniqid}}"
>
{{$discussion_list_header}}
<thead>
<tr>
mod/forum/templates/forum_discussion_post.mustache
+4 -11
View File
@@ -35,7 +35,7 @@
data-post-id="{{id}}"
data-region="post"
data-target="{{id}}-target"
tabindex="-1"
tabindex="0"
aria-labelledby="post-header-{{id}}"
aria-describedby="post-content-{{id}}"
>
@@ -167,7 +167,7 @@
{{$actions}}
{{^readonly}}
<div
class="d-flex align-self-end justify-content-end flex-wrap ml-auto"
class="post-actions d-flex align-self-end justify-content-end flex-wrap ml-auto"
data-region="post-actions-container"
role="menubar"
aria-label='{{#str}} postbyuser, mod_forum, {"post": "{{subject}}", "user": "{{author.fullname}}"} {{/str}}'
@@ -180,7 +180,7 @@
href="{{{urls.view}}}"
class="btn btn-link"
title="{{#str}} permanentlinktopost, mod_forum {{/str}}"
role="menuitem"
aria-label="{{#str}} permanentlinktopost, mod_forum {{/str}}"
>
{{#str}} permalink, mod_forum {{/str}}
</a>
@@ -191,7 +191,6 @@
data-region="post-action"
href="{{{urls.markasread}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} markread, mod_forum {{/str}}
</a>
@@ -201,7 +200,6 @@
data-region="post-action"
href="{{{urls.markasunread}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} markunread, mod_forum {{/str}}
</a>
@@ -213,7 +211,7 @@
href="{{{.}}}"
class="btn btn-link"
title="{{#str}} permanentlinktoparentpost, mod_forum {{/str}}"
role="menuitem"
aria-label="{{#str}} permanentlinktoparentpost, mod_forum {{/str}}"
>
{{#str}} parent, mod_forum {{/str}}
</a>
@@ -223,7 +221,6 @@
data-region="post-action"
href="{{{urls.edit}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} edit, mod_forum {{/str}}
</a>
@@ -233,7 +230,6 @@
data-region="post-action"
href="{{{urls.split}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} prune, mod_forum {{/str}}
</a>
@@ -243,7 +239,6 @@
data-region="post-action"
href="{{{urls.delete}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} delete, mod_forum {{/str}}
</a>
@@ -254,7 +249,6 @@
data-region="post-action"
href="{{{urls.reply}}}"
class="btn btn-link"
role="menuitem"
data-post-id="{{id}}"
data-action="collapsible-link"
data-can-reply-privately="{{canreplyprivately}}"
@@ -269,7 +263,6 @@
data-region="post-action"
href="{{{urls.export}}}"
class="btn btn-link"
role="menuitem"
>
{{#str}} addtoportfolio, core_portfolio {{/str}}
</a>
mod/forum/templates/inpage_reply.mustache
+1 -1
View File
@@ -58,7 +58,7 @@
<label class="form-check-label" for="private-reply">{{#str}} privatereply, forum {{/str}}</label>
</div>
{{/canreplyprivately}}
<button title="{{#str}} advanced, forum {{/str}}" data-action="forum-advanced-reply" class="btn btn-link float-right" type="submit">
<button title="{{#str}} advanced, core {{/str}}" data-action="forum-advanced-reply" class="btn btn-link float-right" type="submit">
{{#str}} advanced, core {{/str}}
</button>
</div>