Merge pull request #13276 from edx/andya/post-button-a11y

Fix discussion color contrast and remove gradients

common/static/common/js/discussion/views/discussion_thread_view.js

@@ -328,7 +328,10 @@
                                 numResponses: responseLimit
                             }, true);
                         }
-                        $loadMoreButton = $('<button>').addClass('load-response-button').text(buttonText);
+                        $loadMoreButton = $('<button>')
+                            .addClass('btn-neutral')
+                            .addClass('load-response-button')
+                            .text(buttonText);
                         $loadMoreButton.click(function() {
                             return self.loadResponses(responseLimit, $loadMoreButton);
                         });

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

@@ -10,7 +10,7 @@
             </span><select aria-describedby="field_help_visible_to" class="field-input js-group-select" name="group_id" <% if (!is_commentable_cohorted) { print("disabled"); } %>>
                 <option value=""><%- gettext("All Groups") %></option>
                 <% _.each(cohort_options, function(opt) { %>
-                <option value="<%= opt.value %>" <% if (opt.selected) { print("selected"); } %>><%- opt.text %></option>
+                <option value="<%- opt.value %>" <% if (opt.selected) { print("selected"); } %>><%- opt.text %></option>
                 <% }); %>
              </select>
         </label><div class="field-help" id="field_help_visible_to">
@@ -46,7 +46,7 @@
         <% } %>
     </div>
     <div>
-        <input type="submit" class="submit" value="<%- gettext('Add Post') %>">
-        <button type="button" class="cancel"><%- gettext('Cancel') %></button>
+        <button type="submit" class="btn-brand submit"><%- gettext('Add Post') %></button>
+        <button type="button" class="btn cancel"><%- gettext('Cancel') %></button>
     </div>
 </form>

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

@@ -26,7 +26,7 @@
                 <ul class="discussion-errors"></ul>
                 <div class="reply-body" data-id="<%- id %>"></div>
                 <div class="reply-post-control">
-                    <a class="discussion-submit-post control-button" href="#"><%- gettext("Submit") %></a>
+                    <button class="btn-brand discussion-submit-post control-button"><%- gettext("Submit") %></button>
                 </div>
             </form>
             <% } %>

lms/djangoapps/discussion/templates/discussion/discussion_board.html

