poc: screen reader token feedback

lindseywild · lindseywild · commit db220fedf684 · 2022-07-21T16:03:56.000Z
diff --git a/README.md b/README.md
@@ -139,7 +139,7 @@ npm install
 npm test
 ```
 
-To view changes locally, run `npm run examples`.
+To view changes locally, run `npm run example`.
 
 In `examples/index.html`, uncomment `<!--<script type="module" src="./dist/bundle.js"></script>-->` and comment out the script referencing the `unpkg` version. This allows you to use the `src` code in this repo. Otherwise, you will be pulling the latest published code, which will not reflect the local changes you are making.
 
diff --git a/examples/index.html b/examples/index.html
@@ -39,6 +39,25 @@
     </script>
   </head>
   <body>
+    <form>
+      <label id="robots-label" for="robot">Robots (Example with multi-tokens)</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 />
+        <!-- if a clear button is passed in, recommended to be *before* UL elements to avoid conflicting with their blur logic -->
+        <button id="robot-clear">x</button>
+        <ul id="items-popup"></ul>
+        <!-- For built-in screen-reader announcements:
+          - Note the ID is the same as the <ul> with "feedback" appended
+          - Also note that aria attributes will be added programmatically if they aren't set correctly  
+        -->
+        <div id="items-popup-feedback" class="sr-only"></div>
+        <!-- Provides feedback if entering/leaving a filter in the input -->
+        <div id="items-popup-filter-feedback"></div>
+      </auto-complete>
+      <button type="submit">Save</button>
+    </form>
+
     <form>
       <label id="robots-label" for="robot">Robots</label>
       <!-- To enable auto-select (select first on Enter), use data-autoselect="true" -->
@@ -101,7 +120,8 @@
       document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (el, url) => (await fetch(url)).text();
     </script>
 
-<!--    <script type="module" src="./dist/bundle.js"></script>-->
-    <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
+
+   <script type="module" src="./dist/bundle.js"></script>
+    <!-- <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script> -->
   </body>
 </html>
diff --git a/src/autocomplete.ts b/src/autocomplete.ts
@@ -12,9 +12,11 @@ export default class Autocomplete {
   results: HTMLElement
   combobox: Combobox
   feedback: HTMLElement | null
+  inputFilterFeedback: HTMLElement | null
   autoselectEnabled: boolean
   clientOptions: NodeListOf<HTMLElement> | null
   clearButton: HTMLElement | null
+  tokenRanges: any
 
   interactingWithList: boolean
 
@@ -29,8 +31,10 @@ export default class Autocomplete {
     this.results = results
     this.combobox = new Combobox(input, results)
     this.feedback = document.getElementById(`${this.results.id}-feedback`)
+    this.inputFilterFeedback = document.getElementById(`${this.results.id}-filter-feedback`)
     this.autoselectEnabled = autoselectEnabled
     this.clearButton = document.getElementById(`${this.input.id || this.input.name}-clear`)
+    this.tokenRanges = []
 
     // check to see if there are any default options provided
     this.clientOptions = results.querySelectorAll('[role=option]')
@@ -41,6 +45,12 @@ export default class Autocomplete {
       this.feedback.setAttribute('aria-atomic', 'true')
     }
 
+    // make sure feedback has all required aria attributes
+    if (this.inputFilterFeedback) {
+      this.inputFilterFeedback.setAttribute('aria-live', 'polite')
+      this.inputFilterFeedback.setAttribute('aria-atomic', 'true')
+    }
+
     // 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}"]`)
@@ -129,6 +139,69 @@ export default class Autocomplete {
       event.stopPropagation()
       event.preventDefault()
     }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const inputValue: string = this.input.value
+      const cursorLocation: number = this.input.selectionStart || 0
+      const tokens: string[] = inputValue.split(' ')
+      const screenReaderFeedbackString = (action: string, filter: string, value: string) =>
+        `${action} the ${filter} filter with ${value} value`
+
+      for (let i = 0; i < this.tokenRanges.length; i++) {
+        const currentTokenRange = this.tokenRanges[i]
+        // Early return if the token does not include a `:` denoting a filter
+        if (!tokens[i].includes(':')) return
+
+        if (
+          (event.key === 'ArrowRight' &&
+            cursorLocation >= currentTokenRange[0] &&
+            cursorLocation < currentTokenRange[1]) ||
+          (event.key === 'ArrowLeft' &&
+            cursorLocation >= currentTokenRange[0] &&
+            cursorLocation - 1 < currentTokenRange[1])
+        ) {
+          const currentRangeValue: string | undefined = tokens[i]
+          let action = 'Entering'
+
+          if (
+            (cursorLocation + 1 === currentTokenRange[1] && event.key === 'ArrowRight') ||
+            (cursorLocation - 1 <= currentTokenRange[0] && event.key === 'ArrowLeft')
+          ) {
+            action = 'Leaving'
+          }
+
+          const [filter, value] = currentRangeValue.split(':')
+          // Only do this one time until it changes
+          if (
+            this.inputFilterFeedback &&
+            this.inputFilterFeedback.textContent !== screenReaderFeedbackString(action, filter, value)
+          ) {
+            this.inputFilterFeedback.textContent = screenReaderFeedbackString(action, filter, value)
+          }
+        }
+      }
+      /** Scenarios:
+      - user presses left arrow
+        - enters filter
+        - leaves filter
+        - doesn't enter or leave a filter
+      - user presses right arrow
+        - enters filter
+        - leaves filter
+        - doesn't enter or leave a filter
+
+      Assumptions:
+        - user will never enter or leave a filter from another filter
+        - a filter and value are separated by a `:`
+
+      // user input samples
+      `repo:github/accessibility design`
+      `is:issue assignee:@lindseywild is:open`
+      `accessibility`
+      `is:pr interactions:>2000`
+      `language:swift closed:>2014-06-11`
+     */
+    }
   }
 
   onInputFocus(): void {
@@ -163,6 +236,27 @@ export default class Autocomplete {
   }
 
   onInputChange(): void {
+    const inputValue: string = this.input.value
+    const tokens: string[] = inputValue.split(' ')
+
+    // Reset tokens array
+    this.tokenRanges = []
+
+    // Creates an array of indecies
+    tokens.map((token, index) => {
+      let startIndex = 0
+      let endIndex = token.length
+
+      if (index > 0) {
+        // Gets previous array's end value
+        const previousValue = this.tokenRanges.at(-1)[1]
+        startIndex = previousValue + 1
+        endIndex = startIndex + token.length
+      }
+
+      this.tokenRanges.push([startIndex, endIndex])
+    })
+
     if (this.feedback && this.feedback.textContent) {
       this.feedback.textContent = ''
     }
