Add settings for navigation controls in Select-to-speak.

The setting controls the display of a navigation panel beside the
current focus ring, as well as related navigation functionality (such
as auto-dismiss on completion of reading and sentence navigation). The
setting is only shown if the #select-to-speak-navigation-control flag is
enabled.

Bug: 1143830
Change-Id: I1f275a26cdde7c4bf6ea1104a6e2f34ab2acff6d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2556761Reviewed-by: Brian White <bcwhite@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Commit-Queue: Ajit Narayanan <ajitnarayanan@google.com>
Cr-Commit-Position: refs/heads/master@{#831152}

chrome/browser/resources/chromeos/accessibility/select_to_speak/metrics_utils.js

@@ -34,6 +34,9 @@ class MetricsUtils {
     chrome.metricsPrivate.recordBoolean(
         MetricsUtils.BACKGROUND_SHADING_METRIC,
         prefsManager.backgroundShadingEnabled());
+    chrome.metricsPrivate.recordBoolean(
+        MetricsUtils.NAVIGATION_CONTROLS_METRIC,
+        prefsManager.navigationControlsEnabled());
   }
 
   /**
@@ -126,3 +129,10 @@ MetricsUtils.CANCEL_SPEECH_METRIC =
  */
 MetricsUtils.BACKGROUND_SHADING_METRIC =
     'Accessibility.CrosSelectToSpeak.BackgroundShading';
+
+/**
+ * The navigation controls metric name.
+ * @type {string}
+ */
+MetricsUtils.NAVIGATION_CONTROLS_METRIC =
+    'Accessibility.CrosSelectToSpeak.NavigationControls';

chrome/browser/resources/chromeos/accessibility/select_to_speak/options.css

@@ -61,6 +61,10 @@ hr {
   width: 646px;
 }
 
+.option.hidden {
+  display: none;
+}
+
 .sub-option {
   background-color: #fff;
   font-size: 13px;

chrome/browser/resources/chromeos/accessibility/select_to_speak/options.html

@@ -94,6 +94,14 @@
                 msgid="options_sample_text"></p>
           </div>
         </div>
+        <div class="option hidden" id="navigationControlsOption">
+          <label id="navigationControlsLabel" class="i18n"
+                msgid="options_navigation_controls_description">
+          </label>
+          <input id="navigationControls" type="checkbox" role="switch"
+            class="checkbox" name="navigationControls"
+            aria-labeledby="navigationControlsLabel">
+        </div>
       </div>
     </div>
 

chrome/browser/resources/chromeos/accessibility/select_to_speak/prefs_manager.js

@@ -36,6 +36,9 @@ class PrefsManager {
 
     /** @private {boolean} */
     this.backgroundShadingEnabled_ = false;
+
+    /** @private {boolean} */
+    this.navigationControlsEnabled_ = true;
   }
 
   /**
@@ -221,7 +224,7 @@ class PrefsManager {
       chrome.storage.sync.get(
           [
             'voice', 'rate', 'pitch', 'wordHighlight', 'highlightColor',
-            'backgroundShading'
+            'backgroundShading', 'navigationControls'
           ],
           (prefs) => {
             if (prefs['voice']) {
@@ -243,6 +246,12 @@ class PrefsManager {
               chrome.storage.sync.set(
                   {'backgroundShading': this.backgroundShadingEnabled_});
             }
+            if (prefs['navigationControls'] !== undefined) {
+              this.navigationControlsEnabled_ = prefs['navigationControls'];
+            } else {
+              chrome.storage.sync.set(
+                  {'navigationControls': this.navigationControlsEnabled_});
+            }
             if (prefs['rate'] && prefs['pitch']) {
               // Removes 'rate' and 'pitch' prefs after migrating data to global
               // TTS settings if appropriate.
@@ -334,6 +343,17 @@ class PrefsManager {
   backgroundShadingEnabled() {
     return this.backgroundShadingEnabled_;
   }
+
+  /**
+   * Gets the user's preference for showing navigation controls that allow them
+   * to navigate to next/previous sentences, paragraphs, and more.
+   * @return {boolean} True if navigation controls should be shown when STS is
+   *     active.
+   * @public
+   */
+  navigationControlsEnabled() {
+    return this.navigationControlsEnabled_;
+  }
 }
 
 /**

chrome/browser/resources/chromeos/accessibility/select_to_speak/select_to_speak.js

@@ -146,15 +146,24 @@ class SelectToSpeak {
      * Feature flag controlling STS navigation control.
      * @type {boolean}
      */
-    this.enableNavigationControl_ = false;
-
-    // TODO(crbug.com/1143830): Also check STS client-side setting.
+    this.navigationControlFlag_ = false;
     chrome.accessibilityPrivate.isFeatureEnabled(
         AccessibilityFeature.SELECT_TO_SPEAK_NAVIGATION_CONTROL, (result) => {
-          this.enableNavigationControl_ = result;
+          this.navigationControlFlag_ = result;
         });
   }
 
+  /**
+   * Determines if navigation controls should be shown (and other related
+   * functionality, such as auto-dismiss and click-to-navigate to sentence,
+   * should be activated) based on feature flag and user setting.
+   * @private
+   */
+  shouldShowNavigationControls_() {
+    return this.navigationControlFlag_ &&
+        this.prefsManager_.navigationControlsEnabled();
+  }
+
   /**
    * Called in response to our hit test after the mouse is released,
    * when the user is in a mode where select-to-speak is capturing
@@ -448,7 +457,7 @@ class SelectToSpeak {
     this.setFocusRings_([], false /* do not draw background */);
     chrome.accessibilityPrivate.setHighlights(
         [], this.prefsManager_.highlightColor());
