A11y: Bookmarks: Add aria roles for better infinite scrolling.

Bug: 854362
Change-Id: I3efd2b9294204005ff02d55eccfae91507b44550
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1928237
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720736}

chrome/browser/resources/bookmarks/dnd_manager.js

@@ -43,6 +43,32 @@ function isBookmarkList(element) {
   return element.tagName == 'BOOKMARKS-LIST';
 }
 
+/**
+ * @param {?Element} element
+ * @return {?Element}
+ */
+function getPreviousElementSibling(element) {
+  if (isBookmarkItem(element)) {
+    // Need to get previous element cousin.
+    const parentSibling = element.parentElement.previousElementSibling;
+    return parentSibling ? parentSibling.querySelector('bookmarks-item') : null;
+  }
+  return element.previousElementSibling;
+}
+
+/**
+ * @param {?Element} element
+ * @return {?Element}
+ */
+function getNextElementSibling(element) {
+  if (isBookmarkItem(element)) {
+    // Need to get next element cousin.
+    const parentSibling = element.parentElement.nextElementSibling;
+    return parentSibling ? parentSibling.querySelector('bookmarks-item') : null;
+  }
+  return element.nextElementSibling;
+}
+
 /**
  * @param {Element} element
  * @return {boolean}
@@ -728,7 +754,7 @@ export class DNDManager {
     let validDropPositions = DropPosition.NONE;
 
     // Cannot drop above if the item above is already in the drag source.
-    const previousElem = overElement.previousElementSibling;
+    const previousElem = getPreviousElementSibling(overElement);
     if (!previousElem || !dragInfo.isDraggingBookmark(previousElem.itemId)) {
       validDropPositions |= DropPosition.ABOVE;
     }
@@ -740,8 +766,7 @@ export class DNDManager {
       return validDropPositions;
     }
 
-    const nextElement = overElement.nextElementSibling;
-
+    const nextElement = getNextElementSibling(overElement);
     // Cannot drop below if the item below is already in the drag source.
     if (!nextElement || !dragInfo.isDraggingBookmark(nextElement.itemId)) {
       validDropPositions |= DropPosition.BELOW;

chrome/browser/resources/bookmarks/item.js

@@ -60,10 +60,6 @@ Polymer({
     lastTouchPoints_: Number,
   },
 
-  hostAttributes: {
-    'role': 'listitem',
-  },
-
   observers: [
     'updateFavicon_(item_.url)',
   ],

chrome/browser/resources/bookmarks/list.html

@@ -35,12 +35,18 @@
 <iron-list id="list"
     items="[[displayedList_]]"
     hidden$="[[isEmptyList_(displayedList_.length)]]"
-    role="group"
+    role="grid"
     aria-label="$i18n{listAxLabel}">
   <template>
-    <bookmarks-item item-id="[[item.id]]" draggable="true"
-        tabindex$="[[tabIndex]]" iron-list-tab-index="[[tabIndex]]">
+    <div role="row" id$="bookmark_[[index]]"
+        aria-rowindex$="[[getAriaRowindex_(index)]]">
+      <bookmarks-item item-id="[[item.id]]"
+          draggable="true"
+          role="gridcell"
+          tabindex$="[[tabIndex]]"
+          iron-list-tab-index="[[tabIndex]]">
       </bookmarks-item>
+    </div>
   </template>
 </iron-list>
 <div id="message" class="centered-message"

chrome/browser/resources/bookmarks/list.js

@@ -344,4 +344,14 @@ Polymer({
       source: MenuSource.LIST,
     });
   },
+
+  /**
+   * Returns a 1-based index for aria-rowindex.
+   * @param {number} index
+   * @return {number}
+   * @private
+   */
+  getAriaRowindex_: function(index) {
+    return index + 1;
+  },
 });