A11y: Update FocusRowBehavior to set id and aria-rowindex.

Also update users of FocusRowBehavior to set the index in order to take
advantage of the new attributes.

Bug: 1020305
Change-Id: Ife51f853060b5d8e67984f34f7333ec9f7c0345a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1894324
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712227}

chrome/browser/resources/downloads/manager.html

@@ -130,7 +130,7 @@
         <template>
           <downloads-item data="[[item]]" tabindex$="[[tabIndex]]"
               iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}"
-              list-blurred="{{listBlurred_}}">
+              list-blurred="{{listBlurred_}}" focus-row-index="[[index]]">
           </downloads-item>
         </template>
       </iron-list>

chrome/browser/resources/history/history_list.html

@@ -48,6 +48,7 @@
             search-term="[[searchedTerm]]"
             number-of-items="[[historyData_.length]]"
             index="[[index]]"
+            focus-row-index="[[index]]"
             iron-list-tab-index="[[tabIndex]]"
             last-focused="{{lastFocused_}}"
             list-blurred="{{listBlurred_}}">

chrome/browser/resources/settings/autofill_page/passwords_section.html

@@ -126,6 +126,7 @@
           scroll-target="[[subpageScrollTarget]]" risk-selection>
         <template>
           <password-list-item item="[[item]]" tabindex$="[[tabIndex]]"
+              focus-row-index="[[index]]"
 <if expr="chromeos">
               token-request-manager="[[tokenRequestManager_]]"
 </if>

chrome/browser/resources/settings/on_startup_page/startup_urls_page.html

@@ -42,7 +42,7 @@
             <settings-startup-url-entry model="[[item]]" first$="[[!index]]"
                 tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
                 last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}"
-                editable="[[shouldAllowUrlsEdit_(
+                focus-row-index="[[index]]" editable="[[shouldAllowUrlsEdit_(
                     prefs.session.startup_urls.enforcement)]]">
             </settings-startup-url-entry>
           </template>

chrome/browser/resources/settings/search_engines_page/search_engines_list.html

@@ -57,6 +57,7 @@
             scroll-offset="[[scrollOffset]]" preserve-focus risk-selection>
           <template>
             <settings-search-engine-entry engine="[[item]]"
+                focus-row-index="[[index]]"
                 tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
                 last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}">
             </settings-search-engine-entry>

chrome/browser/resources/settings/search_engines_page/search_engines_page.html

@@ -76,6 +76,7 @@
           items="[[matchingExtensions_]]" preserve-focus risk-selection>
         <template>
           <settings-omnibox-extension-entry engine="[[item]]"
+              focus-row-index="[[index]]"
               tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]"
               last-focused="{{omniboxExtensionlastFocused_}}"
               list-blurred="{{omniboxExtensionListBlurred_}}">

chrome/browser/resources/settings/site_settings/all_sites.html

@@ -60,6 +60,7 @@
         <template>
           <site-entry site-group="[[item]]" list-index="[[index]]"
               iron-list-tab-index="[[tabIndex]]"
+              focus-row-index="[[index]]"
               tabindex$="[[tabIndex]]"
               last-focused="{{lastFocused_}}"
               list-blurred="{{listBlurred_}}"

chrome/browser/resources/settings/site_settings/chooser_exception_list_entry.html

@@ -21,11 +21,14 @@
       <iron-list items="[[exception.sites]]" preserve-focus risk-selection>
         <template>
           <site-list-entry model="[[item]]"
-              tabindex$="[[tabIndex]]" first$="[[!index]]"
+              tabindex$="[[tabIndex]]"
+              first$="[[!index]]"
+              focus-row-index="[[index]]"
               iron-list-tab-index="[[tabIndex]]"
               last-focused="{{lastFocused_}}"
               chooser-type="[[exception.chooserType]]"
-              chooser-object="[[exception.object]]" read-only-list>
+              chooser-object="[[exception.object]]"
+              read-only-list>
           </site-list-entry>
         </template>
       </iron-list>

