[Switch Access] Move switch assignments to sub-label to match mocks

Before: https://screenshot.googleplex.com/6QKNdedpCna7U8k
After: https://screenshot.googleplex.com/97xdZg4vCkbPsVd

AX-Relnotes: Move switch assignments from right side of assignments link, to below main label, to match mocks.
Bug: 1156233
Change-Id: I3b59a3f2bf94af2e3a8017c421444ce71e452477
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2576230
Commit-Queue: Josiah Krutz <josiahk@google.com>
Commit-Queue: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Auto-Submit: Josiah Krutz <josiahk@google.com>
Cr-Commit-Position: refs/heads/master@{#834588}

chrome/app/os_settings_strings.grdp

@@ -993,7 +993,7 @@
   <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_TITLE" desc="A title for a dialog to assign a switch key to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
     Assign switch <ph name="action">$1<ex>Select</ex></ph>
   </message>
-  <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_WAIT_FOR_KEY_PROMPT" desc="A message shown to ask a suer to press a switch key to be assigned to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+  <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_WAIT_FOR_KEY_PROMPT" desc="A message shown to ask a user to press a switch key to be assigned to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
     Please press a switch key to assign.
   </message>
   <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_WAIT_FOR_CONFIRMATION_PROMPT" desc="A message shown to ask a user to confirm by pressing a switch key to be assigned to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
@@ -1005,8 +1005,23 @@
   <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_WARN_NOT_CONFIRMED_PROMPT" desc="A message warning the user that the switch key pressed during confirmation did not match the initial switch key pressed. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
     Keys do not match. '<ph name="unexpectedKey">$1<ex>enter</ex></ph>' was pressed. '<ph name="currentKey">$2<ex>backspace</ex></ph>' was pressed before. Press any key to exit.
   </message>
-  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
-    Open a dialog to assign a switch key
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_0_SWITCHES" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Mentions no switches assigned. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    0 switches assigned
+  </message>
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_1_SWITCH" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Includes currently assigned switch. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    <ph name="SWITCH">$1<ex>backspace</ex></ph>
+  </message>
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_2_SWITCHES" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Includes listing of two currently assigned switches. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    <ph name="FIRST_SWITCH">$1<ex>backspace</ex></ph>, <ph name="SECOND_SWITCH">$2<ex>enter</ex></ph>
+  </message>
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_3_SWITCHES" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Includes listing of three currently assigned switches. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    <ph name="FIRST_SWITCH">$1<ex>backspace</ex></ph>, <ph name="SECOND_SWITCH">$2<ex>enter</ex></ph>, <ph name="THIRD_SWITCH">$3<ex>escape</ex></ph>
+  </message>
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_4_SWITCHES" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Includes listing of three currently assigned switches, and mentions one other switch is assigned. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    <ph name="FIRST_SWITCH">$1<ex>backspace</ex></ph>, <ph name="SECOND_SWITCH">$2<ex>enter</ex></ph>, <ph name="THIRD_SWITCH">$3<ex>escape</ex></ph>, and 1 more switch
+  </message>
+  <message name="IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_5_OR_MORE_SWITCHES" desc="A sub-label for the link that brings up a dialog to assign a switch key to an action. Includes listing of three currently assigned switches, and mentions number of other switches assigned. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
+    <ph name="FIRST_SWITCH">$1<ex>backspace</ex></ph>, <ph name="SECOND_SWITCH">$2<ex>enter</ex></ph>, <ph name="THIRD_SWITCH">$3<ex>escape</ex></ph>, and <ph name="NUMBER_OF_OTHER_SWITCHES">$4<ex>2</ex></ph> more switches
   </message>
   <message name="IDS_SETTINGS_SWITCH_ACCESS_ACTION_ASSIGNMENT_DIALOG_WARN_ALREADY_ASSIGNED_ACTION_PROMPT" desc="A message warning the user that the switch key pressed is assigned to another action. Switch Access is an alternative input method designed for users with limited mobility, where the user has as little as one switch (for example, a button) to control the computer.">
     '<ph name="currentKey">$1<ex>enter</ex></ph>' is already assigned to the '<ph name="action">$2<ex>Select</ex></ph>' action. Press any key to exit.

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_ASSIGNMENTS_SUB_LABEL.png.sha1

+28d499afb456baa9c75df032f35b51c60f3bdffd
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL.png.sha1

-a512bf0c633d820bfb91e9f0aff89da5551a7787
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_0_SWITCHES.png.sha1

+28c8250e5935e5419fbf77d1dc978825b80eec88
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_1_SWITCH.png.sha1

+8c3699b58e6386bc64688243dcc6c352214ea9e4
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_2_SWITCHES.png.sha1

+c44cd066ef558866202a7a8f76d1667ee9bd93e9
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_3_SWITCHES.png.sha1

+cbef9143e99a2b8b12e7266e1b85219e257e14d3
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_4_SWITCHES.png.sha1

+51e5503c21928f09f4321d3deae9180a342c3264
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_5_OR_MORE_SWITCHES.png.sha1

+8773321941498ed0b035628357477b6594f4ad73
\ No newline at end of file

chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_subpage.html

@@ -31,36 +31,18 @@
         <cr-link-row on-click="onSelectAssignClick_"
             id="selectLinkRow"
             label="$i18n{assignSelectSwitchLabel}"
-            sub-label="$i18n{assignSwitchSubLabel}"
+            sub-label="[[getAssignSwitchSubLabel_(selectAssignments_)]]"
             deep-link-focus-id$="[[Setting.kSwitchActionAssignment]]">
-          <ul id="selectAssignmentList">
-            <template is="dom-repeat"
-                items="[[selectAssignments_]]" as="assignment">
-              <li>[[assignment]]</li>
-            </template>
-          </ul>
         </cr-link-row>
         <cr-link-row on-click="onNextAssignClick_"
             id="nextLinkRow"
             label="$i18n{assignNextSwitchLabel}"
-            sub-label="$i18n{assignSwitchSubLabel}">
-          <ul id="nextAssignmentList">
-            <template is="dom-repeat"
-                items="[[nextAssignments_]]" as="assignment">
-              <li>[[assignment]]</li>
-            </template>
-          </ul>
+            sub-label="[[getAssignSwitchSubLabel_(nextAssignments_)]]">
         </cr-link-row>
         <cr-link-row on-click="onPreviousAssignClick_"
             id="previousLinkRow"
             label="$i18n{assignPreviousSwitchLabel}"
-            sub-label="$i18n{assignSwitchSubLabel}">
-          <ul id="previousAssignmentList">
-            <template is="dom-repeat"
-                items="[[previousAssignments_]]" as="assignment">
-              <li>[[assignment]]</li>
-            </template>
-          </ul>
+            sub-label="[[getAssignSwitchSubLabel_(previousAssignments_)]]">
         </cr-link-row>
     </div>
     <template is="dom-if"

chrome/browser/resources/settings/chromeos/os_a11y_page/switch_access_subpage.js

@@ -239,6 +239,31 @@ Polymer({
     this.previousAssignments_ = value[SwitchAccessCommand.PREVIOUS];
   },
 
+  /**
+   * @param {!Array<string>} switches List of switch names
+   * @return {string} (e.g. 'Alt, Backspace, Enter, and 4 more switches')
+   * @private
+   */
+  getAssignSwitchSubLabel_(switches) {
+    switch (switches.length) {
+      case 0:
+        return this.i18n('assignSwitchSubLabel0Switches');
+      case 1:
+        return this.i18n('assignSwitchSubLabel1Switch', switches[0]);
+      case 2:
+        return this.i18n('assignSwitchSubLabel2Switches', ...switches);
+      case 3:
+        return this.i18n('assignSwitchSubLabel3Switches', ...switches);
+      case 4:
+        return this.i18n(
+            'assignSwitchSubLabel4Switches', ...switches.slice(0, 3));
+      default:
+        return this.i18n(
+            'assignSwitchSubLabel5OrMoreSwitches', ...switches.slice(0, 3),
+            switches.length - 3);
+    }
+  },
+
   /**
    * @return {string}
    * @private

chrome/browser/ui/webui/settings/chromeos/accessibility_section.cc

@@ -494,7 +494,18 @@ void AccessibilitySection::AddLoadTimeData(
       {"manageSwitchAccessSettings",
        IDS_SETTINGS_MANAGE_SWITCH_ACCESS_SETTINGS},
       {"switchAssignmentHeading", IDS_SETTINGS_SWITCH_ASSIGNMENT_HEADING},
-      {"assignSwitchSubLabel", IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL},
+      {"assignSwitchSubLabel0Switches",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_0_SWITCHES},
+      {"assignSwitchSubLabel1Switch",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_1_SWITCH},
+      {"assignSwitchSubLabel2Switches",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_2_SWITCHES},
+      {"assignSwitchSubLabel3Switches",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_3_SWITCHES},
+      {"assignSwitchSubLabel4Switches",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_4_SWITCHES},
+      {"assignSwitchSubLabel5OrMoreSwitches",
+       IDS_SETTINGS_ASSIGN_SWITCH_SUB_LABEL_5_OR_MORE_SWITCHES},
       {"assignSelectSwitchLabel", IDS_SETTINGS_ASSIGN_SELECT_SWITCH_LABEL},
       {"assignNextSwitchLabel", IDS_SETTINGS_ASSIGN_NEXT_SWITCH_LABEL},
       {"assignPreviousSwitchLabel", IDS_SETTINGS_ASSIGN_PREVIOUS_SWITCH_LABEL},

chrome/test/data/webui/settings/chromeos/switch_access_subpage_tests.js

@@ -95,6 +95,19 @@ suite('ManageAccessibilityPageTests', function() {
     settings.Router.getInstance().resetRouteForTesting();
   });
 
+  /**
+   * @param {!Array<string>} switches New switch assignments for select action.
+   * @return {string} Sub-label text from the select link row.
+   */
+  function getSublabelForSelectUpdates(switches) {
+    cr.webUIListenerCallback(
+        'switch-access-assignments-changed',
+        {select: switches, next: [], previous: []});
+
+    return page.$$('#selectLinkRow').$$('#subLabel').textContent.trim();
+  }
+
+
   test('Switch assignment key display', function() {
     initPage();
 
@@ -113,6 +126,32 @@ suite('ManageAccessibilityPageTests', function() {
     assertEquals(0, page.previousAssignments_.length);
   });
 
+  test('Switch assignment sub-labels', function() {
+    initPage();
+
+    assertEquals('0 switches assigned', getSublabelForSelectUpdates([]));
+    assertEquals('Backspace', getSublabelForSelectUpdates(['Backspace']));
+    assertEquals(
+        'Backspace, Tab', getSublabelForSelectUpdates(['Backspace', 'Tab']));
+    assertEquals(
+        'Backspace, Tab, Enter',
+        getSublabelForSelectUpdates(['Backspace', 'Tab', 'Enter']));
+    assertEquals(
+        'Backspace, Tab, Enter, and 1 more switch',
+        getSublabelForSelectUpdates(['Backspace', 'Tab', 'Enter', 'a']));
+    assertEquals(
+        'Backspace, Tab, Enter, and 2 more switches',
+        getSublabelForSelectUpdates(['Backspace', 'Tab', 'Enter', 'a', 'b']));
+    assertEquals(
+        'Backspace, Tab, Enter, and 3 more switches',
+        getSublabelForSelectUpdates(
+            ['Backspace', 'Tab', 'Enter', 'a', 'b', 'c']));
+    assertEquals(
+        'Backspace, Tab, Enter, and 4 more switches',
+        getSublabelForSelectUpdates(
+            ['Backspace', 'Tab', 'Enter', 'a', 'b', 'c', 'd']));
+  });
+
   test('Switch access action assignment dialog', async function() {
     initPage();