Merge pull request #13345 from edx/andya/buttons-not-links

Make discussion links into buttons for a11y

common/static/common/js/discussion/utils.js

@@ -95,9 +95,6 @@
                 retrieve_discussion: '/courses/' + $$course_id + '/discussion/forum/' + param + '/inline',
                 retrieve_single_thread: '/courses/' + $$course_id + '/discussion/forum/' + param + '/threads/' + param1,
                 openclose_thread: '/courses/' + $$course_id + '/discussion/threads/' + param + '/close',
-                permanent_link_thread: '/courses/' + $$course_id + '/discussion/forum/' + param + '/threads/' + param1,
-                permanent_link_comment: '/courses/' + $$course_id +
-                                        '/discussion/forum/' + param + '/threads/' + param1 + '#' + param2,
                 user_profile: '/courses/' + $$course_id + '/discussion/forum/users/' + param,
                 followed_threads: '/courses/' + $$course_id + '/discussion/forum/users/' + param + '/followed',
                 threads: '/courses/' + $$course_id + '/discussion/forum',

common/static/common/js/discussion/views/discussion_thread_list_view.js

@@ -136,7 +136,7 @@
                         'css_class': searchAlert.attributes.css_class
                     });
                     edx.HtmlUtils.append(self.$('.search-alerts'), content);
-                    return self.$('#search-alert-' + searchAlert.cid + ' a.dismiss')
+                    return self.$('#search-alert-' + searchAlert.cid + ' .dismiss')
                         .bind('click', searchAlert, function(event) {
                             return self.removeSearchAlert(event.data.cid);
                         });
@@ -374,7 +374,8 @@
                     neverRead = !thread.get('read') && threadUnreadCommentCount === threadCommentCount,
                     context = _.extend(
                         {
-                            neverRead: neverRead
+                            neverRead: neverRead,
+                            threadUrl: thread.urlFor('retrieve')
                         },
                         thread.toJSON()
                     );

common/static/common/js/discussion/views/discussion_topic_menu_view.js

@@ -42,11 +42,11 @@
                 this.selectedTopic = this.$('.js-selected-topic');
                 this.hideTopicDropdown();
                 if (this.getCurrentTopicId()) {
-                    this.setTopic(this.$('a.topic-title').filter(
+                    this.setTopic(this.$('.topic-title').filter(
                         '[data-discussion-id="' + this.getCurrentTopicId() + '"]')
                     );
                 } else {
-                    this.setTopic(this.$('a.topic-title').first());
+                    this.setTopic(this.$('.topic-title').first());
                 }
                 return this.$el;
             },

common/static/common/js/discussion/views/new_post_view.js

@@ -177,7 +177,7 @@
                 DiscussionUtil.clearFormErrors(this.$('.post-errors'));
                 this.$('.wmd-preview p').html('');
                 if (this.isTabMode()) {
-                    return this.topicView.setTopic(this.$('a.topic-title').first());
+                    return this.topicView.setTopic(this.$('.topic-title').first());
                 }
             };
 

common/static/common/js/spec/discussion/view/discussion_thread_edit_view_spec.js

@@ -43,7 +43,7 @@
                 };
             });
 
-            view.$el.find('a.topic-title').filter(function(idx, el) {
+            view.$el.find('.topic-title').filter(function(idx, el) {
                 return $(el).data('discussionId') === newTopicId;
             }).click(); // set new topic
             view.$('.edit-post-title').val('changed thread title'); // set new title

common/static/common/js/spec/discussion/view/discussion_thread_show_view_spec.js

@@ -141,9 +141,9 @@
                 return this.thread.set('user_url', 'test_user_url');
             });
             checkUserLink = function(element, is_ta, is_staff) {
-                expect(element.find('a.username').length).toEqual(1);
-                expect(element.find('a.username').text()).toEqual('test_user');
-                expect(element.find('a.username').attr('href')).toEqual('test_user_url');
+                expect(element.find('.username').length).toEqual(1);
+                expect(element.find('.username').text()).toEqual('test_user');
+                expect(element.find('.username').attr('href')).toEqual('test_user_url');
                 expect(element.find('.user-label-community-ta').length).toEqual(is_ta ? 1 : 0);
                 return expect(element.find('.user-label-staff').length).toEqual(is_staff ? 1 : 0);
             };
