Increase link and text color contrast

Fixes: CNVS-14594

Note: The only changes here are to the Canvas
high-contrast UI, not the regular UI.

To enable the high-contrast UI, go to Settings
from the top-right user menu, then scroll down
and turn Use High Contrast Styles to ON. Then
refresh the browser.

Per Dana, the solution to the issue of text color
and link color contrast is to make all text links
underlined by default when Canvas is in high-contrast
mode. When the links are hovered, the underline
should go away -- this is the opposite of the default UI.

**Exceptions are links in the main Canvas menu and
sidebar menu, as well as buttons.**

QA Test Plan:
- Enable high-contrast mode and refresh the browser
- Check to make sure text links in Canvas are now
  underlined by default, like in this example:
  http://cl.ly/image/411a1n082X0b/link-underline-example.gif
- Turn high-contrast mode OFF, and click around to
  make sure links in Canvas are no longer underlined
  by default.

Change-Id: I36dae3536dec288a42cb1912078c5275e761074e
Reviewed-on: https://gerrit.instructure.com/39768
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Colleen Palmer <colleen@instructure.com>
QA-Review: Anna Koalenz <akoalenz@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>

app/stylesheets/base/_#header.sass

@@ -104,16 +104,18 @@
   .user_name
     @if $is-k12 == false
       margin-right: 15px
-    a
-      @if $is-k12 == false
-        text-decoration: none !important
   a
     @if $is-k12
       color: $k12-header-text
+      text-decoration: none
       &:hover, &:focus
         text-decoration: underline
     @else
       color: $identity_link_color
+      @if $use_high_contrast
+        text-decoration: none
+      &:hover, &:focus
+        text-decoration: underline
 
   .emphasize-name
     color: $masquerade-link-color
@@ -160,6 +162,8 @@
   .menu-item-title, .menu-item-no-drop
     position: relative
     z-index: 100
+    text-decoration: none
+
     @if $is-k12
       +border-box
       transition: background 0.2s linear
@@ -178,26 +182,13 @@
       display: block
       padding: 6px 17px 5px
       height: 29px
-      text-decoration: none
       color: #fff
       font-size: 15px
   
-  .menu-item-title
+  .menu-item-no-drop, .menu-item-title
-    @if $is-k12
-      &:focus
-        outline: none
-        box-shadow: inset 0 0 0 2px $orange
-      @if $use_high_contrast == false
-        &:hover, &:focus
-          text-decoration: none
-
-  .menu-item-no-drop
     &:hover, &:focus
       text-decoration: underline
     @if $is-k12
-      &:focus
-        outline: none
-        box-shadow: inset 0 0 0 2px $orange
       &:hover, &:focus
         background: rgba($k12-header-text, 0.15)
         @if $use_high_contrast == false
@@ -211,7 +202,8 @@
       @if $is-k12
         background: rgba($k12-header-text, 0.1)
         color: $k12-header-text
-        text-decoration: none
+        @if $use_high_contrast == false
+          text-decoration: none
       @else
         color: $menu-text-color
         border-top-color: $menu-border-color

app/stylesheets/base/_#right-side.sass

@@ -51,7 +51,8 @@
       display: block
       border-bottom: 1px solid #d6d6d6
       box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85)
-
+      @if $use_high_contrast
+        text-decoration: none
       &:hover, &:focus
         b, &.more_link
           text-decoration: underline

app/stylesheets/components/_components.scss

@@ -69,9 +69,9 @@
       & > a {
         display: block;
         color: ensure-contrast($gray, $lightBackground);
-        &:hover { text-decoration: none; }
+        text-decoration: none;
-        &:focus { text-decoration: underline; }
         
+        // K-12 styles
         @if $is-k12 { 
           padding: ($k12-sp - 4) $k12-sp;
           border-radius: $k12-sp/2;
@@ -85,12 +85,15 @@
           @else { &:hover, &:focus { background: #f2f2f2; } }
         }
         
+        // Default UI styles
         @else {
           padding: 4px 8px;
-          &:hover {
+
+          &:hover, &:focus {
             @if $use_high_contrast {
               background: #333;
               color: #fff;
+              text-decoration: underline; 
             } 
             @else { background: $white; }
           }
@@ -173,10 +176,9 @@
     box-shadow: 0 1px 0px rgba(255, 255, 255, 0.85);
     padding: 8px 0;
 
-    &:hover {
+    &:hover, &:focus { color: $blue; }
-      text-decoration: none;
+
-      color: $blue;
+    @if $use_high_contrast { text-decoration: none; }
-    }
 
     &:active {
       color: $grayLight;

app/stylesheets/components/_g_syllabus.sass

@@ -70,6 +70,10 @@
       tr.syllabus_assignment
         .name a
           :font-weight bold
+          @if $use_high_contrast
+            :text-decoration none
+            &:hover, &:focus
+              :text-decoration underline
 
       td.not_last
         :border-bottom 1px solid #ddd

app/stylesheets/pages/context_list.sass

@@ -23,6 +23,7 @@ ul.context_list
 
     a
       font-weight: bold
+      display: block
       
       .subtitle
         color: #888
@@ -36,7 +37,6 @@ ul.context_list
       font-weight: normal
 
   .name
-    display: block
     font-size: 1.5em
 
   .subtitle

app/stylesheets/pages/discussions.scss

@@ -245,8 +245,11 @@ body.with-right-side.with-left-side {
 
 .discussion-reply-action {
   @if $use_high_contrast { color: #666; }
-  @else { color: #888; }
+  @else {
-  text-decoration: none;
+    text-decoration: none;
+    color: #888; 
+  }
+  
   &:hover, &:focus {
     text-decoration: none;
     color: #444;

app/stylesheets/vendor/bootstrap/_buttons.scss

@@ -82,6 +82,7 @@ listen to the "click" and "keyclick" events and add tabindex="0" and role="butto
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+  text-decoration: none;
   @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: 1px solid $btnBorder;
   *border: 0; // Remove the border to prevent IE7's black border on input:focus

app/stylesheets/vendor/bootstrap/_scaffolding.scss

@@ -21,14 +21,23 @@ body {
 
 a {
   color: $linkColor;
-  text-decoration: none;  
+  
-  &:hover {
+  &:hover { color: $linkColorHover; }
-    color: $linkColorHover;
-    text-decoration: underline;
-  }
   &:focus { @include button-focus; }
+
+  @if $use_high_contrast { 
+    text-decoration: underline;
+    &:hover { text-decoration: none; }
+  }
+
+  @else { 
+    text-decoration: none;
+    &:hover { text-decoration: underline; }
+  }
+
 }
 
+
 // Images
 // -------------------------