Fix a variety of panel issues

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

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
index 38127b92f78b104734b4c163cc230e3c1be7a359..45bec44a5450113f939e8b3e215e553f9effc3f5 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/tutorial.js
@@ -19,7 +19,10 @@ Tutorial = function() {
    * @type {number}
    * @private
    */
-  this.page_ = 0;
+  this.page_;
+
+  this.page = sessionStorage['tutorial_page_pos'] !== undefined ?
+      sessionStorage['tutorial_page_pos'] : 0;
 };
 
 /**
@@ -67,8 +70,7 @@ Tutorial.PAGES = [
   [
     { 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 },
@@ -83,24 +85,25 @@ Tutorial.PAGES = [
 ];
 
 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_();
     }
   },
@@ -113,7 +116,8 @@ Tutorial.prototype = {
     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;
@@ -121,6 +125,8 @@ Tutorial.prototype = {
       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;
@@ -131,5 +137,21 @@ Tutorial.prototype = {
       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_;
   }
 };