ARIA activedescendant, label

Author: Lewiscowles1986

lib/clear-suggestions.js

@@ -6,5 +6,6 @@ function clearSuggestions(state) {
   state.selectedIndex = -1;
   removeListElement(state);
   state.input.removeAttribute("aria-controls");
+  state.input.removeAttribute("aria-activedescendant");
   state.plete.setAttribute("aria-expanded", "false");
 }

lib/highlight.js

@@ -5,6 +5,7 @@ function highlight(state, index) {
     const item = state.list.querySelectorAll("plete-item")[index];
     if (item) {
       item.classList.add("highlight");
+      state.input.setAttribute("aria-activedescendant", item.id);
     }
   }
 }

lib/render-item.js

@@ -8,6 +8,7 @@ function renderItem(state, value) {
   const attrValue = valueIsString ? value : value.id;
   const label = valueIsString ? value : value.label;
 
+  item.setAttribute("aria-label", `Choice: ${label}.`);
   item.setAttribute("value", attrValue);
   item.setAttribute("title", label);
 

lib/render.js

@@ -9,7 +9,8 @@ function render(state, data) {
   addListElement(state, select);
   const boundRenderItem = renderItem.bind(null, state);
 
-  data.map(boundRenderItem).forEach(function(item) {
+  data.map(boundRenderItem).forEach(function(item, idx) {
+    item.id = `plete-item-${idx}`;
     state.list.appendChild(item);
   });
 

test/aria-support.test.js

@@ -1,4 +1,4 @@
-import { assert } from "@sinonjs/referee-sinon";
+import { assert, refute } from "@sinonjs/referee-sinon";
 import { fireEvent, waitForElement } from "@testing-library/dom";
 import { setupTest } from "./test-helper";
 
@@ -47,6 +47,32 @@ describe("Plete", function() {
         });
       });
 
+      it("renders the list items with an `aria-label` attribute", function() {
+        const listItems = this.list.querySelectorAll("plete-item");
+
+        assert.isTrue(listItems.length > 0);
+        listItems.forEach(function(item) {
+          refute.isNull(item.getAttribute("aria-label"));
+        });
+      });
+
+      it("adds an `aria-activedescendant` attribute to the input", function() {
+        const listItems = this.list.querySelectorAll("plete-item");
+
+        assert.isTrue(listItems.length > 0);
+        refute.isNull(this.input);
+        refute.isNull(this.input.getAttribute("aria-activedescendant"));
+      });
+
+      it("renders the list items with an `id` attribute", function() {
+        const listItems = this.list.querySelectorAll("plete-item");
+
+        assert.isTrue(listItems.length > 0);
+        listItems.forEach(function(item) {
+          refute.isNull(item.getAttribute("id"));
+        });
+      });
+
       it("sets `aria-expanded` on the `plete` element to 'true'", function() {
         const plete = this.input.closest("plete");