prevent tooltip from hiding when cell is focused

fixes: CNVS-37074

Test Plan:
1. Navigate to gradezilla
2. Activate a cell
  - Observe that tooltip appears
  - Observe that tooltip does not auto-hide
3. Repeat 1-2 with old gradebook

Change-Id: I0e3e4bd16f2c5e6bbe81cd13b0526bc6ec0f0e2d
Reviewed-on: https://gerrit.instructure.com/113336
Tested-by: Jenkins
Reviewed-by: Derek Bender <djbender@instructure.com>
Reviewed-by: Jeremy Neander <jneander@instructure.com>
Reviewed-by: Matt Taylor <mtaylor@instructure.com>
Reviewed-by: Shahbaz Javeed <sjaveed@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Nathan Rogowski <nathan@instructure.com>

app/stylesheets/pages/gradebook/_gradebook.scss

@@ -276,40 +276,24 @@ $cell_height: 33px;
 @mixin first-row-tooltip() {
   top: 35px;
   &:after {
+    display: none;
+  }
+  &:before {
+    border-color: #444444 transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    position: absolute;
+    width: 0;
+    left: 15px;
+    content: "";
     border-top-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
     border-bottom: 5px solid #444444;
-    bottom: 30px;
+    top: -10px;
   }
 }
 
-// We need both visibility and opacity because visibility is binary but opacity will allow fading in/out
-@keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-o-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-moz-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-webkit-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-
 .gradebook-tooltip {
   visibility: hidden;
   opacity: 0;
@@ -322,6 +306,7 @@ $cell_height: 33px;
   font-size: 0.8em;
   left: 0;
   top: -30px;
+  line-height: 1rem;
   &:after {
     border-color: #444444 transparent;
     border-style: solid;
@@ -339,10 +324,6 @@ $cell_height: 33px;
   .slick-cell.active &, .slick-cell.editable & {
     visibility: visible;
     opacity: 1;
-    -webkit-animation: fade-in-and-out 2s 1 forwards;
-    -moz-animation: fade-in-and-out 2s 1 forwards;
-    -o-animation: fade-in-and-out 2s 1 forwards;
-    animation: fade-in-and-out 2s 1 forwards;
   }
   &.first-row {
     @include first-row-tooltip();

app/stylesheets/pages/gradezilla/_gradebook.scss

@@ -260,40 +260,24 @@ $header_height: 38px;
 @mixin first-row-tooltip() {
   top: 35px;
   &:after {
+    display: none;
+  }
+  &:before {
+    border-color: #444444 transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    position: absolute;
+    width: 0;
+    left: 15px;
+    content: "";
     border-top-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
     border-bottom: 5px solid #444444;
-    bottom: 30px;
+    top: -10px;
   }
 }
 
-// We need both visibility and opacity because visibility is binary but opacity will allow fading in/out
-@keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-o-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-moz-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-@-webkit-keyframes fade-in-and-out {
-  0%   { opacity: 0; visibility: hidden; }
-  1%   { opacity: 0; visibility: visible; }
-  75%  { opacity: 1; visibility: visible; }
-  100% { opacity: 0; visibility: hidden; }
-}
-
 .gradebook-tooltip {
   visibility: hidden;
   opacity: 0;
@@ -306,6 +290,7 @@ $header_height: 38px;
   font-size: 0.8em;
   left: 0;
   top: -30px;
+  line-height: 1rem;
   &:after {
     border-color: #444444 transparent;
     border-style: solid;
@@ -323,10 +308,6 @@ $header_height: 38px;
   .slick-cell.active &, .slick-cell.editable & {
     visibility: visible;
     opacity: 1;
-    -webkit-animation: fade-in-and-out 2s 1 forwards;
-    -moz-animation: fade-in-and-out 2s 1 forwards;
-    -o-animation: fade-in-and-out 2s 1 forwards;
-    animation: fade-in-and-out 2s 1 forwards;
   }
   &.first-row {
     @include first-row-tooltip();

spec/selenium/grades/gradebook/gradebook_a11y_spec.rb

@@ -150,4 +150,18 @@ describe "gradebook" do
       end
     end
   end
+
+  context 'cell tooltip' do
+    before { page.visit_gradebook(@course) }
+
+    it 'is shown on hover' do
+      page.cell_hover(0, 0)
+      expect(page.cell_tooltip(0, 0)).to be_displayed
+    end
+
+    it 'is shown on focus' do
+      page.cell_click(0, 0)
+      expect(page.cell_tooltip(0, 0)).to be_displayed
+    end
+  end
 end

spec/selenium/grades/gradezilla/gradebook_a11y_spec.rb

@@ -119,4 +119,18 @@ describe "Gradezilla" do
       end
     end
   end
+
+  context 'cell tooltip' do
+    before { Gradezilla.visit(@course) }
+
+    it 'is shown on hover' do
+      Gradezilla.cell_hover(0, 0)
+      expect(Gradezilla.cell_tooltip(0, 0)).to be_displayed
+    end
+
+    it 'is shown on focus' do
+      Gradezilla.cell_click(0, 0)
+      expect(Gradezilla.cell_tooltip(0, 0)).to be_displayed
+    end
+  end
 end

spec/selenium/grades/page_objects/gradebook_page.rb

@@ -131,6 +131,18 @@ module Gradebook
       grade_input(cell).send_keys(:return)
     end
 
+    def cell_hover(x, y)
+      hover(grading_cell(x, y))
+    end
+
+    def cell_click(x, y)
+      grading_cell(x, y).click
+    end
+
+    def cell_tooltip(x, y)
+      grading_cell(x, y).find('.gradebook-tooltip')
+    end
+
     def cell_graded?(grade, x_coordinate, y_coordinate)
       cell = grading_cell(x_coordinate, y_coordinate)
       if cell.text == grade

spec/selenium/grades/page_objects/gradezilla_page.rb

@@ -213,6 +213,18 @@ class Gradezilla
       wait_for_ajax_requests
     end
 
+    def cell_hover(x, y)
+      hover(grading_cell(x, y))
+    end
+
+    def cell_click(x, y)
+      grading_cell(x, y).click
+    end
+
+    def cell_tooltip(x, y)
+      grading_cell(x, y).find('.gradebook-tooltip')
+    end
+
     def cell_graded?(grade, x, y)
       cell = f('.gradebook-cell', grading_cell(x, y))
       cell.text == grade