@@ -65,7 +65,7 @@ DiscussionBoardFactory({
             ## Add Post button
             % if has_permission(user, 'create_thread', course.id):
             <div class="form-actions">
-                <button class="btn btn-small new-post-btn">${_("Add a Post")}</button>
+                <button class="btn-brand btn-small new-post-btn">${_("Add a Post")}</button>
             </div>
             % endif
             ## Search box

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -5,7 +5,7 @@
                 data-user-create-comment="<%- !readOnly %>"
                 data-user-create-subcomment="<%- !readOnly %>">
             <% if ( !readOnly) { %>
-                <button type="button" class="btn btn-small new-post-btn">
+                <button class="btn-brand btn-small new-post-btn">
                     <%- gettext("Add a Post") %>
                 </button>
             <% } %>

lms/static/sass/_build-lms-v1.scss

@@ -65,6 +65,7 @@
 @import "discussion/utilities/variables-v1";
 @import "discussion/mixins";
 @import 'discussion/discussion'; // Process old file after definitions but before everything else, partial is deprecated.
+@import 'discussion/discussion-v1'; // Non-Pattern Library styling
 @import "discussion/elements/actions";
 @import "discussion/elements/editor";
 @import "discussion/elements/labels";

lms/static/sass/discussion/_discussion-v1.scss

@@ -0,0 +1,68 @@
+// ------------------------------------------------
+// Styling for non-Pattern Library discussion pages
+// ------------------------------------------------
+
+// Note: replace with globals from common/static/sass/edx-pattern-library-shims when available
+%pattern-library-btn {
+    @include transition(
+        color 0.125s ease-in-out 0s,
+        border-color 0.125s ease-in-out 0s,
+        background 0.125s ease-in-out 0s,
+        box-shadow 0.125s ease-in-out 0s
+    );
+    display: inline-block;
+    border: 1px solid $forum-color-active-thread;
+    border-radius: 3px;
+    margin: 0;
+    background-image: none;
+    box-shadow: none;
+    height: 40px;
+    text-shadow: none;
+    font-size: 14px;
+    font-weight: 600;
+
+    // Display: block, one button per line, full width
+    &.block {
+        display: block;
+        width: 100%;
+    }
+
+    // STATE: is disabled
+    &:disabled,
+    &.is-disabled {
+        pointer-events: none;
+        outline: none;
+        cursor: not-allowed;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+        border-color: $forum-color-hover;
+        background-color: $forum-color-hover;
+        background-image: none;
+        box-shadow: none;
+        color: $forum-color-active-text;
+        text-decoration: none;  // Don't show underlines on links that are styled as buttons
+    }
+}
+
+// Layout control for discussion modules that does not apply to the discussion board
+.discussion-module {
+    .discussion {
+        clear: both;
+        padding-top: ($baseline/2);
+    }
+
+    .btn {
+        @extend %pattern-library-btn;
+        background-color: $forum-color-background;
+        color: $forum-color-active-thread;
+     }
+
+    .btn-brand {
+        @extend %pattern-library-btn;
+        background-color: $forum-color-active-thread;
+        color: $forum-color-active-text;
+    }
+}

lms/static/sass/discussion/_discussion.scss

@@ -18,13 +18,11 @@ body.discussion {
     }
 
     .post-cancel {
-      @include white-button;
       @include float(left);
       margin: ($baseline/2) 0 0 ($baseline*0.75);
     }
 
     .post-update {
-      @include blue-button;
       @include float(left);
       margin-top: ($baseline/2);
       padding-bottom: ($baseline/10);
@@ -285,7 +283,6 @@ body.discussion {
   }
 
   .discussion-submit-post {
-    @include blue-button;
     @include float(left);
   }
 }
@@ -311,7 +308,6 @@ body.discussion {
   .new-post-btn {
     @include float(right);
     @include margin-right(4px);
-    @include blue-button;
   }
 
   div.add-response.post-extended-content {
@@ -382,13 +378,11 @@ section.discussion {
   }
 
   .post-cancel {
-    @include white-button;
     @include float(left);
     @include margin($baseline/2, 0, 0, $baseline*0.75);
   }
 
   .post-update {
-    @include blue-button;
     @include float(left);
     height: 37px;
     margin-top: ($baseline/2);
@@ -431,9 +425,6 @@ section.discussion-pagination {
         list-style: none;
         display: inline-block;
         padding-right: 0.5em;
-        a {
-          @include white-button;
-        }
         &.current-page span {
           display: inline-block;
           height: 35px;
@@ -471,14 +462,9 @@ section.discussion-pagination {
   }
 
   .load-response-button {
-    @include white-button;
-    @include linear-gradient(top, $white 35%, $gray-l4);
     position: relative;
     margin: ($baseline/2) 0;
-    border: 1px solid $forum-color-border;
     width: 100%;
-    box-shadow: 0 1px 1px $shadow-l1;
     text-align: left;
-    font-weight: normal;
   }
 }

lms/static/sass/discussion/_mixins.scss

@@ -15,37 +15,14 @@
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 }
 
-@mixin blue-button {
-  @include discussion-button();
-  @include linear-gradient(top, #6dccf1, #38a8e5);
-  border-color: #2d81ad;
-  color: $white;
-
-  &:hover, &:focus {
-    @include linear-gradient(top, #4fbbe4, #2090d0);
-    border-color: #297095;
-  }
-}
-
 @mixin white-button {
   @include discussion-button();
-  @include linear-gradient(top, $white, $gray-l5);
   border-color: #aaa;
+  background-color: $white;
   color: $dark-gray;
 
   &:hover, &:focus {
-    @include linear-gradient(top, $white, $gray-l6);
-  }
-}
-
-@mixin dark-grey-button {
-  @include discussion-button();
-  @include linear-gradient(top, #777, #555);
-  border-color: #222;
-  color: $white;
-
-  &:hover, &:focus {
-    background: -webkit-linear-gradient(top, #888, #666);
+    background-color: $white;
   }
 }
 

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

@@ -3,8 +3,9 @@
 
 // color variables
 $forum-color-background: $white;
-$forum-color-active-thread: $white !default;
-$forum-color-active-text: $base-font-color !default;
+$forum-color-active-thread: $blue !default;
+$forum-color-hover: $action-primary-bg !default;
+$forum-color-active-text: $white !default;
 $forum-color-pinned: $pink !default;
 $forum-color-reported: $pink !default;
 $forum-color-closed: $black !default;

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

@@ -4,6 +4,7 @@
 // color variables
 $forum-color-background: $lms-container-background-color !default;
 $forum-color-active-thread: $lms-active-color !default;
+$forum-color-hover: palette(primary, dark) !default;
 $forum-color-active-text: $lms-container-background-color !default;
 $forum-color-pinned: palette(secondary, dark) !default;
 $forum-color-reported: palette(secondary, dark) !default;

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

@@ -139,12 +139,12 @@
     padding: ($baseline/2);
 
     &:hover {
-      border-color: $gray-l3;
+      border-color: $forum-color-border;
     }
 
     &.is-enabled {
-      border-color: $blue;
-      color: $blue;
+      border-color: $forum-color-following;
+      color: $forum-color-following;
     }
 
     .post-option-input {
@@ -162,13 +162,11 @@
 // UI: actions
 .forum-new-post-form {
   .submit {
-    @include blue-button;
     @include margin-right($baseline/2);
     display: inline-block;
   }
 
   .cancel {
-    @include white-button;
     display: inline-block;
   }
 }

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

@@ -164,7 +164,6 @@
     }
 
     .discussion-submit-comment {
-      @include blue-button;
       @include float(left);
       margin-top: 8px;
     }

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

@@ -175,25 +175,6 @@ body.discussion {
     }
 }
 
-// Layout control for discussion modules that does not apply to the discussion board
-.discussion-module {
-    .discussion {
-        clear: both;
-        padding-top: ($baseline/2);
-    }
-
-    .btn-brand {
-        @include blue-button;
-        display: inline-block;
-        padding-bottom: ($baseline/10);
-        height: 37px;
-
-        &:hover, &:focus {
-            border-color: #222;
-        }
-    }
-}
-
 // Styling for discussion threads
 .discussion-thread {
     padding: 0;

lms/static/sass/views/_teams.scss

@@ -339,7 +339,6 @@
 
     .new-post-btn {
       @include float(right);
-      @include blue-button;
     }
 
     .page-content-main {

lms/templates/discussion/_discussion_inline.html

@@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
         <span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
     </a>
     % if can_create_thread:
-        <button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
+        <button class="btn-brand btn-small new-post-btn">${_("Add a Post")}</button>
     % endif
 </div>
 <script type="text/javascript">