Wiki page revision history from divs to buttons

Page revision selections were divs and thus caused
issues with the SR when one of them was pressed. The
page content and revision list were also backwards in
the dom which could cause confusion for SR users

Fixes CNVS-29896

Test Plan:
 - Navigate to a wiki page revision history view
 - As a SR user notice that when you navigate through the
   content of the view, the wiki page content comes
   before the revision list
 - As a SR user navigate to the one of the revisions
   in the revision history list
 - Notice that the SR announces that the text is a button
 - As a SR user select one of the revisions in the revision
   history list
 - NOtice that the SR announces that the button was pressed

Change-Id: I78b568ca4f7915535de593ab357d8a5ffbf81737
Reviewed-on: https://gerrit.instructure.com/83223
Tested-by: Jenkins
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
QA-Review: David Tan <dtan@instructure.com>
Product-Review: Matthew Sessions <msessions@instructure.com>

app/coffeescripts/bundles/wiki_page_revisions.coffee

@@ -4,7 +4,8 @@ require [
   'compiled/collections/WikiPageRevisionsCollection'
   'compiled/views/wiki/WikiPageContentView'
   'compiled/views/wiki/WikiPageRevisionsView'
-], ($, WikiPage, WikiPageRevisionsCollection, WikiPageContentView, WikiPageRevisionsView) ->
+  'i18n!pages'
+], ($, WikiPage, WikiPageRevisionsCollection, WikiPageContentView, WikiPageRevisionsView, I18n) ->
 
   $('body').addClass('show revisions')
 
@@ -15,12 +16,6 @@ require [
   revisionsView = new WikiPageRevisionsView
     collection: revisions
     pages_path: ENV.WIKI_PAGES_PATH
-  revisionsView.on 'selectionChanged', (newSelection) ->
-    contentView.setModel(newSelection.model)
-    if !newSelection.model.get('title') || newSelection.model.get('title') == ''
-      contentView.$el.disableWhileLoading newSelection.model.fetch()
-  revisionsView.$el.appendTo('#wiki_page_revisions')
-  revisionsView.render()
 
   contentView = new WikiPageContentView
   contentView.$el.appendTo('#wiki_page_revisions')
@@ -28,5 +23,13 @@ require [
     revisionsView.reposition()
   contentView.render()
 
+
+  revisionsView.on 'selectionChanged', (newSelection) ->
+    contentView.setModel(newSelection.model)
+    if !newSelection.model.get('title') || newSelection.model.get('title') == ''
+      contentView.$el.disableWhileLoading newSelection.model.fetch()
+  revisionsView.$el.appendTo('#wiki_page_revisions')
+  revisionsView.render()
+
   revisionsView.collection.setParams per_page: 10
   revisionsView.collection.fetch()

app/coffeescripts/views/wiki/WikiPageRevisionView.coffee

@@ -10,9 +10,6 @@ define [
     className: 'revision clearfix'
     template: template
 
-    attributes:
-      tabindex: 0
-
     events:
       'click .restore-link': 'restore'
       'keydown .restore-link': 'restore'

app/coffeescripts/views/wiki/WikiPageRevisionsView.coffee

@@ -33,7 +33,6 @@ define [
       @on 'selectionChanged', (newSelection, oldSelection) =>
         oldSelection.model?.set('selected', false)
         newSelection.model?.set('selected', true)
-        newSelection.view.$el.focus()
 
       # reposition after rendering
       @on 'render renderItem', => @reposition()

app/stylesheets/components/_g_wiki.scss

@@ -561,6 +561,8 @@ $revision-button-hover-color: $ic-brand-primary;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 12px;
+        color: #333;
       }
     }
     &:not(.selected):hover {

app/views/jst/wiki/WikiPageRevision.handlebars

@@ -1,11 +1,11 @@
 <div class="revision-content">
-  <div class="revision-details">
+  <button class="revision-details Button--link">
     {{#if edited_by}}
       {{#t 'revision_summary'}}<strong>{{updated_at}}</strong> by {{edited_by}}{{/t}}
     {{else}}
       <strong>{{updated_at}}</strong>
     {{/if}}
-  </div>
+  </button>
 
   {{#if IS.LATEST}}
     <div class="revision-actions">{{#t 'latest_revision'}}Latest Revision{{/t}}</div>

spec/selenium/wiki_pages_spec.rb

@@ -352,25 +352,16 @@ describe "Wiki Pages" do
         get "/courses/#{@course.id}/pages/#{@vpage.url}/revisions"
       end
 
-      it "should let the revisions be focused" do
+      it "should focus the revision buttons" do
         driver.execute_script("$('.close-button').focus();")
         f('.close-button').send_keys(:tab)
-        all_revisions = ff('.revision')
+        all_revisions = ff('.revision-details')
         all_revisions.each do |revision|
           check_element_has_focus(revision)
           revision.send_keys(:tab)
         end
       end
 
-      it "should focus on the 'restore this revision link' after selecting a revision" do
-        driver.execute_script("$('.revision:nth-child(2)').focus();")
-        element = fj('.revision:nth-child(2)')
-        element.send_keys(:enter)
-        wait_for_ajaximations
-        element.send_keys(:tab)
-        check_element_has_focus(f('.restore-link'))
-      end
-
       it "should validate that revision restored is displayed", priority: "1", test_id: 126832 do
         get "/courses/#{@course.id}/pages/#{@vpage.url}"
         f('.icon-settings').click