@@ -168,7 +168,7 @@
                 var $el;
                 this.thread.set('username', null);
                 $el = $('#fixture-element').html(this.view.getAuthorDisplay());
-                expect($el.find('a.username').length).toEqual(0);
+                expect($el.find('.username').length).toEqual(0);
                 return expect($el.text()).toMatch(/^(\s*)anonymous(\s*)$/);
             });
         });

common/static/common/js/spec/discussion/view/discussion_topic_menu_view_spec.js

@@ -98,7 +98,7 @@
             var dropdownText;
             this.createTopicView();
             this.view.maxNameWidth = this.defaultTextWidth + 1;
-            this.view.$el.find('a.topic-title').first().click();
+            this.view.$el.find('.topic-menu-entry').first().click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(this.completeText).toEqual(dropdownText);
         });
@@ -106,11 +106,11 @@
         it('truncation happens with specific title lengths', function() {
             var dropdownText;
             this.createTopicView();
-            this.view.$el.find('a.topic-title')[2].click();
+            this.view.$el.find('.topic-menu-entry')[2].click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(dropdownText).toEqual('…/Very long category name');
 
-            this.view.$el.find('a.topic-title')[5].click();
+            this.view.$el.find('.topic-menu-entry')[5].click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(dropdownText).toEqual('… / What Are Your Goals f …');
         });
@@ -118,7 +118,7 @@
         it('truncation happens with longer title lengths', function() {
             var dropdownText;
             this.createTopicView();
-            this.view.$el.find('a.topic-title')[3].click();
+            this.view.$el.find('.topic-menu-entry')[3].click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(dropdownText).toEqual('… / Very very very very l …');
         });
@@ -126,7 +126,7 @@
         it('titles are escaped before display', function() {
             var dropdownText;
             this.createTopicView();
-            this.view.$el.find('a.topic-title')[4].click();
+            this.view.$el.find('.topic-menu-entry')[4].click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(dropdownText).toContain('em>');
         });
@@ -135,7 +135,7 @@
             var dropdownText;
             this.createTopicView();
             this.view.maxNameWidth = this.selectedOptionText.length + 100;
-            this.view.$el.find('a.topic-title').first().click();
+            this.view.$el.find('.topic-title').first().click();
             dropdownText = this.view.$el.find('.js-selected-topic').text();
             expect(dropdownText.indexOf('/ span>')).toEqual(-1);
         });

common/static/common/js/spec/discussion/view/new_post_view_spec.js

@@ -82,9 +82,9 @@
             it('only enables the cohort selector when applicable', function() {
                 DiscussionSpecHelper.makeModerator();
                 checkVisibility(this.view, true, false, true);
-                $('.topic-title:contains(General)').click();
+                $('.topic-menu-entry:contains(General)').click();
                 checkVisibility(this.view, true, true, false);
-                $('.topic-title:contains(Topic)').click();
+                $('.topic-menu-entry:contains(Topic)').click();
                 return checkVisibility(this.view, true, false, false);
             });
             it('allows the user to make a cohort selection', function() {

common/static/common/js/spec/discussion/view/thread_response_show_view_spec.js

@@ -234,9 +234,9 @@
                 return spyOn(DiscussionUtil, 'urlFor').and.returnValue('test_endorser_url');
             });
             checkUserLink = function(element, is_ta, is_staff) {
-                expect(element.find('a.username').length).toEqual(1);
-                expect(element.find('a.username').text()).toEqual('test_endorser');
-                expect(element.find('a.username').attr('href')).toEqual('test_endorser_url');
+                expect(element.find('.username').length).toEqual(1);
+                expect(element.find('.username').text()).toEqual('test_endorser');
+                expect(element.find('.username').attr('href')).toEqual('test_endorser_url');
                 expect(element.find('.user-label-community-ta').length).toEqual(is_ta ? 1 : 0);
                 return expect(element.find('.user-label-staff').length).toEqual(is_staff ? 1 : 0);
             };

