From 4116dcf2fbf148ea7fc40a482033bab776330d02 Mon Sep 17 00:00:00 2001
From: Andrew Tran <trandrew08@gmail.com>
Date: Wed, 5 Aug 2020 09:27:12 -0500
Subject: [PATCH] Fix 508 AMP issue on Autocomplete

---
 .../autocomplete/autocomplete.template.html   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/ui-kit/form-controls/autocomplete/autocomplete.template.html b/src/ui-kit/form-controls/autocomplete/autocomplete.template.html
index 5ec78f635..86753c52c 100644
--- a/src/ui-kit/form-controls/autocomplete/autocomplete.template.html
+++ b/src/ui-kit/form-controls/autocomplete/autocomplete.template.html
@@ -4,17 +4,15 @@
   <sam-label-wrapper #wrapper [label]="labelText" [hint]="hint" [showFullHint]="showFullHint" [name]="id"
     [required]="required" [errorMessage]="errorMessage">
     <div class="input-container">
-      <div role="combobox" [attr.id]="id+'-container'"
-        [attr.aria-owns]="results && results.length > 0 ? 'sam-autocomplete-results' : filteredKeyValuePairs && filteredKeyValuePairs.length > 0  ? 'sam-autocomplete-results-kv':undefined"
-        [attr.aria-expanded]="(((filteredKeyValuePairs && filteredKeyValuePairs.length > 0) || (displayFreeTextKeyValueResults()) ) && hasFocus)
+      <input #input role="combobox" [attr.id]="id" [attr.tabindex]="tabIndex" [attr.aria-expanded]="(((filteredKeyValuePairs && filteredKeyValuePairs.length > 0) || (displayFreeTextKeyValueResults()) ) && hasFocus)
         ||(((results && results.length > 0) || (displayFreeTextSimpleResults())) && hasFocus)
-        ">
-        <input [attr.id]="id" [attr.tabindex]="tabIndex" #input autocomplete="off"
-          [attr.placeholder]="config?.placeholder" [attr.title]="config?.title" [attr.name]="name" [attr.aria-label]="labelText" type="text"
-          (focus)="inputFocusHandler($event)"   (keydown)="onKeydown($event)" [(ngModel)]="inputValue"
-          (ngModelChange)="onChange()" [attr.aria-activedescendant]="activeDescendant" aria-autocomplete="list"
-          [attr.aria-controls]="results && results.length > 0 ? 'sam-autocomplete-results' : filteredKeyValuePairs && filteredKeyValuePairs.length > 0  ? 'sam-autocomplete-results-kv':undefined">
-      </div>
+        "
+        [attr.aria-owns]="results && results.length > 0 ? 'sam-autocomplete-results' : filteredKeyValuePairs && filteredKeyValuePairs.length > 0  ? 'sam-autocomplete-results-kv':undefined"
+        [attr.aria-activedescendant]="activeDescendant" aria-autocomplete="list"
+        [attr.aria-controls]="results && results.length > 0 ? 'sam-autocomplete-results' : filteredKeyValuePairs && filteredKeyValuePairs.length > 0  ? 'sam-autocomplete-results-kv':undefined"
+        [attr.placeholder]="config?.placeholder" [attr.title]="config?.title" [attr.name]="name"
+        [attr.aria-label]="labelText" type="text" (focus)="inputFocusHandler($event)" (keydown)="onKeydown($event)"
+        [(ngModel)]="inputValue" (ngModelChange)="onChange()">
       <span *ngIf="config && config.addOnIconClass && config.addOnIconName" (click)="addOnIconClick()" class="add-on"
         role="button">
         <span class="{{config.addOnIconClass}}"></span>
@@ -40,8 +38,7 @@
         <!-- Lists data if array of objects with key/value pair is passed to component -->
         <ul role="listbox" id="sam-autocomplete-results-kv" class="usa-unstyled-list" #resultsListKV
           *ngIf="((filteredKeyValuePairs && filteredKeyValuePairs.length > 0) || (displayFreeTextKeyValueResults()) ) && hasFocus"
-          (scroll)="onScroll()"
-        >
+          (scroll)="onScroll()">
           <li id="resultFreeText" [class.multiple-values]="config?.keyValueConfig?.subheadProperty"
             (mouseenter)="listItemHover(i)" *ngIf="freeTextAvalible()" [ngClass]="freeTextClass()"
             (click)="setSelected(inputValue)">{{inputValue}} -