MDL-65577 forum: move forum focus outline onto post div
authorRyan Wyllie <ryan@moodle.com>
Tue, 14 May 2019 03:56:33 +0000 (11:56 +0800)
committerRyan Wyllie <ryan@moodle.com>
Wed, 15 May 2019 04:30:49 +0000 (12:30 +0800)
mod/forum/styles.css
mod/forum/templates/forum_discussion_post.mustache

index d1e59bc..c7f31dd 100644 (file)
@@ -342,10 +342,19 @@ span.unread {
     font-size: 80%;
 }
 
+.forum-post-container:focus {
+    outline: 0;
+}
+
 /* 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;
 }
+
+.forum-post-container:focus > .focus-target {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+}
 /* stylelint-enable declaration-block-no-duplicate-properties */
index 4fe9a4b..e5a8e1d 100644 (file)
@@ -31,7 +31,7 @@
 }}
 <article
     id="p{{id}}"
-    class="relativelink mb-2"
+    class="forum-post-container mb-2"
     data-post-id="{{id}}"
     data-region="post"
     data-target="{{id}}-target"
@@ -41,7 +41,7 @@
 >
     <!-- The firstpost and starter classes below aren't used for anything other than to identify the first post in behat -->
     <div
-        class="d-flex border p-2 mb-2 forumpost {{#unread}}unread{{/unread}} {{#firstpost}}firstpost starter{{/firstpost}}"
+        class="d-flex border p-2 mb-2 forumpost focus-target {{#unread}}unread{{/unread}} {{#firstpost}}firstpost starter{{/firstpost}}"
         aria-label='{{#str}} postbyuser, mod_forum, {"post": "{{subject}}", "user": "{{author.fullname}}"} {{/str}}'
         data-post-id="{{id}}" data-content="forum-post"
     >