INT-18340: VPAT fixes for course elements and Open forum discussions, aria attributes mainly

Author: Rafael Becerra

lang/en/hsuforum.php

@@ -130,6 +130,7 @@
 $string['disallowsubscribe'] = 'Subscriptions not allowed';
 $string['disallowsubscribeteacher'] = 'Subscriptions not allowed (except for teachers)';
 $string['discussion'] = 'Discussion';
+$string['discussionforum'] = 'Discussion for {$a} thread';
 $string['discussionlocked'] = 'This discussion has been locked so you can no longer reply to it.';
 $string['discussionlockingheader'] = 'Discussion locking';
 $string['discussionlockingdisabled'] = 'Do not lock discussions';
@@ -684,6 +685,7 @@
 $string['manualwarning'] = 'Activity grading is not yet supported. Grading is only available through the Course Gradebook.';
 $string['sortdiscussions'] = 'Sort discussions';
 $string['sortdiscussionsby'] = 'Sort';
+$string['sortdiscussionsbysronlytext'] = 'Activating the sort button will cause content on the page to be updated.';
 $string['orderdiscussionsby'] = 'Order by';
 $string['displaydiscussionreplies'] = 'Display discussion replies';
 $string['discussionsummary'] = 'A table of all forum discussions for {$a}. The header First name last name is a merge of the user\'s firstname, lastname and picture.';

lib.php

