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);
   });