[Files app] Fix DirectoryTree ARIA markup

Add role="group" to tree children so Chromevox reads the depth level
of each sub-tree correctly.

Fix cr.ui.TreeItem to set aria-expanded the same as expanded attribute,
for Files app we set expanded=true before setting hasChildren, which
was causing aria-expanded to be always false.

Add unittest for DirectoryTree to check for aria-expanded and
role=group.

Bug: 888671
Change-Id: I5b99a720a59f051d551655f1aab86effa15d5d89
Reviewed-on: https://chromium-review.googlesource.com/c/1490366Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636280}

ui/file_manager/file_manager/foreground/js/ui/directory_tree.js

@@ -131,7 +131,7 @@ const TREE_ITEM_INNER_HTML = '<div class="tree-row">' +
     ' <span class="icon"></span>' +
     ' <span class="label entry-name"></span>' +
     '</div>' +
-    '<div class="tree-children"></div>';
+    '<div class="tree-children" role="group"></div>';
 
 ////////////////////////////////////////////////////////////////////////////////
 // DirectoryItem

ui/file_manager/file_manager/foreground/js/ui/directory_tree_unittest.js

@@ -29,6 +29,7 @@ let driveFileSystem;
  */
 window.metrics = {
   recordSmallCount: function() {},
+  recordEnum: function() {},
 };
 
 /**
@@ -944,3 +945,53 @@ function testEntryListItemSortEntriesEmpty() {
 
   assertEquals(0, entryListItem.sortEntries([]).length);
 }
+
+
+/** Test EntryListItem.sortEntries doesn't fail sorting empty array. */
+function testAriaExpanded(callback) {
+  // Setup My Drive and Downloads and one folder inside each of them.
+  fakeFileSystemURLEntries['filesystem:drive/root/folder1'] =
+      new MockDirectoryEntry(driveFileSystem, '/root/folder1');
+  const downloadsFileSystem = volumeManager.volumeInfoList.item(1).fileSystem;
+  fakeFileSystemURLEntries['filesystem:downloads/folder1'] =
+      new MockDirectoryEntry(downloadsFileSystem, '/folder1');
+  // The initial resolution for Drive roots will fail since the paths were not
+  // ready so trigger another attempt after adding populating
+  // fakeFileSystemURLEntries.
+  /** @type {VolumeInfoImpl} */ (volumeManager.volumeInfoList.item(0)) .restartResolveDisplayRootForTest();
+
+  // Populate the directory tree with the mock filesystem.
+  let directoryTree = createElements();
+  directoryTree.metadataModel = createMockMetadataModel();
+  const mockMetadata = createMockMetadataModel();
+  DirectoryTree.decorate(
+      directoryTree, directoryModel, volumeManager, mockMetadata,
+      fileOperationManager, true);
+  directoryTree.dataModel = new MockNavigationListModel(volumeManager);
+
+  // Coerce to DirectoryTree type and draw the tree.
+  directoryTree = /** @type {!DirectoryTree} */ (directoryTree);
+  directoryTree.redraw(true);
+
+  const driveItem = directoryTree.items[0];
+  const downloadsItem = directoryTree.items[1];
+  reportPromise(
+      waitUntil(() => {
+        if (!downloadsItem.expanded) {
+          // While downloads isn't expanded aria-expanded should be also false.
+          const ariaExpanded = downloadsItem.getAttribute('aria-expanded');
+          assertTrue(ariaExpanded === 'false' || ariaExpanded === null);
+          // Click has to be async to wait Downloads to reads its children.
+          downloadsItem.querySelector('.expand-icon').click();
+        }
+        // After clicking on expand-icon, aria-expanded should be set to true.
+        return downloadsItem.getAttribute('aria-expanded') === 'true';
+      }).then(() => {
+        // .tree-children should have role="group" otherwise Chromevox doesn't
+        // speak the depth level properly.
+        assertEquals(
+            'group',
+            downloadsItem.querySelector('.tree-children').getAttribute('role'));
+      }),
+      callback);
+}

ui/file_manager/file_manager/main.html

@@ -464,8 +464,8 @@
 
     <div class="dialog-container">
       <div class="dialog-navigation-list">
-        <div class="dialog-navigation-list-contents">
-          <tree id="directory-tree" role="navigation" tabindex="21"></tree>
+        <div class="dialog-navigation-list-contents" role="navigation">
+          <tree id="directory-tree" role="tree" tabindex="21"></tree>
         </div>
         <div class="dialog-navigation-list-footer">
           <div id="progress-center" hidden>

ui/webui/resources/js/cr/ui/tree.js

@@ -554,7 +554,7 @@ cr.define('cr.ui', function() {
       rowItem.setAttribute('has-children', b);
       if (b) {
         this.mayHaveChildren_ = true;
-        this.setAttribute('aria-expanded', 'false');
+        this.setAttribute('aria-expanded', this.expanded);
       }
     },