fix(placeholder): follow HTML5 select screenreader workflow #111

src/auro-select.js

@@ -205,6 +205,8 @@ class AuroSelect extends LitElement {
         this.dropdown.hide();
       }
     });
+
+    this.labelForSr();
   }
 
   /**
@@ -321,6 +323,34 @@ class AuroSelect extends LitElement {
     }
   }
 
+  /**
+   * Handles reading of auro-select by screenreaders.
+   * @private
+   * @returns {void}
+   */
+  labelForSr() {
+    const placeholderLabel = document.createElement("div");
+    const textId = "label";
+
+    placeholderLabel.setAttribute("id", textId);
+    placeholderLabel.setAttribute("aria-live", "polite");
+    placeholderLabel.classList.add("util_displayHiddenVisually");
+
+    this.addEventListener('focus', () => {
+      document.body.appendChild(placeholderLabel);
+
+      if (!this.optionSelected) {
+        document.getElementById(textId).innerHTML = this.placeholder;
+      } else {
+        document.getElementById(textId).innerHTML = `${this.optionSelected.innerText}, ${this.placeholder}`;
+      }
+    });
+
+    this.addEventListener('blur', () => {
+      document.body.removeChild(document.getElementById(textId));
+    });
+  }
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"