common/static/common/templates/discussion/alert-popup.underscore

 <div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'>
     <div class='inner-wrapper discussion-alert-wrapper'>
-        <button class='close-modal dismiss' title='<%- gettext("Close") %>''>
+        <button class='btn close-modal dismiss' title='<%- gettext("Close") %>''>
             <span class='icon fa fa-times' aria-hidden='true'></span>
         </button>
         <header>
@@ -9,6 +9,6 @@
         </header>
         <p id='discussion-alert-message'></p>
         <hr/>
-        <button class='dismiss'><%- gettext("OK") %></button>
+        <button class='btn dismiss'><%- gettext("OK") %></button>
     </div>
 </div>

common/static/common/templates/discussion/forum-action-answer.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-button action-answer" role="checkbox" aria-checked="false">
+    <button class="btn action-button action-answer" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Mark as Answer") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Mark as Answer") %></span>
             <span class="label-checked"><%- gettext("Unmark as Answer") %></span>
         </span>
         <span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-close.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-list-item action-close" role="checkbox" aria-checked="false">
+    <button class="btn-link action-list-item action-close" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Close") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Close") %></span>
@@ -8,5 +8,5 @@
         <span class="action-icon">
           <span class="icon fa fa-lock" aria-hidden="true"></span>
         </span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-delete.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-list-item action-delete" role="button">
+    <button class="btn-link action-list-item action-delete">
         <span class="action-label"><%- gettext("Delete") %></span>
         <span class="action-icon"><span class="icon fa fa-remove" aria-hidden="true"></span></span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-edit.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-list-item action-edit" role="button">
+    <button class="btn-link action-list-item action-edit">
         <span class="action-label"><%- gettext("Edit") %></span>
         <span class="action-icon"><span class="icon fa fa-pencil" aria-hidden="true"></span></span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-endorse.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-button action-endorse" role="checkbox" aria-checked="false">
+    <button class="btn-link action-button action-endorse" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Endorse") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Endorse") %></span>
             <span class="label-checked"><%- gettext("Unendorse") %></span>
         </span>
         <span class="action-icon"><span class="icon fa fa-check" aria-hidden="true"></span></span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-follow.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-button action-follow" role="checkbox" aria-checked="false">
+    <button class="btn-link action-button action-follow" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Follow") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Follow") %></span>
             <span class="label-checked"><%- gettext("Unfollow") %></span>
         </span>
         <span class="action-icon"><span class="icon fa fa-star" aria-hidden="true"></span></span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-pin.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-list-item action-pin" role="checkbox" aria-checked="false">
+    <button class="btn-link action-list-item action-pin" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Pin") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Pin") %></span>
@@ -8,5 +8,5 @@
         <span class="action-icon">
           <span class="icon fa fa-thumb-tack" aria-hidden="true"></span>
         </span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-report.underscore

 <li class="actions-item">
-    <a href="javascript:void(0)" class="action-list-item action-report" role="checkbox" aria-checked="false">
+    <button class="btn-link action-list-item action-report" role="checkbox" aria-checked="false">
         <span class="sr"><%- gettext("Report abuse") %></span>
         <span class="action-label" aria-hidden="true">
             <span class="label-unchecked"><%- gettext("Report") %></span>
@@ -8,5 +8,5 @@
         <span class="action-icon">
           <span class="icon fa fa-flag" aria-hidden="true"></span>
         </span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-action-vote.underscore

