removing "input cleared" in favor of properly labelled button as per feedback from @jscholes

inkblotty · web-flow · commit 96408c4c024a · 2021-11-22T14:34:08.000Z
diff --git a/examples/index.html b/examples/index.html
@@ -39,7 +39,7 @@
   </head>
   <body>
     <form>
-      <label id="robots-label">Robots</label>
+      <label id="robots-label" for="robot">Robots</label>
       <!-- To enable auto-select (select first on Enter), use data-autoselect="true" -->
       <auto-complete src="/demo" for="items-popup" aria-labelledby="robots-label" data-autoselect="true">
         <input name="robot" type="text" aria-labelledby="robots-label" autofocus>
@@ -57,10 +57,10 @@
 
     <!-- example where clear button uses input id -->
     <form>
-      <label id="robots-a-label">Robots-a</label>
+      <label id="robots-a-label" for="robot-a">Robots (using Input ID)</label>
       <!-- To enable auto-select (select first on Enter), use data-autoselect="true" -->
-      <auto-complete src="/demo" for="items-popup" aria-labelledby="robots-a-label" data-autoselect="true">
-        <input id="robot-a" name="robot-a" type="search" aria-labelledby="robots-a-label" autofocus>
+      <auto-complete src="/demo" for="items-a-popup" aria-labelledby="robots-a-label" data-autoselect="true">
+        <input id="robot-a" name="robot-a" type="text" aria-labelledby="robots-a-label" autofocus>
         <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
         <button id="robot-a-clear">x</button>
         <ul id="items-a-popup" aria-labelledby="robots-a-label"></ul>
@@ -75,7 +75,7 @@
 
     <!-- example without autoselect -->
     <form>
-      <label id="robots-2-label">Robots 2</label>
+      <label id="robots-2-label" for="robot-2">Robots (without autoselect on enter)</label>
       <auto-complete src="/demo" for="items-2-popup" aria-labelledby="robots-2-label" >
         <input name="robot-2" type="text" aria-labelledby="robots-2-label" autofocus>
         <ul id="items-2-popup" aria-labelledby="robots-2-label"></ul>
diff --git a/src/autocomplete.ts b/src/autocomplete.ts
@@ -56,6 +56,13 @@ export default class Autocomplete {
       this.clearButton = newClearButton
     }
 
+    // if clearButton doesn't have an accessible label, give it one
+    if (this.clearButton && !this.clearButton.getAttribute('aria-label')) {
+      const labelElem = document.querySelector(`label[for="${this.input.name}"`);
+      const label = labelElem?.innerHTML || this.input.getAttribute('aria-label') || '';
+      this.clearButton.setAttribute('aria-label', `clear ${label}`)
+    }
+
     this.results.hidden = true
     this.input.setAttribute('autocomplete', 'off')
     this.input.setAttribute('spellcheck', 'false')
@@ -94,7 +101,7 @@ export default class Autocomplete {
     this.input.value = ''
     this.container.value = ''
     this.input.focus()
-    this.updateFeedbackForScreenReaders('Input cleared. Suggestions hidden.')
+    this.updateFeedbackForScreenReaders('Suggestions hidden.')
   }
 
   onKeydown(event: KeyboardEvent): void {
