Accessibility fixes for Virtual Keyboard: Use role 'button', fix spac…

…e label.

With role of 'button', Chromevox and Select-to-Speak will draw a focus rect
around the entire area of a button instead of just around the inlineTextBox
(i.e. the letter 'a' or 'b').

The spacebar was being read as "English", but should be read as "Space", this
hooks up setting the content description as well.

Bug: 846823,846822
Change-Id: I03846b3f823fefd45b3a9fe1bd2feac0c1094ed3
Reviewed-on: https://chromium-review.googlesource.com/1073641
Reviewed-by: David Tseng <dtseng@chromium.org>
Reviewed-by: Shu Chen <shuchen@chromium.org>
Commit-Queue: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564538}

third_party/google_input_tools/src/chrome/os/inputview/elements/content/characterkey.js

@@ -166,6 +166,8 @@ CharacterKey.prototype.createDom = function() {
       this.addChild(character, true);
     }
   }
+
+  goog.a11y.aria.setRole(this.getElement(), goog.a11y.aria.Role.BUTTON);
 };
 
 

third_party/google_input_tools/src/chrome/os/inputview/elements/content/functionalkey.js

@@ -200,6 +200,7 @@ FunctionalKey.prototype.setAriaLabel = function(label) {
   var elem = this.textElem || this.iconElem;
   if (elem) {
     goog.a11y.aria.setState(elem, goog.a11y.aria.State.LABEL, label);
+    goog.a11y.aria.setRole(elem, goog.a11y.aria.Role.BUTTON);
   }
 };
 

third_party/google_input_tools/src/chrome/os/inputview/elements/content/material/spacekey.js

@@ -114,6 +114,11 @@ SpaceKey.prototype.createDom = function() {
     goog.dom.classlist.add(this.wrapper_, Css.SPACE_GREY_BG);
     goog.dom.setTextContent(this.wrapper_, this.title_);
   }
+
+  goog.a11y.aria.setState(
+      this.getElement(), goog.a11y.aria.State.LABEL,
+      this.getChromeVoxMessage());
+  goog.a11y.aria.setRole(this.getElement(), goog.a11y.aria.Role.BUTTON);
 };
 
 

third_party/google_input_tools/src/chrome/os/inputview/elements/content/spacekey.js

@@ -125,6 +125,11 @@ SpaceKey.prototype.createDom = function() {
     goog.dom.classlist.add(this.wrapper_, Css.SPACE_GREY_BG);
     goog.dom.setTextContent(this.wrapper_, this.title_);
   }
+
+  goog.a11y.aria.setState(
+      this.getElement(), goog.a11y.aria.State.LABEL,
+      this.getChromeVoxMessage());
+  goog.a11y.aria.setRole(this.getElement(), goog.a11y.aria.Role.BUTTON);
 };