Files app: A11y add aria-hidden for Files feedback panel

Add aria-hidden to xf-display-panel element so it doesn't grab the focus
when it doesn't have any content.

Remove |hidden_| attribute which was defined and never used.

Test: browser_tests --gtest_filter="FileManagerJsTest.FilesDisplayPanel"
Bug: 1026535
Change-Id: I4c2a74c7ffe3865a299df3d427bb3fcb806d975f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1926089Reviewed-by: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#717507}

ui/file_manager/file_manager/foreground/elements/files_xf_elements_unittest.js

@@ -2,20 +2,53 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/** @type {!DisplayPanel|!Element} */
+let displayPanel;
+
 /**
  * Adds a xf-display-panel element to the test page.
  */
 function setUpPage() {
   document.body.innerHTML +=
       '<xf-display-panel id="test-xf-display-panel"></xf-display-panel>';
+  displayPanel = assert(document.querySelector('#test-xf-display-panel'));
 }
 
 function tearDown() {
-  /** @type {!DisplayPanel|!Element} */
-  const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
   displayPanel.removeAllPanelItems();
 }
 
+/**
+ * Tests that adding and removing panels to <xf-display-panel> updates the
+ * aria-hidden attribute.
+ */
+function testDisplayPanelAriaHidden() {
+  // Starts without any panel so should be hidden;
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
+
+  // Create a panel, but since it isn't attached so the container should still
+  // be hidden.
+  const progressPanel = displayPanel.createPanelItem('testpanel');
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
+
+  // Attach the Panel. It should make the container visible.
+  displayPanel.attachPanelItem(progressPanel);
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'false');
+
+  // Remove the last panel and should be hidden again.
+  displayPanel.removePanelItem(progressPanel);
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
+
+  // Add multiple panels, then should be visible.
+  displayPanel.addPanelItem('testpanel2');
+  displayPanel.addPanelItem('testpanel3');
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'false');
+
+  // Clear all the panels, then should be hidden.
+  displayPanel.removeAllPanelItems();
+  assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
+}
+
 async function testDisplayPanelAttachPanel(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */

ui/file_manager/file_manager/foreground/elements/xf_display_panel.js

@@ -23,13 +23,6 @@ class DisplayPanel extends HTMLElement {
     /** @private {!function(!Event)} */
     this.listener_;
 
-    /**
-     * True if the panel is not visible.
-     * @type {boolean}
-     * @private
-     */
-    this.hidden_ = true;
-
     /**
      * True if the panel is collapsed to summary view.
      * @type {boolean}
@@ -43,6 +36,8 @@ class DisplayPanel extends HTMLElement {
      * @private
      */
     this.items_ = [];
+
+    this.setAriaHidden_();
   }
 
   /**
@@ -177,6 +172,7 @@ class DisplayPanel extends HTMLElement {
    */
   panelCollapseFinished(event) {
     this.hidden = true;
+    this.setAttribute('aria-hidden', 'true');
     this.classList.remove('expanding');
     this.classList.add('expandfinished');
     this.removeEventListener('animationend', this.listener_);
@@ -352,6 +348,7 @@ class DisplayPanel extends HTMLElement {
     panel.parent = this;
     panel.setAttribute('indicator', 'progress');
     this.items_.push(/** @type {!PanelItem} */ (panel));
+    this.setAriaHidden_();
     return /** @type {!PanelItem} */ (panel);
   }
 
@@ -376,6 +373,7 @@ class DisplayPanel extends HTMLElement {
 
     displayPanel.panels_.appendChild(panel);
     displayPanel.updateSummaryPanel();
+    this.setAriaHidden_();
   }
 
   /**
@@ -402,9 +400,19 @@ class DisplayPanel extends HTMLElement {
     }
     item.remove();
     this.items_.splice(index, 1);
+    this.setAriaHidden_();
     this.updateSummaryPanel();
   }
 
+  /**
+   * Set aria-hidden to false if there is no panel.
+   * @private
+   */
+  setAriaHidden_() {
+    const hasItems = this.connectedPanelItems_().length > 0;
+    this.setAttribute('aria-hidden', !hasItems);
+  }
+
   /**
    * Find a panel with given 'id'.
    * @public
@@ -427,6 +435,7 @@ class DisplayPanel extends HTMLElement {
       item.remove();
     }
     this.items_ = [];
+    this.setAriaHidden_();
     this.updateSummaryPanel();
   }
 }