[WebUI] Change <cr-menu-item> to have tabindex=-1 by default

Currently <cr-menu-item> don't have tabindex at all by default so it
can't be focused, making cr.ui.Menu.focusSelectedItem less useful.

Tabindex=-1 is focused only via JS not via Tab key, if a tabindex is
specified like tabindex=0 which receives focus via Tab key, this value
is preserved.

Bug: 889153
Change-Id: I32339c936ad01e67d1214bc2f721168ef24219d1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1535319
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#644643}

chrome/test/data/webui/menu_test.html

@@ -202,6 +202,27 @@ function testFocusSelectedItems() {
   // Focus remains in the first item.
   assertEquals(0, menu.selectedIndex);
 }
+
+/**
+ * Tests that cr.ui.MenuItem defaults to tabindex=-1.
+ */
+function testMenuItemTabIndex() {
+  // Defaults to -1.
+  const item1 = menu.addMenuItem({label: 'item 1'});
+  assertEquals('-1', item1.getAttribute('tabindex'));
+
+  // Keeps previously set tabindex.
+  const itemDiv = document.createElement('div');
+  itemDiv.setAttribute('tabindex', '0');
+  cr.ui.decorate(itemDiv, cr.ui.MenuItem);
+  assertEquals('0', itemDiv.getAttribute('tabindex'));
+
+  // Separator doesn't get tabindex.
+  menu.addSeparator();
+  const separator = menu.menuItems[menu.menuItems.length - 1];
+  assertTrue(separator.isSeparator());
+  assertFalse(separator.hasAttribute('tabindex'));
+}
 </script>
 </body>
 </html>

ui/webui/resources/js/cr/ui/menu_item.js

@@ -46,6 +46,7 @@ cr.define('cr.ui', function() {
       // it is used in element's aria-activedescendant attribute.
       if (!this.isSeparator()) {
         this.setAttribute('role', 'menuitem');
+        this.setAttribute('tabindex', this.getAttribute('tabindex') || -1);
       }
 
       let iconUrl;