@@ -2,7 +2,7 @@
     <span aria-hidden="true" class="display-vote is-hidden" >
       <span class="vote-count"></span>
     </span>
-    <a href="#" class="action-button action-vote" role="checkbox" aria-checked="false">
+    <button class="btn-link action-button action-vote" role="checkbox" aria-checked="false">
         <% // Vote counts are populated by JS %>
         <span class="sr"><%- gettext("Vote for this post,") %>&nbsp;</span>
         <span class="sr js-sr-vote-count"></span>
@@ -14,5 +14,5 @@
         <span class="action-icon" aria-hidden="true">
             <span class="icon fa fa-plus" aria-hidden="true"></span>
         </span>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/forum-actions.underscore

@@ -3,10 +3,10 @@
         <% _.each(primaryActions, function(action) { print(_.template($('#forum-action-' + action).html())({})) }) %>
         <li class="actions-item is-visible">
             <div class="more-wrapper">
-                <a href="javascript:void(0)" class="action-button action-more" role="button" aria-haspopup="true" aria-controls="action-menu-<%= contentId %>">
-                    <span class="action-label"><%- gettext("More") %></span>
+                <button class="btn-link action-button action-more" aria-label="<%- gettext('More') %>" aria-haspopup="true" aria-controls="action-menu-<%= contentType %>">
+                    <span class="action-label"><%- gettext('More') %></span>
                     <span class="action-icon"><span class="icon fa fa-ellipsis-h" aria-hidden="true"></span></span>
-                </a>
+                </button>
                 <div class="actions-dropdown" id="action-menu-<%= contentType %>" aria-expanded="false">
                   <ul class="actions-dropdown-list">
                     <% _.each(secondaryActions, function(action) { print(_.template($('#forum-action-' + action).html())({})) }) %>

common/static/common/templates/discussion/nav-load-more-link.underscore

 <li class='forum-nav-load-more'>
-    <a href='#' class='forum-nav-load-more-link'>
+    <button class='btn-link forum-nav-load-more-link'>
         <%- gettext("Load more") %>
-    </a>
+    </button>
 </li>

common/static/common/templates/discussion/new-post-menu-entry.underscore

 <li role="menuitem" class="topic-menu-item">
-    <a href="#" class="topic-title" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></a>
+    <button class="btn-link topic-title topic-menu-entry" data-discussion-id="<%- id %>" data-cohorted="<%- is_cohorted %>"><%- text %></button>
 </li>

common/static/common/templates/discussion/response-comment-edit.underscore

 <div class="edit-post-form" id="comment_<%- id %>">
-  <h1><%- gettext("Editing comment") %></h1>
-  <ul class="edit-comment-form-errors"></ul>
-  <div class="form-row">
-    <div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
-  </div>
-  <input type="submit" id="edit-comment-submit" class="post-update" value="<%- gettext("Update comment") %>">
-  <a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
+    <h1><%- gettext("Editing comment") %></h1>
+    <ul class="edit-comment-form-errors"></ul>
+    <div class="form-row">
+        <div class="edit-comment-body" name="body" data-id="<%- id %>"><%- body %></div>
+    </div>
+    <button type="submit" id="edit-comment-submit" class="btn-brand post-update"><%- gettext("Update comment") %></button>
+    <button class="btn post-cancel"><%- gettext("Cancel") %></button>
 </div>

common/static/common/templates/discussion/search-alert.underscore

 <div class="search-alert <%- css_class %>" id="search-alert-<%- cid %>">
     <div class="search-alert-content">
-      <p class="message"><%= HtmlUtils.ensureHtml(messageHtml) %></p>
+        <p class="message"><%= HtmlUtils.ensureHtml(messageHtml) %></p>
     </div>
 
     <div class="search-alert-controls">
-      <a href="#" class="dismiss control control-dismiss"><span class="icon fa fa-remove" aria-hidden="true"></span>
-      <span class="sr"><%- gettext("Close") %></span></a>
+        <button class="btn-link dismiss control control-dismiss" title="<%- gettext('Close') %>">
+            <span class="icon fa fa-remove" aria-hidden="true"></span>
+        </button>
     </div>
 </div>

