fix: pfe-accordion - fixing issues with accessibility when opening and closing panels (#1813) (#1856)

* Fixing issues with accessibility when opening and closing panels.

Fixes #1813

* updating changelog

Author: kylebuch8

.github/workflows/tests.yml

@@ -81,7 +81,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 12.x
 
       # Caching speeds up the npm install step
       - name: Cache node modules
@@ -126,7 +126,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 12.x
 
       # Caching speeds up the npm install step
       - name: Access cached node modules
@@ -172,7 +172,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 12.x
 
       # Set up cross-browser testing on Chromium, WebKit and Firefox with Playwright.
       - name: Set up Playwright
@@ -244,7 +244,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 12.x
 
       # Caching speeds up the npm install step
       - name: Access cached node modules

CHANGELOG-1.x.md

@@ -35,6 +35,7 @@ class PfeAccordionPanel extends PFElement {
         title: "Expanded",
         type: Boolean,
         default: false,
+        observer: "_expandedChanged"
       },
       ariaLabelledby: {
         type: String,
@@ -49,6 +50,17 @@ class PfeAccordionPanel extends PFElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this._expandedChanged();
+  }
+
+  _expandedChanged() {
+    if (this.expanded) {
+      this.removeAttribute("aria-hidden");
+      this.removeAttribute("tabindex");
+    } else {
+      this.setAttribute("aria-hidden", "true");
+      this.setAttribute("tabindex", "-1");
+    }
   }
 }
 

elements/pfe-accordion/src/pfe-accordion-panel.js

@@ -346,7 +346,7 @@ class PfeAccordion extends PFElement {
   _keydownHandler(evt) {
     const currentHeader = evt.target;
 
-    if (!this._isHeader(currentHeader)) {
+    if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) {
       return;
     }
 
@@ -377,10 +377,6 @@ class PfeAccordion extends PFElement {
 
     if (newHeader) {
       newHeader.shadowRoot.querySelector("button").focus();
-
-      const index = this._getIndex(newHeader);
-      this.expand(index);
-      this._setFocus = true;
     }
   }
 

elements/pfe-accordion/src/pfe-accordion.js

@@ -52,6 +52,8 @@ describe("<pfe-accordion>", () => {
     assert.equal(true, header.expanded);
     assert.isTrue(panel.hasAttribute('expanded'));
     assert.isTrue(panel.expanded);
+    assert.isTrue(panel.hasAttribute('expanded'));
+    assert.isTrue(panel.expanded);
   });
 
   it('should collapse a panel when an already expanded header is selected', async () => {
@@ -69,6 +71,8 @@ describe("<pfe-accordion>", () => {
     assert.equal(false, header.expanded);
     assert.isFalse(panel.hasAttribute('expanded'));
     assert.isFalse(panel.expanded);
+    assert.isTrue(panel.getAttribute("aria-hidden") == "true");
+    assert.isTrue(panel.getAttribute("tabindex") == "-1");
   });
 
   it('should randomly generate ids for aria use', async () => {
@@ -101,13 +105,17 @@ describe("<pfe-accordion>", () => {
     assert.equal(true, secondHeader.expanded);
     assert.isTrue(secondPanel.hasAttribute('expanded'));
     assert.isTrue(secondPanel.expanded);
+    assert.isFalse(secondPanel.hasAttribute("aria-hidden"));
+    assert.isFalse(secondPanel.hasAttribute("tabindex"));
 
     pfeAccordion.toggle(1);
 
     assert.isTrue(secondHeader.button.getAttribute('aria-expanded') == "false");
     assert.equal(false, secondHeader.expanded);
     assert.isFalse(secondPanel.hasAttribute('expanded'));
     assert.isFalse(secondPanel.expanded);
+    assert.isTrue(secondPanel.getAttribute("aria-hidden") == "true");
+    assert.isTrue(secondPanel.getAttribute("tabindex") == "-1");
   });
 
   it('should expand a panel when expand is called', async () => {
@@ -121,6 +129,8 @@ describe("<pfe-accordion>", () => {
     assert.equal(true, secondHeader.expanded);
     assert.isTrue(secondPanel.hasAttribute('expanded'));
     assert.isTrue(secondPanel.expanded);
+    assert.isFalse(secondPanel.hasAttribute("aria-hidden"));
+    assert.isFalse(secondPanel.hasAttribute("tabindex"));
   });
 
   it('should collapse a panel when collapse is called', async () => {
@@ -135,6 +145,8 @@ describe("<pfe-accordion>", () => {
     assert.equal(false, secondHeader.expanded);
     assert.isFalse(secondPanel.hasAttribute('expanded'));
     assert.isFalse(secondPanel.expanded);
+    assert.isTrue(secondPanel.getAttribute("aria-hidden") == "true");
+    assert.isTrue(secondPanel.getAttribute("tabindex") == "-1");
   });
 
   it('should expand all panels when expandAll is called', async () => {
@@ -152,6 +164,8 @@ describe("<pfe-accordion>", () => {
     panels.forEach(panel => {
       assert.isTrue(panel.hasAttribute('expanded'));
       assert.isTrue(panel.expanded);
+      assert.isFalse(panel.hasAttribute("aria-hidden"));
+      assert.isFalse(panel.hasAttribute("tabindex"));
     });
   });
 
@@ -171,6 +185,8 @@ describe("<pfe-accordion>", () => {
     panels.forEach(panel => {
       assert.isFalse(panel.hasAttribute('expanded'));
       assert.isFalse(panel.expanded);
+      assert.isTrue(panel.getAttribute("aria-hidden") == "true");
+      assert.isTrue(panel.getAttribute("tabindex") == "-1");
     });
   });
 
@@ -224,6 +240,8 @@ describe("<pfe-accordion>", () => {
       const panel = pfeAccordion._panelForHeader(header);
       assert.isTrue(panel.expanded);
       assert.isTrue(panel.hasAttribute("expanded"));
+      assert.isFalse(panel.hasAttribute("aria-hidden"));
+      assert.isFalse(panel.hasAttribute("tabindex"));
     });
   });
 
@@ -402,5 +420,22 @@ describe("<pfe-accordion-panel>", () => {
     assert.isTrue(panel.hasAttribute('aria-labelledby'));
     assert.equal(panel.getAttribute('role'), 'region');
     assert.equal(panel.id, header.getAttribute('aria-controls'));
+    assert.isFalse(panel.hasAttribute("expanded"));
+    assert.isTrue(panel.getAttribute("aria-hidden") == "true");
+    assert.isTrue(panel.getAttribute("tabindex") == "-1");
   });
+
+  it("should add the proper attributes when a panel's expanded property is toggled", async () => {
+    const pfeAccordion = await createFixture(testElement);
+    const panel = pfeAccordion.querySelector("pfe-accordion-panel");
+    
+    
+    assert.isFalse(panel.hasAttribute("expanded"));
+    assert.isTrue(panel.getAttribute("aria-hidden") == "true");
+    assert.isTrue(panel.getAttribute("tabindex") == "-1");
+
+    panel.expanded = true;
+    assert.isFalse(panel.hasAttribute("aria-hidden"));
+    assert.isFalse(panel.hasAttribute("tabindex"));
+  })
 });