-    if (this.enableNavigationControl_) {
+    if (this.shouldShowNavigationControls_()) {
       chrome.accessibilityPrivate.updateSelectToSpeakPanel(/* show= */ false);
     }
   }
@@ -590,7 +599,7 @@ class SelectToSpeak {
    * @private
    */
   onSelectToSpeakPanelAction_(panelAction) {
-    if (!this.enableNavigationControl_) {
+    if (!this.shouldShowNavigationControls_()) {
       // Ignore if this feature is not enabled.
       return;
     }
@@ -647,7 +656,7 @@ class SelectToSpeak {
       } else if (
           (event.type === 'end' || event.type === 'interrupted' ||
            event.type === 'cancelled') &&
-          !this.enableNavigationControl_) {
+          !this.shouldShowNavigationControls_()) {
         // Automatically dismiss when we're at the end, unless navigation
         // controled is enabled, in which case we persist STS.
         this.onStateChanged_(SelectToSpeakState.INACTIVE);
@@ -762,7 +771,7 @@ class SelectToSpeak {
         } else if (event.type === 'interrupted' || event.type === 'cancelled') {
           this.onStateChanged_(SelectToSpeakState.INACTIVE);
         } else if (event.type === 'end') {
-          if (isLast && !this.enableNavigationControl_) {
+          if (isLast && !this.shouldShowNavigationControls_()) {
             // Auto dismiss when we're at the end, unless navigation control
             // is enabled.
             this.onStateChanged_(SelectToSpeakState.INACTIVE);
@@ -1025,7 +1034,7 @@ class SelectToSpeak {
       focusRingRect = node.location;
     }
     this.setFocusRings_([focusRingRect], true /* draw background */);
-    if (this.enableNavigationControl_) {
+    if (this.shouldShowNavigationControls_()) {
       // TODO(crbug.com/1143817): Update paused state correctly once
       // pause/resume functionality is implemented.
       chrome.accessibilityPrivate.updateSelectToSpeakPanel(

chrome/browser/resources/chromeos/accessibility/select_to_speak/select_to_speak_options.js

@@ -43,6 +43,22 @@ class SelectToSpeakOptionsPage {
             elem.setAttribute('aria-hidden', true);
           }
         });
+    this.syncCheckboxControlToPref_('navigationControls', 'navigationControls');
+    // Hide navigation control setting if feature is not enabled
+    const AccessibilityFeature =
+        chrome.accessibilityPrivate.AccessibilityFeature;
+    chrome.accessibilityPrivate.isFeatureEnabled(
+        AccessibilityFeature.SELECT_TO_SPEAK_NAVIGATION_CONTROL, (result) => {
+          const elem = document.getElementById('navigationControlsOption');
+          if (!result) {
+            elem.classList.add('hidden');
+            elem.setAttribute('aria-hidden', true);
+          } else {
+            elem.classList.remove('hidden');
+            elem.setAttribute('aria-hidden', false);
+          }
+        });
+
     this.setUpHighlightListener_();
     this.setUpTtsButtonClickListener_();
     chrome.metricsPrivate.recordUserAction(

chrome/browser/resources/chromeos/accessibility/strings/select_to_speak_strings.grdp

@@ -48,6 +48,9 @@
 <message desc="Label for option to fade the background outside of the focus ring to improve focus on what is being spoken." name="IDS_SELECT_TO_SPEAK_OPTIONS_BACKGROUND_SHADING_DESCRIPTION">
   Shade background content
 </message>
+<message desc="Label for option to show navigation controls, such as going to the previous or next paragraph, when Select-to-speak is activated." name="IDS_SELECT_TO_SPEAK_OPTIONS_NAVIGATION_CONTROLS_DESCRIPTION">
+  Enable navigation controls
+</message>
 <message desc="Link to the Text-to-Speech settings page." name="IDS_SELECT_TO_SPEAK_OPTIONS_TEXT_TO_SPEECH_SETTINGS">
   Personalize Text-to-Speech settings
 </message>

chrome/browser/resources/chromeos/accessibility/strings/select_to_speak_strings_grdp/IDS_SELECT_TO_SPEAK_OPTIONS_NAVIGATION_CONTROLS_DESCRIPTION.png.sha1

+4fdeee7ec47e0c316478cdc07fe7556cb000ec0d
\ No newline at end of file

tools/metrics/histograms/histograms_xml/accessibility/histograms.xml

@@ -328,6 +328,15 @@ reviews. Googlers can read more about this at go/gwsq-gerrit.
   </summary>
 </histogram>
 
+<histogram name="Accessibility.CrosSelectToSpeak.NavigationControls"
+    enum="BooleanEnabled" expires_after="2021-11-30">
+  <owner>ajitnarayanan@google.com</owner>
+  <owner>chrome-a11y-core@google.com</owner>
+  <summary>
+    Whether Select-to-Speak's navigation controls were on when activated.
+  </summary>
+</histogram>
+
 <histogram name="Accessibility.CrosSelectToSpeak.StartSpeechMethod"
     enum="CrosSelectToSpeakStartSpeechMethod" expires_after="M90">
   <owner>katie@chromium.org</owner>