common/static/common/templates/discussion/thread-edit.underscore

@@ -8,5 +8,5 @@
 <div class="form-row">
   <div class="edit-post-body" name="body"><%- body %></div>
 </div>
-<input type="submit" id="edit-post-submit" class="post-update" value="<%- gettext("Update post") %>">
-<a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
+<button type="submit" id="edit-post-submit" class="btn-brand submit post-update"><%- gettext("Update post") %></button>
+<button class="btn post-cancel"><%- gettext("Cancel") %></button>

common/static/common/templates/discussion/thread-list-item.underscore

 <li data-id="<%- id %>" class="forum-nav-thread<% if (neverRead) { %> never-read<% } %>">
-  <a href="#" class="forum-nav-thread-link">
+  <a href="<%- threadUrl %>" class="forum-nav-thread-link">
     <div class="forum-nav-thread-wrapper-0">
       <%
       var icon_class, sr_text;

common/static/common/templates/discussion/thread-response-edit.underscore

 <div class="edit-post-form">
-  <h1><%- gettext("Editing response") %></h1>
-  <ul class="edit-post-form-errors"></ul>
-  <div class="form-row">
-    <div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
-  </div>
-  <input type="submit" id="edit-response-submit"class="post-update" value="<%- gettext("Update response") %>">
-  <a href="#" class="post-cancel"><%- gettext("Cancel") %></a>
+    <h1><%- gettext("Editing response") %></h1>
+    <ul class="edit-post-form-errors"></ul>
+    <div class="form-row">
+        <div class="edit-post-body" name="body" data-id="<%- id %>"><%- body %></div>
+    </div>
+    <button type="submit" id="edit-response-submit"class="btn-brand post-update"><%- gettext("Update response") %></button>
+    <button class="btn post-cancel"><%- gettext("Cancel") %></button>
 </div>

common/static/common/templates/discussion/thread-response.underscore

 <div class="discussion-response"></div>
-<a href="#" class="action-show-comments">
+<button class="btn-link action-show-comments">
     <%
     var fmts = ngettext("Show Comment (%(num_comments)s)", "Show Comments (%(num_comments)s)", comments.length);
     print(interpolate(fmts, {num_comments: comments.length}, true));
     %>
     <span class="icon fa fa-caret-down" aria-hidden="true"></span>
-</a>
+</button>
 <ol class="comments">
     <li class="new-comment">
         <% if (create_sub_comment && !readOnly) { %>
@@ -15,7 +15,7 @@
                 <div class="comment-body" id="add-new-comment" data-id="<%- wmdId %>"
                 data-placeholder="<%- gettext('Add a comment') %>"></div>
                 <div class="comment-post-control">
-                    <a class="discussion-submit-comment control-button" href="#"><%- gettext("Submit") %></a>
+                    <button class="btn-brand discussion-submit-comment control-button"><%- gettext("Submit") %></button>
                 </div>
             </form>
         <% } %>

common/static/common/templates/discussion/thread.underscore

@@ -33,7 +33,7 @@
         </div>
     </div>
     <div class="post-tools">
-        <a href="javascript:void(0)" class="forum-thread-expand"><span class="icon fa fa-plus" aria-hidden="true"/><%- gettext("Expand discussion") %></a>
-        <a href="javascript:void(0)" class="forum-thread-collapse"><span class="icon fa fa-minus" aria-hidden="true"/><%- gettext("Collapse discussion") %></a>
+        <button class="btn-link forum-thread-expand"><span class="icon fa fa-plus" aria-hidden="true"/><%- gettext("Expand discussion") %></button>
+        <button class="btn-link forum-thread-collapse"><span class="icon fa fa-minus" aria-hidden="true"/><%- gettext("Collapse discussion") %></button>
     </div>
 </article>

