adding details on accessibility of input type=search and opting for different error handling of clear button

inkblotty · web-flow · commit e450f99b9e29 · 2021-12-01T19:04:36.000Z
diff --git a/README.md b/README.md
@@ -33,6 +33,8 @@ With a script tag:
     Optional clear button:
     - id must match the id of the input or the name of the input plus "-clear"
     - recommended to be *before* UL elements to avoid conflicting with their blur logic
+    
+    Please see Note below on this button for more details
   -->
   <button id="users-clear">X</button>
   <ul id="users-popup"></ul>
@@ -67,6 +69,12 @@ item whose display text needs to be different:
 <li role="option" data-autocomplete-value="bb8">BB-8 (astromech)</li>
 ```
 
+### A Note on Clear button
+While `input type="search"` comes with an `x` that clears the content of the field and refocuses it on many browsers, the implementation for this control is not keyboard accessible, and so we've opted to enable a customizable clear button so that your keyboard users will be able to interact with it.
+
+As an example:
+> In Chrome, this 'x' isn't a button but a div with a pseudo="-webkit-search-cancel-button". It doesn't have a tab index or a way to navigate to it without a mouse. Additionally, this control is only visible on mouse hover.
+
 ## Attributes
 
 - `open` is true when the auto-complete result list is visible
diff --git a/src/autocomplete.ts b/src/autocomplete.ts
@@ -42,18 +42,18 @@ export default class Autocomplete {
       this.feedback.setAttribute('aria-atomic', 'true')
     }
 
-    // if clearButton is not a button, make it one
+    // if clearButton is not a button, show error
     if (this.clearButton && this.clearButton.tagName.toLowerCase() !== 'button') {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const [tagName, ...otherAttributes] = this.clearButton.attributes
-      const newClearButton = document.createElement('button')
-      newClearButton.innerHTML = this.clearButton.innerHTML
-      newClearButton.id = this.clearButton.id
-      for (const attr of otherAttributes) {
-        newClearButton.setAttribute(attr.name, attr.value)
-      }
-      this.clearButton.parentNode?.replaceChild(newClearButton, this.clearButton)
-      this.clearButton = newClearButton
+      const buttonErrorMessage = `Accessibility violation: ${this.clearButton.tagName} provided for clear button. Please use a "button" element.`
+      const buttonErrorText = '\u26a0 Error: See console'
+      const buttonError = document.createElement('span')
+      buttonError.setAttribute('style', 'color:#92140C')
+      buttonError.textContent = buttonErrorText
+      this.clearButton.parentNode?.replaceChild(buttonError, this.clearButton)
+      this.clearButton = buttonError
+      // eslint-disable-next-line no-console
+      console.log(this.clearButton)
+      throw new Error(buttonErrorMessage)
     }
 
     // if clearButton doesn't have an accessible label, give it one