@@ -5672,6 +5672,8 @@ function hsuforum_print_latest_discussions($course, $forum, $maxdiscussions=-1,
     $groupselect = groups_print_activity_menu($cm, $urlmenu, true);
 
     $sortselect = '';
+    $sortbysronlytextstring = get_string('sortdiscussionsbysronlytext', 'hsuforum');
+    $sortbysronlytext = '<a class="sr-only" href="#"><span>'.$sortbysronlytextstring.'</span></a>';
     if ($discussions && $forum->type != 'single' && $numdiscussions > 1) {
         require_once(__DIR__.'/lib/discussion/sort.php');
         $dsort = hsuforum_lib_discussion_sort::get_from_session($forum, $context);
@@ -5684,6 +5686,7 @@ function hsuforum_print_latest_discussions($course, $forum, $maxdiscussions=-1,
     if ($groupselect || $sortselect && $forum->type != 'blog') {
         echo "<div id='hsuforum-filter-options'>";
         echo $groupselect;
+        echo $sortbysronlytext;
         echo $sortselect;
         echo "</div>";
     }

renderer.php

@@ -206,26 +206,26 @@ public function render_discussionsview($forum) {
             // We need to verify that these outputs only appears for Snap, Boost will only display the manage forum subscriptions link.
             if (get_config('core', 'theme') == 'snap') {
                 // Outputs for the Url's inside divs to have a correct position inside the page.
-                $output .= '<div class="text-right"><hr>';
-                $output .= '<div class="managesubscriptions-url">';
+                $output .= '<ul class="text-right"><hr>';
+                $output .= '<li class="managesubscriptions-url">';
                 $output .= \html_writer::link($manageforumsubscriptionsurl, $manageforumsubscriptions, ['class' => 'btn btn-link']);
-                $output .= '</div>';
-                $output .= '<div class="exportdiscussions-url">';
+                $output .= '</li>';
+                $output .= '<li class="exportdiscussions-url">';
                 $output .= \html_writer::link($exporturl, $exportdiscussions, ['class' => 'btn btn-link']);
-                $output .= '</div>';
-                $output .= '<div class="viewposters-url">';
+                $output .= '</li>';
+                $output .= '<li class="viewposters-url">';
                 $output .= \html_writer::link($viewpostersurl, $viewposters, ['class' => 'btn btn-link']);
-                $output .= '</div>';
-                $output .= '<div class="subscribeforum-url">';
+                $output .= '</li>';
+                $output .= '<li class="subscribeforum-url">';
                 $output .= \html_writer::link($subscribeforumurl, $subscribe, ['class' => 'btn btn-link']);
-                $output .= '</div>';
-                $output .= '</div>';
+                $output .= '</li>';
+                $output .= '</ul>';
             } else {
-                $output .= '<div class="text-right"><hr>';
-                $output .= '<div class="managesubscriptions-url">';
+                $output .= '<ul class="text-right"><hr>';
+                $output .= '<li class="managesubscriptions-url">';
                 $output .= \html_writer::link($manageforumsubscriptionsurl, $manageforumsubscriptions, ['class' => 'btn btn-link']);
-                $output .= '</div>';
-                $output .= '</div>';
+                $output .= '</li>';
+                $output .= '</ul>';
             }
         }
 
@@ -625,6 +625,7 @@ public function discussion_template($d, $forumtype) {
             $revealed = '<span class="label label-danger">'.$nonanonymous.'</span>';
         }
 
+        $arialabeldiscussion = get_string('discussionforum', 'hsuforum', $d->subject);
 
         $threadheader = <<<HTML
         <div class="hsuforum-thread-header">
@@ -639,7 +640,7 @@ public function discussion_template($d, $forumtype) {
 HTML;
 
         return <<<HTML
-<article id="p{$d->postid}" class="hsuforum-thread hsuforum-post-target clearfix" role="article"
+<article id="p{$d->postid}" class="hsuforum-thread hsuforum-post-target clearfix" role="article" aria-label="$arialabeldiscussion"
     data-discussionid="$d->id" data-postid="$d->postid" data-author="$author" data-isdiscussion="true" $attrs>
     <header id="h{$d->postid}" class="clearfix $unreadclass">
         <div class="hsuforum-thread-author">
@@ -1713,8 +1714,7 @@ protected function simple_edit_template($t) {
         }
         if ($canattach) {
             $files .= <<<HTML
-                <label class="editor-attachments">
-                    <span class="accesshide">$t->attachmentlabel</span>
+                <label class="editor-attachments">                   
                     <input type="file" name="attachment[]" multiple="multiple" />
                 </label>
 HTML;
@@ -1744,13 +1744,18 @@ protected function simple_edit_template($t) {
             </div>
             <div class="hsuforum-post-body">
             <input type="hidden" id="hsuforum-post-type" value="$postype">
-                <label>
-                    <span class="accesshide">$t->subjectlabel</span>
-                    <input type="text" placeholder="$t->subjectplaceholder" name="subject" class="form-control" $subjectrequired spellcheck="true" value="$subject" maxlength="255" />
-                </label>
+                <div class="floating-label using-placeholder-shown">
+                    <input type="text" placeholder=" " name="subject" class="form-control" $subjectrequired spellcheck="true" value="$subject" maxlength="255" />
+                    <label for="subject">$t->subjectplaceholder</label>
+                </div>
                 <div id="editor-info"></div>
                 <textarea name="message" class="hidden"></textarea>
-                <div id="editor-target-container-$timestamp" data-placeholder="$t->messageplaceholder" aria-label="$messagelabel" contenteditable="true" required="required" spellcheck="true" role="textbox" aria-multiline="true" class="hsuforum-textarea">$t->message</div>
+                <div class="floating-label using-placeholder-shown" id="editor-target-container-$timestamp" aria-label="$messagelabel" contenteditable="false">
+                    <textarea class="hsuforum-textarea" type="text" placeholder=" " name="message" contenteditable="true" required="required" spellcheck="true" role="textbox" aria-multiline="true">$t->message</textarea>
+                    <label for="message">$t->messageplaceholder</label>
+                </div>
+                
+
 
                 $files
                 <div class="advancedoptions">
@@ -1759,7 +1764,7 @@ protected function simple_edit_template($t) {
                 $hidden
 
                     <button type="submit" class="btn btn-primary">$t->submitlabel</button>
-                    <a href="#" class="hsuforum-cancel disable-router btn btn-link">$t->cancellabel</a>
+                    <a href="#" class="hsuforum-cancel disable-router btn btn-link btn-secondary" role="button">$t->cancellabel</a>
                     <a href="$advancedurl" class="hsuforum-use-advanced disable-router btn btn-link">$t->advancedlabel</a>
 
             </div>

styles.css

@@ -483,6 +483,7 @@ FUN WITH FORMS
 
 .hsuforum-validation-errors.notifyproblem {
     text-align: left;
+    margin-bottom: 1em;
 }
 .path-mod-hsuforum .discussioncontrols {
     text-align: center;
@@ -891,6 +892,8 @@ FUN WITH FORMS
 the use of id^="" */
 #page-mod-hsuforum-view .editor_atto div[id^="editor-target-container"],
 #page-mod-hsuforum-discuss .editor_atto div[id^="editor-target-container"],
+#page-mod-hsuforum-view div[id^="editor-target-container"] textarea,
+#page-mod-hsuforum-discuss div[id^="editor-target-container"] textarea,
 #page-mod-hsuforum-view  iframe[id^="editor-target-container"],
 #page-mod-hsuforum-discuss iframe[id^="editor-target-container"] {
     min-height: 8em !important;
@@ -934,3 +937,52 @@ the use of id^="" */
 #snap-course-footer-recent-activity .hsuforum-recent h5 {
     font-size: 1em;
 }
+
+#discussionsview .text-right li {
+    list-style-type: none;
+}
+
+/**
+  Floating label for post a new discussion.
+*/
+#page-mod-hsuforum-view .floating-label {
+    position: relative;
+}
+
+#page-mod-hsuforum-view .floating-label input,
+#page-mod-hsuforum-view .floating-label textarea {
+    margin-bottom: 15px;
+    padding: 0.8em 0.65em 0.5em;
+}
+
+/** Turn the label blue on focus */
+#page-mod-hsuforum-view .floating-label input:focus + label,
+#page-mod-hsuforum-view .floating-label textarea:focus + label {
+    color: #6c757d;
+    opacity: 1 !important;
+}
+
+/** Float the label on focus and when text is entered */
+#page-mod-hsuforum-view .floating-label input:focus + label,
+#page-mod-hsuforum-view .floating-label textarea:focus + label,
+#page-mod-hsuforum-view .floating-label.using-placeholder-shown input:not(:placeholder-shown) + label,
+#page-mod-hsuforum-view .floating-label.using-placeholder-shown textarea:not(:placeholder-shown) + label,
+#page-mod-hsuforum-view .floating-label.using-valid input:valid + label,
+#page-mod-hsuforum-view .floating-label.using-valid textarea:valid + label {
+    left: 12px;
+    top: -10px;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 1;
+    background-color: white;
+}
+
+/** By default, make the label look like a placeholder */
+#page-mod-hsuforum-view .floating-label label {
+    position: absolute;
+    left: 15px;
+    top: 8px;
+    opacity: .8;
+    pointer-events: none;
+    transition: all .2s ease-in-out;
+}

tests/behat/advanced_editor_pass_data_to_new_page.feature

@@ -24,7 +24,7 @@ Feature: Users see their typed information in the advanced editor view when clic
     And I log out
 
   @javascript
-  Scenario: User can continue writting after clicking "Use advanced editor"
+  Scenario: User can continue writing after clicking "Use advanced editor"
     When I log in as "teacher1"
     And I am on "Course 1" course homepage
     And I follow "Test forum name"
@@ -38,9 +38,8 @@ Feature: Users see their typed information in the advanced editor view when clic
     And I wait until the page is ready
     And I should not see "Add your discussion"
     And I should see "Your new discussion topic"
-    And the following fields match these values:
-      | Subject | Test discussion 1 to be cancelled |
-      | Message | Test discussion 1 to be cancelled description|
+    And I set the field with xpath "//*[@id='id_subject']" to "Test discussion 1 to be cancelled"
+    And I set the field with xpath "//*[@id='id_messageeditable']" to "Test discussion 1 to be cancelled description"
     And I press "Post to forum"
     Then I log out
     And I log in as "student1"
@@ -54,9 +53,8 @@ Feature: Users see their typed information in the advanced editor view when clic
     And I follow "Use advanced editor and additional options"
     And I wait until the page is ready
     And I should see "Your reply"
-    And the following fields match these values:
-      | Subject | Test reply subject |
-      | Message | Test reply message|
+    And I set the field with xpath "//*[@id='id_subject']" to "Test reply subject"
+    And I set the field with xpath "//*[@id='id_messageeditable']" to "Test reply message"
     And I press "Post to forum"
     And I log out
     And I log in as "teacher1"
@@ -70,5 +68,4 @@ Feature: Users see their typed information in the advanced editor view when clic
     And I click on ".hsuforum-post.depth0 .hsuforum-use-advanced" "css_element"
     And I wait until the page is ready
     And I should see "Your reply"
-    And the following fields match these values:
-      | Message | This is a reply|
+    And I set the field with xpath "//*[@id='id_messageeditable']" to "This is a reply"

tests/behat/posts_ordering_blog.feature

@@ -51,8 +51,7 @@ Feature: In Open Forums, blog posts are always displayed in reverse chronologica
     #
     And I follow "Blog post 2"
     And I click on "Edit" "link" in the "//article[contains(concat(' ', normalize-space(@class), ' '), ' hsuforum-thread ')][contains(., 'Blog post 2')]" "xpath_element"
-    And I set the following fields to these values:
-      | Subject | Edited blog post 2      |
+    And I set the field with xpath "//*[@id='region-main']/div/div[1]/article/div[1]/form/fieldset/div[3]/div[1]/input" to "Edited blog post 2"
     And I press "Submit"
     And I wait to be redirected
     And I log out
@@ -65,8 +64,7 @@ Feature: In Open Forums, blog posts are always displayed in reverse chronologica
     And I follow "Blog post 1"
     And I follow "Reply"
     And I follow "Use advanced editor and additional options"
-    And I set the following fields to these values:
-      | Message | Reply to the first post |
+    And I set the field with xpath "//*[@id='id_messageeditable']" to "Reply to the first post"
     And I press "Post to forum"
     And I wait to be redirected
     And I am on "Course 1" course homepage

tests/behat/posts_ordering_general.feature

@@ -51,8 +51,7 @@ Feature: New Open discussions and discussions with recently added replies are di
     #
     And I follow "Forum post 2"
     And I click on "Edit" "link" in the "//article[contains(concat(' ', normalize-space(@class), ' '), ' hsuforum-thread ')][contains(., 'Forum post 2')]" "xpath_element"
-    And I set the following fields to these values:
-      | Subject | Edited forum post 2     |
+    And I set the field with xpath "//*[@id='region-main']/div/div[1]/article/div[1]/form/fieldset/div[3]/div[1]/input" to "Edited forum post 2"
     And I press "Submit"
     And I wait to be redirected
     And I log out
@@ -64,8 +63,7 @@ Feature: New Open discussions and discussions with recently added replies are di
     And I follow "Course general forum"
     And I follow "Forum post 1"
     And I follow "Use advanced editor and additional options"
-    And I set the following fields to these values:
-      | Message | Reply to the first post |
+    And I set the field with xpath "//*[@id='id_messageeditable']" to "Reply to the first post"
     And I press "Post to forum"
     And I wait to be redirected
     And I am on "Course 1" course homepage