common/test/acceptance/pages/lms/discussion.py

@@ -188,11 +188,10 @@ class DiscussionThreadPage(PageObject, DiscussionPageMixin):
     def vote_response(self, response_id):
         current_count = self._get_element_text(".response_{} .discussion-response .action-vote .vote-count".format(response_id))
         self._find_within(".response_{} .discussion-response .action-vote".format(response_id)).first.click()
-        self.wait_for_ajax()
-        EmptyPromise(
+        self.wait_for(
             lambda: current_count != self.get_response_vote_count(response_id),
-            "Response is voted"
-        ).fulfill()
+            description="Vote updated for {response_id}".format(response_id=response_id)
+        )
 
     def cannot_vote_response(self, response_id):
         """Assert that the voting button is not visible on this response"""
@@ -582,7 +581,7 @@ class DiscussionUserProfilePage(CoursePage):
 
     TEXT_NEXT = u'Next >'
     TEXT_PREV = u'< Previous'
-    PAGING_SELECTOR = "a.discussion-pagination[data-page-number]"
+    PAGING_SELECTOR = ".discussion-pagination[data-page-number]"
 
     def __init__(self, browser, course_id, user_id, username, page=1):
         super(DiscussionUserProfilePage, self).__init__(browser, course_id)
@@ -712,7 +711,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin):
             return self.q(css=".search-alert").filter(lambda elem: text in elem.text)
 
         for alert_id in _match_messages(text).attrs("id"):
-            self.q(css="{}#{} a.dismiss".format(self.ALERT_SELECTOR, alert_id)).click()
+            self.q(css="{}#{} .dismiss".format(self.ALERT_SELECTOR, alert_id)).click()
         EmptyPromise(
             lambda: _match_messages(text).results == [],
             "waiting for dismissed alerts to disappear"

common/test/acceptance/tests/discussion/test_discussion.py

@@ -211,7 +211,6 @@ class DiscussionHomePageTest(UniqueCourseTest):
             "ignore": [
                 'section',  # TODO: AC-491
                 'color-contrast',  # TNL-4635
-                'link-href',  # TNL-4636
                 'icon-aria-hidden',  # TNL-4637
             ]
         })
@@ -459,7 +458,6 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4638
                 'color-contrast',  # TNL-4639
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4641
             ]
         })
@@ -471,7 +469,6 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4638
                 'color-contrast',  # TNL-4639
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4641
             ]
         })
@@ -535,7 +532,6 @@ class DiscussionOpenClosedThreadTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4643
                 'color-contrast',  # TNL-4644
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4645
             ]
         })
@@ -547,7 +543,6 @@ class DiscussionOpenClosedThreadTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4643
                 'color-contrast',  # TNL-4644
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4645
             ]
         })
@@ -836,7 +831,6 @@ class DiscussionResponseEditTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4638
                 'color-contrast',  # TNL-4644
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4645
                 'duplicate-id',  # TNL-4647
             ]
@@ -938,7 +932,6 @@ class DiscussionCommentEditTest(BaseDiscussionTestCase):
                 'section',  # TODO: AC-491
                 'aria-valid-attr-value',  # TNL-4643
                 'color-contrast',  # TNL-4644
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4645
             ]
         })
@@ -1346,7 +1339,6 @@ class DiscussionSearchAlertTest(UniqueCourseTest):
             'ignore': [
                 'section',  # TODO: AC-491
                 'color-contrast',  # TNL-4639
-                'link-href',  # TNL-4640
                 'icon-aria-hidden',  # TNL-4641
             ]
         })

lms/djangoapps/discussion/static/discussion/templates/fake-breadcrumbs.underscore

 <h6 class="hd-6 breadcrumbs">
     <span class="nav-item">
-        <a class="all-topics" href="">
+        <button class="btn-link all-topics">
             <span class="icon fa fa-bars" aria-hidden="true"></span><%- gettext('All Topics') %>
