SHIBUI-1663 Fixed issue with announcing list items

TIER · Dec 3, 2019 · 3a33e02 · 3a33e02
1 parent ab43b18
commit 3a33e02
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -6,32 +6,38 @@
         [id]="fieldId"
         class="form-control"
         autocomplete="off"
+        autocorrect="off"
+        aria-autocomplete="list"
         role="combobox"
         type="text"
         [placeholder]="placeholder"
         [attr.aria-activedescendant]="activeDescendant"
-        aria-autocomplete="both"
         [attr.aria-owns]="fieldId + '__listbox'"
         [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'"
+        [attr.aria-haspopup]="fieldId + '__listbox'"
         (focus)="handleInputFocus()"
         (blur)="handleInputBlur()"
     />
     <div class="input-group-append" *ngIf="dropdown">
         <button class="btn btn-outline-secondary"
             type="button"
+            role="button"
             aria-haspopup="true"
             [attr.aria-expanded]="state.currentState.menuOpen"
-            (click)="state.setState({menuOpen: !state.currentState.menuOpen})">
+            [attr.aria-activedescendant]="activeDescendant"
+            [attr.aria-owns]="fieldId + '__listbox'"
+            [attr.aria-expanded]="(menuIsVisible$ | async) ? 'true' : 'false'"
+            (click)="handleDropdown($event)">
             <i class="fa fa-caret-down"></i>
             <span class="sr-only">Toggle Dropdown</span>
         </button>
     </div>
 </div>
-<ul class="dropdown-menu"
+<div class="dropdown-menu"
     [id]="fieldId + '__listbox'"
     role="listbox"
     [class.show]="(menuIsVisible$ | async) && !processing && !input.disabled">
-    <li *ngFor="let option of matches; let i = index;"
+    <button *ngFor="let option of matches; let i = index;"
         #matchElement
         class="dropdown-item"
         [class.active]="state.currentState.selected === i"
@@ -42,10 +48,13 @@
         (mousedown)="handleOptionMouseDown($event)"
         (mouseenter)="handleOptionMouseEnter(i)"
         (mouseout)="handleOptionMouseOut()"
+        tabindex="0"
         role="option"
         [attr.aria-selected]="state.currentState.focused === i"
-        [innerHTML]="option | highlight:this.input.value"></li>
-    <li class="dropdown-item dropdown-item-noresults" *ngIf="matches && matches.length === 0 && !processing">
+        [attr.aria-label]="this.input.value"
+        [innerHTML]="option | highlight:this.input.value">
+    </button>
+    <p class="dropdown-item dropdown-item-noresults" *ngIf="matches && matches.length === 0 && !processing">
         {{ noneFoundText }}
-    </li>
-</ul>
+    </p>
+</div>
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts
@@ -153,6 +153,12 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         });
     }
 
+    handleDropdown($event: MouseEvent | KeyboardEvent | Event): void {
+        const open = this.state.currentState.menuOpen;
+        this.state.setState({menuOpen: !open});
+        this.handleOptionFocus(0);
+    }
+
     handleViewMore($event: MouseEvent | KeyboardEvent | Event): void {
         $event.preventDefault();
         $event.stopPropagation();
@@ -235,6 +241,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
             focused: index,
             selected: index
         });
+
+        console.log(this.activeDescendant);
     }
     handleOptionClick(index: number): void {
         const selectedOption = this.matches[index];
@@ -278,7 +286,6 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     }
 
     handleDownArrow(event: KeyboardEvent): void {
-        event.preventDefault();
         let isNotAtBottom = this.state.currentState.selected !== this.matches.length - 1;
         if (this.showMoreAvailable) {
             isNotAtBottom = this.state.currentState.selected !== this.matches.length;
@@ -287,6 +294,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         if (allowMoveDown) {
             this.handleOptionFocus(this.state.currentState.selected + 1);
         }
+        event.preventDefault();
     }
 
     handleSpace(event: KeyboardEvent): void {
@@ -344,7 +352,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     }
 
     getOptionId(index): string {
-        return `${this.fieldId}__option--${index}`;
+        return `${this.fieldId}__option--${index}`.replace('/', '');
     }
 
     get hasAutoselect(): boolean {

diff --git a/ui/src/app/shared/autocomplete/autocomplete.model.ts b/ui/src/app/shared/autocomplete/autocomplete.model.ts
@@ -9,9 +9,9 @@ export const defaultState: AutoCompleteState = {
 };
 
 export interface AutoCompleteState {
-    focused: number | null;
-    selected: number | null;
-    hovered: number | null;
+    focused: number;
+    selected: number;
+    hovered: number;
     menuOpen: boolean;
 }