chrome/browser/resources/settings/site_settings/site_data.html

@@ -55,7 +55,7 @@
             model="[[item]]" first$="[[!index]]" tabindex$="[[tabIndex]]"
             iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}"
             list-blurred="{{listBlurred_}}" on-click="onSiteClick_"
-            on-remove-site="onRemoveSite_">
+            on-remove-site="onRemoveSite_" focus-row-index="[[index]]">
         </site-data-entry>
       </template>
     </iron-list>

chrome/browser/resources/settings/site_settings/site_list.html

@@ -77,7 +77,7 @@
                 on-show-action-menu="onShowActionMenu_" tabindex$="[[tabIndex]]"
                 first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
                 last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}"
-                on-show-tooltip="onShowTooltip_">
+                on-show-tooltip="onShowTooltip_" focus-row-index="[[index]]">
             </site-list-entry>
           </template>
         </iron-list>

chrome/test/data/webui/cr_focus_row_behavior_test.js

@@ -65,6 +65,27 @@ suite('cr-focus-row-behavior-test', function() {
     await test_util.waitAfterNextRender(testElement);
   });
 
+  test('ID is not overriden when index is set', function() {
+    assertFalse(testElement.hasAttribute('id'));
+    assertFalse(testElement.hasAttribute('aria-rowindex'));
+    testElement.id = 'test-id';
+    assertTrue(testElement.hasAttribute('id'));
+    assertEquals('test-id', testElement.id);
+    assertFalse(testElement.hasAttribute('aria-rowindex'));
+    testElement.focusRowIndex = 5;  // Arbitrary index.
+    assertTrue(testElement.hasAttribute('id'));
+    assertEquals('test-id', testElement.id);
+    assertTrue(testElement.hasAttribute('aria-rowindex'));
+  });
+
+  test('ID and aria-rowindex are only set when index is set', function() {
+    assertFalse(testElement.hasAttribute('id'));
+    assertFalse(testElement.hasAttribute('aria-rowindex'));
+    testElement.focusRowIndex = 5;  // Arbitrary index.
+    assertTrue(testElement.hasAttribute('id'));
+    assertTrue(testElement.hasAttribute('aria-rowindex'));
+  });
+
   test('item passes focus to first focusable child', function() {
     let focused = false;
     testElement.$.control.addEventListener('focus', function() {

ui/webui/resources/js/cr/ui/focus_row_behavior.js

@@ -94,6 +94,18 @@ cr.define('cr.ui', function() {
       /** @private {boolean} */
       mouseFocused_: Boolean,
 
+      /** Will be updated when |index| is set, unless specified elsewhere. */
+      id: {
+        type: String,
+        reflectToAttribute: true,
+      },
+
+      /** Should be bound to the index of the item from the iron-list */
+      focusRowIndex: {
+        type: Number,
+        observer: 'focusRowIndexChanged',
+      },
+
       /** @type {Element} */
       lastFocused: {
         type: Object,
@@ -118,6 +130,33 @@ cr.define('cr.ui', function() {
       },
     },
 
+    /**
+     * Returns an ID based on the index that was passed in.
+     * @param {?number} index
+     * @return {?string}
+     */
+    computeId_: function(index) {
+      if (index !== undefined) {
+        return `frb${index}`;
+      }
+    },
+
+    /**
+     * Sets |id| if it hasn't been set elsewhere. Also sets |aria-rowindex|.
+     * @param {number} newIndex
+     * @param {number} oldIndex
+     */
+    focusRowIndexChanged: function(newIndex, oldIndex) {
+      // focusRowIndex is 0-based where aria-rowindex is 1-based.
+      this.setAttribute('aria-rowindex', newIndex + 1);
+
+      // Only set ID if it matches what was previously set. This prevents
+      // overriding the ID value if it's set elsewhere.
+      if (this.id === this.computeId_(oldIndex)) {
+        this.id = this.computeId_(newIndex);
+      }
+    },
+
     /** @private {?Element} */
     firstControl_: null,