-        </a>
+        </button>
     </span>
     <% contents.forEach(function(content) { %>
         <span class="fa fa-angle-right"></span>

lms/static/sass/discussion/_discussion.scss

@@ -377,22 +377,6 @@ section.discussion {
     margin-top: $baseline;
   }
 
-  .post-cancel {
-    @include float(left);
-    @include margin($baseline/2, 0, 0, $baseline*0.75);
-  }
-
-  .post-update {
-    @include float(left);
-    height: 37px;
-    margin-top: ($baseline/2);
-    padding-bottom: 2px;
-
-    &:hover, &:focus {
-      border-color: #222;
-    }
-  }
-
   .edit-post-title {
     width: 100%;
     height: 40px;

lms/static/sass/discussion/_mixins.scss

@@ -6,13 +6,13 @@
   border: 1px solid;
   border-radius: $forum-border-radius;
   height: 35px;
+  background-image: none;
   color: $white;
   line-height: 35px;
   font-size: $forum-base-font-size;
   white-space: nowrap;  // Prevent word-break in Arabic in Google Chrome
   text-shadow: none;
   padding: 0 ($baseline*0.75);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 }
 
 @mixin white-button {

lms/static/sass/discussion/elements/_actions.scss

@@ -141,18 +141,15 @@
 
     .action-label {
       @extend %t-copy-sub2;
-      display: inline-block;
+      display: none;
       vertical-align: middle;
       padding: 2px 8px;
-      color: $gray-l1;
-      opacity: 0;
     }
 
-
     &:hover, &:focus {
 
       .action-label {
-        opacity: 1;
+        display: inline-block;
       }
 
       .action-icon {
@@ -276,10 +273,11 @@
     // UI: secondary action
     .action-list-item {
       @extend %t-copy-sub2;
+      @include text-align(right);
       display: block;
+      width: 100%;
       padding: ($baseline/10) 0;
       white-space: nowrap;
-      @include text-align(right);
       color: $gray-l1;
 
       &:hover, &:focus {

lms/static/sass/discussion/utilities/_shame.scss

@@ -7,8 +7,12 @@
   .breadcrumbs {
     margin: 5px 0 0 0;
 
-    .all-topics .fa {
-      @include margin-right(10px);
+    .all-topics {
+      font-size: 14px;
+
+      .fa {
+        @include margin-right(10px);
+      }
     }
   }
 }

lms/static/sass/discussion/utilities/_variables-v1.scss

@@ -15,7 +15,7 @@ $forum-color-community-ta: $green-d1 !default;
 $forum-color-marked-answer: $green-d1 !default;
 $forum-color-border: $gray-l3 !default;
 $forum-color-error: $red !default;
-$forum-color-hover-thread: $gray-d3 !default;
+$forum-color-hover-thread: #f6f6f6 !default;
 $forum-color-reading-thread: $gray-d3 !default;
 $forum-color-read-post: $blue !default;
 $forum-color-never-read-post: $gray-d3 !default;

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -160,14 +160,10 @@
 // ====================
 
 // UI: actions
-.forum-new-post-form {
+.forum-new-post-form,
+.edit-post-form {
   .submit {
     @include margin-right($baseline/2);
-    display: inline-block;
-  }
-
-  .cancel {
-    display: inline-block;
   }
 }
 

lms/static/sass/discussion/views/_thread.scss

@@ -257,17 +257,17 @@ body.discussion {
 
         .post-tools {
             box-shadow: 0 1px 1px $shadow inset;
-            background: $gray-l6;
+            background: $white;
 
             &:hover {
-                background: #fcfcfc;
+                background: $forum-color-hover-thread;
 
                 .icon {
                     color: $link-hover;
                 }
             }
 
-            a {
+            .btn-link {
                 display: block;
                 padding: ($baseline*0.25) $baseline;
                 font-size: $forum-small-font-size;