Fix a variety of panel issues

chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Introduces users to ChromeVox.
  */
 
 goog.provide('Tutorial');
 
 goog.require('Msgs');
 
 /**
  * @constructor
  */
 Tutorial = function() {
   /**
    * The 0-based index of the current page of the tutorial.
    * @type {number}
    * @private
    */
-  this.page_ = 0;
+  this.page_;
+
+  this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
+      sessionStorage['tutorial_page_pos'] : 0;
 };
 
 /**
  * Data for the ChromeVox tutorial consisting of a list of pages,
  * each one of which contains a list of objects, where each object has
  * a message ID for some text, and optional attributes indicating if it's
  * a heading, link, text for only one platform, etc.
  *
  * @type Array<Object>
  */
@@ skipping 27 matching lines @@
     { msgid: 'tutorial_click_next' },
   ],
   [
     { msgid: 'tutorial_menus_heading', heading: true },
     { msgid: 'tutorial_menus' },
     { msgid: 'tutorial_click_next' },
   ],
   [
     { msgid: 'tutorial_chrome_shortcuts_heading', heading: true },
     { msgid: 'tutorial_chrome_shortcuts' },
-    { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true },
-    { msgid: 'tutorial_chromeos_ctrl_f2', chromebookOnly: false },
+    { msgid: 'tutorial_chromebook_ctrl_forward', chromebookOnly: true }
   ],
   [
     { msgid: 'tutorial_learn_more_heading', heading: true },
     { msgid: 'tutorial_learn_more' },
     { msgid: 'next_command_reference',
       link: 'http://www.chromevox.com/next_keyboard_shortcuts.html' },
     { msgid: 'chrome_keyboard_shortcuts',
       link: 'https://support.google.com/chromebook/answer/183101?hl=en' },
     { msgid: 'touchscreen_accessibility',
       link: 'https://support.google.com/chromebook/answer/6103702?hl=en' },
   ],
 ];
 
 Tutorial.prototype = {
-  /** Open the first page in the tutorial. */
-  firstPage: function() {
-    this.page_ = 0;
+  /** Open the last viewed page in the tutorial. */
+  lastViewedPage: function() {
+    this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
+        sessionStorage['tutorial_page_pos'] : 0;
     this.showPage_();
   },
 
   /** Move to the next page in the tutorial. */
   nextPage: function() {
-    if (this.page_ < Tutorial.PAGES.length - 1) {
-      this.page_++;
+    if (this.page < Tutorial.PAGES.length - 1) {
+      this.page++;
       this.showPage_();
     }
   },
 
   /** Move to the previous page in the tutorial. */
   previousPage: function() {
-    if (this.page_ > 0) {
-      this.page_--;
+    if (this.page > 0) {
+      this.page--;
       this.showPage_();
     }
   },
 
   /**
    * Recreate the tutorial DOM for page |this.page_|.
    * @private
    */
   showPage_: function() {
     var tutorialContainer = $('tutorial_main');
     tutorialContainer.innerHTML = '';
 
-    var pageElements = Tutorial.PAGES[this.page_];
+    var pageElements = Tutorial.PAGES[this.page];
+    var focus;
     for (var i = 0; i < pageElements.length; ++i) {
       var pageElement = pageElements[i];
       var msgid = pageElement.msgid;
       var text = Msgs.getMsg(msgid);
       var element;
       if (pageElement.heading) {
         element = document.createElement('h2');
+        element.setAttribute('tabindex', -1);

[dmazzoni, 2016/11/07 07:46:01]

Let's add a css rule so this doesn't show a focus ring visually: h2:focus {
outline: none; }

[David Tseng, 2016/11/07 19:43:29]

Done.

+        focus = element;
       } else if (pageElement.link) {
         element = document.createElement('a');
         element.href = pageElement.link;
         element.target = '_blank';
       } else {
         element = document.createElement('p');
       }
       element.innerText = text;
       tutorialContainer.appendChild(element);
     }
+    if (focus)
+      focus.focus();
+
+    var disableNext = this.page == (Tutorial.PAGES.length - 1);
+    var disablePrevious = this.page == 0;
+    $('tutorial_next').setAttribute('aria-disabled', disableNext);

[dmazzoni, 2016/11/07 07:46:01]

Do this with the regular disabled attribute rather than aria-disabled

[David Tseng, 2016/11/07 19:43:29]

I totally would, ecept for
crbug.com/662974
which I ran into while doing exactly that.

You can't actually even do both because setting foo.disabled = true actually
clears the ax.state.disabled flag...so, leaving as is.

+    $('tutorial_previous').setAttribute('aria-disabled', disablePrevious);
+  },
+
+  get page() {
+    return this.page_;
+  },
+
+  set page(val) {
+    this.page_ = val;
+    sessionStorage['tutorial_page_pos'] = this.page_;
   }
 };