Add left and right panning icons and make the Chromevox panel

communicate with the braille background page.

Screenshot: https://screenshot.googleplex.com/cN7RSTWBv08

ChromeVox.

AX-Relnotes: added virtual panning keys to the braille caption panel in
Change-Id: Ice94af92fd84be29f14d828d3e2561c093635c20
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2331913Reviewed-by: David Tseng <dtseng@chromium.org>
Commit-Queue: Abigail Klein <abigailbklein@google.com>
Cr-Commit-Position: refs/heads/master@{#795131}

chrome/browser/resources/chromeos/accessibility/chromevox/background/braille_background.js

@@ -116,6 +116,16 @@ BrailleBackground = class {
     return this.translatorManager_;
   }
 
+  /** @override */
+  panLeft() {
+    this.displayManager_.panLeft();
+  }
+
+  /** @override */
+  panRight() {
+    this.displayManager_.panRight();
+  }
+
   /**
    * @param {!NavBraille} newContent
    * @param {?string} newContentId

chrome/browser/resources/chromeos/accessibility/chromevox/braille/braille_display_manager.js

@@ -382,10 +382,10 @@ BrailleDisplayManager = class {
   onKeyEvent_(event) {
     switch (event.command) {
       case BrailleKeyCommand.PAN_LEFT:
-        this.panLeft_();
+        this.panLeft();
         break;
       case BrailleKeyCommand.PAN_RIGHT:
-        this.panRight_();
+        this.panRight();
         break;
       case BrailleKeyCommand.ROUTING:
         event.displayPosition = this.brailleToTextPosition_(
@@ -403,9 +403,8 @@ BrailleDisplayManager = class {
    * Shift the display by one full display size and refresh the content.
    * Sends the appropriate command if the display is already at the leftmost
    * position.
-   * @private
    */
-  panLeft_() {
+  panLeft() {
     if (this.panStrategy_.previous()) {
       this.refresh_();
     } else {
@@ -418,9 +417,8 @@ BrailleDisplayManager = class {
    * Shifts the display position to the right by one full display size and
    * refreshes the content.  Sends the appropriate command if the display is
    * already at its rightmost position.
-   * @private
    */
-  panRight_() {
+  panRight() {
     if (this.panStrategy_.next()) {
       this.refresh_();
     } else {

chrome/browser/resources/chromeos/accessibility/chromevox/common/braille_interface.js

@@ -48,4 +48,14 @@ BrailleInterface = class {
    * @return {!BrailleDisplayState} The current display state.
    */
   getDisplayState() {}
+
+  /**
+   * Requests the braille display pan left.
+   */
+  panLeft() {}
+
+  /**
+   * Requests the braille display pan right.
+   */
+  panRight() {}
 };

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel.css

@@ -83,6 +83,26 @@ button:disabled,
   background-image: url(/chromevox/images/close-hover-19.png);
 }
 
+#braille-pan-left {
+  /* Draw a left-facing triangle. */
+  border-bottom: 8px solid transparent;
+  border-inline-end: 8px solid white;
+  border-top: 8px solid transparent;
+  height: 0;
+  margin: 10px;
+  width: 0;
+}
+
+#braille-pan-right {
+  /* Draw a right-facing triangle. */
+  border-bottom: 8px solid transparent;
+  border-inline-start: 8px solid white;
+  border-top: 8px solid transparent;
+  height: 0;
+  margin: 10px 0;
+  width: 0;
+}
+
 #caption {
   color: #fff;
   flex-grow: 1;

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel.html

@@ -36,6 +36,14 @@
           <table id="braille-table2">
           </table>
         </div>
+        <div hidden id="braille-pan-left_title" class="i18n"
+             msgid="braille_pan_left"></div>
+        <button id="braille-pan-left" aria-labelledby="braille-pan-left_title">
+        </button>
+        <div hidden id="braille-pan-right_title" class="i18n"
+             msgid="braille_pan_right"></div>
+        <button id="braille-pan-right"
+                aria-labelledby="braille-pan-right_title"></button>
       </div>
     </div>
     <div id="search-container">

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel.js

@@ -88,6 +88,18 @@ Panel = class {
     Panel.brailleTableElement_ = $('braille-table');
     Panel.brailleTableElement2_ = $('braille-table2');
 
+    /** @private {Element} */
+    Panel.braillePanLeft_ = $('braille-pan-left');
+    Panel.braillePanLeft_.addEventListener('click', () => {
+      chrome.extension.getBackgroundPage()['ChromeVox'].braille.panLeft();
+    }, false);
+
+    /** @private {Element} */
+    Panel.braillePanRight_ = $('braille-pan-right');
+    Panel.braillePanRight_.addEventListener('click', () => {
+      chrome.extension.getBackgroundPage()['ChromeVox'].braille.panRight();
+    }, false);
+
     /** @type {Panel.Mode} @private */
     Panel.mode_ = Panel.Mode.COLLAPSED;