fix: pfe-autocomplete update aria-selected attribute (#1713)

kelsS · github-actions[bot] · kylebuch8 · web-flow · commit f378caab97b4 · 2021-08-05T15:40:11.000Z
* CPFED-4185: started adding updated aria haspop features to autocomplete

* CPFED-4185: started adding updated aria haspop features to autocomplete

* CPFED-4185: started working on value change observer for dropdown list items

* CPFED-4185: updated aria selected functions in droplist component

* CPFED-4185: updated aria selected functions in droplist component

* CPFED-4185: worked through aria-selected issues with Wes and refactored some code to use less memory

* CPFED-4185: worked through aria-selected issues with Wes and refactored some code to use less memory

* CPFED-4185: code cleanup

* Update elements/pfe-autocomplete/src/pfe-autocomplete.js

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* Update elements/pfe-autocomplete/src/pfe-autocomplete.js

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* Update elements/pfe-autocomplete/src/pfe-autocomplete.js

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* Update elements/pfe-autocomplete/src/pfe-search-droplist.scss

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* CPFED-4185: updated a11y attributes and the demo page to address Lighthouse a11y issues. Updated tests to check aria attributes.

* Update CHANGELOG-1.x.md

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: Kyle Buchanan &lt;kylebuch8@gmail.com&gt;
Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,5 +1,6 @@
 # 1.11.0 (2021)
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-autocomplete update aria-selected attribute
 - [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry
 - [](https://github.com/patternfly/patternfly-elements/commit/) fix: container sass placeholder using incorrect variable for spacing (#1522)
 - [099dc3e](https://github.com/patternfly/patternfly-elements/commit/099dc3e2d3ce732a32ecde0644f5c03ec1e8dd9c) fix: Accordion alignment with latest design kit
diff --git a/elements/pfe-autocomplete/demo/index.html b/elements/pfe-autocomplete/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <title>PatternFly Elements: Auto-complete Demo</title>
@@ -58,8 +58,8 @@ <h2 class="pfe-headline-2" slot="pfe-band--header">Static Data</h2>
         <input placeholder="Enter Your Search Term" />
       </pfe-autocomplete>
     </div>
-    <h4 class="pfe-headline-4">Static Selected Value: <span style="color:var(--pfe-theme--color--ui-accent)"
-        id="staticSelectedValue"></span></h4>
+    <h3 class="pfe-headline-4">Static Selected Value: <span style="color:var(--pfe-theme--color--ui-accent)"
+        id="staticSelectedValue"></span></h3>
   </pfe-band>
 
   <pfe-band color="darker">
@@ -70,7 +70,7 @@ <h2 class="pfe-headline-2" slot="pfe-band--header">Lazy Loading with init-value<
         <input placeholder="Enter Your Search Term" />
       </pfe-autocomplete>
     </div>
-    <h4 class="pfe-headline-4">Ajax Selected Value: <span id="ajaxSelectedValue"></span></h4>
+    <h3 class="pfe-headline-4">Ajax Selected Value: <span id="ajaxSelectedValue"></span></h3>
   </pfe-band>
 
   <pfe-band color="lightest">
diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js
@@ -136,8 +136,11 @@ class PfeAutocomplete extends PFElement {
       this._input.setAttribute("aria-label", "Search");
     }
 
-    this._input.setAttribute("aria-autocomplete", "both");
+    this._input.setAttribute("aria-autocomplete", "list");
     this._input.setAttribute("aria-haspopup", "true");
+    this._input.setAttribute("aria-owns", "droplist-items");
+    this._input.setAttribute("aria-controls", "droplist-items");
+    this._input.setAttribute("aria-expanded", "false");
     this._input.setAttribute("type", "search");
     this._input.setAttribute("autocomplete", "off");
     this._input.setAttribute("autocorrect", "off");
@@ -260,6 +263,7 @@ class PfeAutocomplete extends PFElement {
   _closeDroplist() {
     this._dropdown.open = null;
     this._dropdown.removeAttribute("active-index");
+    this._input.setAttribute("aria-expanded", "false");
   }
 
   _openDroplist() {
@@ -269,6 +273,7 @@ class PfeAutocomplete extends PFElement {
     this.emitEvent(PfeAutocomplete.events.optionsShown, {
       composed: true,
     });
+    this._input.setAttribute("aria-expanded", "true");
   }
 
   _optionSelected(e) {
@@ -309,14 +314,24 @@ class PfeAutocomplete extends PFElement {
     this._closeDroplist();
   }
 
+  /**
+   * Returns the HTML of the active element
+   * @param {number} activeIndex Index of an element in the droplist
+   * @return {string} The HTML inside of the given index as a string
+   */
   _activeOption(activeIndex) {
     if (activeIndex === null || activeIndex === "null") return;
     return this._dropdown.shadowRoot.querySelector("li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")").innerHTML;
   }
 
+  /**
+   * Handle keyboard input, we care about arrow keys, enter, and escape
+   * @param {object} e - keypress event
+   */
   _inputKeyUp(e) {
     let key = e.keyCode;
 
+    // Check to see if it's a key we care about
     if (
       this._dropdown.data.length === 0 &&
       key !== KEYCODE.DOWN &&
@@ -340,11 +355,14 @@ class PfeAutocomplete extends PFElement {
 
       activeIndex -= 1;
 
+      // Go to the last item if we're at -1 index
       if (activeIndex < 0) {
         activeIndex = optionsLength - 1;
       }
 
+      // Get the HTML of the active element
       this._input.value = this._activeOption(activeIndex);
+
     } else if (key === KEYCODE.DOWN) {
       if (!this._dropdown.open) {
         return;
@@ -357,7 +375,9 @@ class PfeAutocomplete extends PFElement {
         activeIndex = 0;
       }
 
+      // Go to the last item if we're at -1 index
       this._input.value = this._activeOption(activeIndex);
+
     } else if (key === KEYCODE.ENTER) {
       if (this._activeOption(activeIndex)) {
         this.emitEvent(PfeAutocomplete.events.select, {
@@ -438,6 +458,7 @@ class PfeSearchDroplist extends PFElement {
     this.activeIndex = null;
     this._ul = this.shadowRoot.querySelector("ul");
     this._ul.addEventListener("mousedown", this._optionSelected.bind(this));
+
   }
 
   disconnectedCallback() {
@@ -472,25 +493,40 @@ class PfeSearchDroplist extends PFElement {
       .join("")}`;
   }
 
+  /**
+   * Handle state changes when active droplist item has been changed
+   */
   _activeIndexChanged() {
+    // Make a quick exit if necessary
     if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return;
 
-    // remove active class
-    if (this._ul.querySelector(".active")) {
-      this._ul.querySelector(".active").classList.remove("active");
-    }
+    // Previous element may not exist
+    const previouslyActiveElement = this._ul.querySelector(".active");
+    const activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
 
-    // add active class to selected option
-    let activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")");
+    // Handle any element that should no longer be selected
+    if (previouslyActiveElement) {
+      previouslyActiveElement.classList.remove("active");
+      previouslyActiveElement.removeAttribute("aria-selected");
+    }
 
+    // Update newly selected element to have proper attributes and settings
     activeOption.classList.add("active");
+    // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced
+    // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete
+    // component. It helps ensure that the screen reader user knows what element is active when moving through the
+    // list of items with the arrow keys
+    activeOption.setAttribute("aria-selected", "true");
 
     // scroll to selected element when selected item with keyboard is out of view
     let ulWrapper = this.shadowRoot.querySelector(".droplist");
     let activeOptionHeight = activeOption.offsetHeight;
     activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"), 10);
     ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;
+
+    return activeOption;
   }
+
 }
 
 PFElement.create(PfeSearchDroplist);
diff --git a/elements/pfe-autocomplete/src/pfe-search-droplist.html b/elements/pfe-autocomplete/src/pfe-search-droplist.html
@@ -1,5 +1,5 @@
 <div class="suggestions-aria-help sr-only" aria-hidden="false" role="status"></div>
 <div class="droplist">
-  <ul role="listbox" tabindex="-1">
+  <ul role="listbox" id="droplist-items" tabindex="-1">
   </ul>
 </div>
diff --git a/elements/pfe-autocomplete/src/pfe-search-droplist.scss b/elements/pfe-autocomplete/src/pfe-search-droplist.scss
@@ -12,6 +12,10 @@
   display: block;
 }
 
+:host([debug]) [aria-selected] {
+  box-shadow: inset 0 0 0 pfe-var(ui--border-width--md) pfe-var(feedback--critical);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/elements/pfe-autocomplete/test/old-test/pfe-autocomplete-aria_test.html b/elements/pfe-autocomplete/test/old-test/pfe-autocomplete-aria_test.html
@@ -22,14 +22,22 @@
           describe('<pfe-autocomplete>', () => {
             it('should contain appropriate aria attributes on input box', done => {
               const autocompleteElem = fixture('autocomplete-a11y');
-              
+
               flush(() => {
                 const input = autocompleteElem._input;
 
                 expect(input.getAttribute("role")).to.equal("combobox");
                 expect(input.getAttribute("aria-label")).to.equal("Search");
-                expect(input.getAttribute("aria-autocomplete")).to.equal("both");
+                expect(input.getAttribute("aria-autocomplete")).to.equal("list");
                 expect(input.getAttribute("aria-haspopup")).to.equal("true");
+                expect(input.getAttribute("aria-expanded")).to.equal("false");
+                expect(input.getAttribute("aria-owns")).to.equal("droplist-items");
+                expect(input.getAttribute("aria-controls")).to.equal("droplist-items");
+                expect(input.getAttribute("type")).to.equal("search");
+                expect(input.getAttribute("autocomplete")).to.equal("off");
+                expect(input.getAttribute("autocorrect")).to.equal("off");
+                expect(input.getAttribute("autocapitalize")).to.equal("off");
+                expect(input.getAttribute("spellcheck")).to.equal("false");
                 done();
               });
             });
diff --git a/elements/pfe-autocomplete/test/pfe-autocomplete-aria_test.html b/elements/pfe-autocomplete/test/pfe-autocomplete-aria_test.html
@@ -22,18 +22,27 @@
           describe('<pfe-autocomplete>', () => {
             it('should contain appropriate aria attributes on input box', done => {
               const autocompleteElem = fixture('autocomplete-a11y');
-              
+
               flush(() => {
                 const input = autocompleteElem._input;
 
                 expect(input.getAttribute("role")).to.equal("combobox");
                 expect(input.getAttribute("aria-label")).to.equal("Search");
-                expect(input.getAttribute("aria-autocomplete")).to.equal("both");
+                expect(input.getAttribute("aria-autocomplete")).to.equal("list");
                 expect(input.getAttribute("aria-haspopup")).to.equal("true");
+                expect(input.getAttribute("aria-expanded")).to.equal("false");
+                expect(input.getAttribute("aria-owns")).to.equal("droplist-items");
+                expect(input.getAttribute("aria-controls")).to.equal("droplist-items");
+                expect(input.getAttribute("type")).to.equal("search");
+                expect(input.getAttribute("autocomplete")).to.equal("off");
+                expect(input.getAttribute("autocorrect")).to.equal("off");
+                expect(input.getAttribute("autocapitalize")).to.equal("off");
+                expect(input.getAttribute("spellcheck")).to.equal("false");
                 done();
               });
             });
-          });
+
+          }); // end describe()
 
           a11ySuite('autocomplete-a11y');
         </script>
diff --git a/elements/pfe-autocomplete/test/pfe-autocomplete_test.js b/elements/pfe-autocomplete/test/pfe-autocomplete_test.js
@@ -220,6 +220,44 @@ describe('<pfe-autocomplete>', () => {
     });
   });
 
+  it('should add aria-selected true on first element on keydown when dropdown is open', done => {
+    flush(() => {
+      const input = autocompleteElem._input;
+      droplistElem.data = ['option 1', 'option 2'];
+      droplistElem.reflow = true;
+      droplistElem.open = true;
+      input.focus();
+
+      input.addEventListener('keyup', (e) => {
+        let option = droplistElem.shadowRoot.querySelector('li:nth-child(1)');
+
+        window.setTimeout(() => {
+          expect(option.hasAttribute("aria-selected")).to.be.eql(true);
+          done();
+        }, 1000);
+      });
+
+      MockInteractions.keyUpOn(input, 40);
+    });
+  });
+
+  it('should set aria-expanded to true when dropdown is open', done => {
+    flush(() => {
+      const input = autocompleteElem._input;
+      input.focus();
+
+      input.addEventListener('keyup', (e) => {
+        window.setTimeout(() => {
+          // @todo: make sure this is checking if the value of aria-expanded is set to true
+          expect(input.hasAttribute("aria-expanded")).to.be.eql(true);
+          done();
+        }, 1000);
+      });
+
+     MockInteractions.keyUpOn(input, 40);
+    });
+  });
+
   it('should update items list on mutation', () => {
     droplistElem.data = ['option 1', 'option 2'];
     droplistElem.reflow = true;
@@ -336,4 +374,4 @@ describe('<pfe-autocomplete>', () => {
     });
   });
 
-});
+});
