}
};
+ /**
+ * 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.
*
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) {
'settings' => [
'excludetext' => true,
'togglemoreicon' => true
- ]
+ ],
+ 'totaldiscussioncount' => $alldiscussionscount,
+ 'visiblediscussioncount' => count($discussions)
];
if (!$discussions) {
$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}';
.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 */
{{{ 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>
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}}"
>
{{$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}}'
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>
data-region="post-action"
href="{{{urls.markasread}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} markread, mod_forum {{/str}}
</a>
data-region="post-action"
href="{{{urls.markasunread}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} markunread, mod_forum {{/str}}
</a>
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>
data-region="post-action"
href="{{{urls.edit}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} edit, mod_forum {{/str}}
</a>
data-region="post-action"
href="{{{urls.split}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} prune, mod_forum {{/str}}
</a>
data-region="post-action"
href="{{{urls.delete}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} delete, mod_forum {{/str}}
</a>
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}}"
data-region="post-action"
href="{{{urls.export}}}"
class="btn btn-link"
- role="menuitem"
>
{{#str}} addtoportfolio, core_portfolio {{/str}}
</a>
<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>
