fix(typeahead): fix ARIA attributes

Closes #1454 Closes #1454
ng-bootstrap · Apr 11, 2017 · ba4f48f · ba4f48f
1 parent 4932709
commit ba4f48f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/typeahead/typeahead.spec.ts b/src/typeahead/typeahead.spec.ts
@@ -586,9 +586,21 @@ describe('ngb-typeahead', () => {
       fixture.detectChanges();
 
       expect(input.getAttribute('role')).toBe('combobox');
+      expect(input.getAttribute('aria-multiline')).toBe('false');
       expect(input.getAttribute('aria-autocomplete')).toBe('list');
       expect(input.getAttribute('aria-expanded')).toBe('false');
       expect(input.getAttribute('aria-owns')).toBeNull();
+      expect(input.getAttribute('aria-autocomplete')).toBe('list');
+      expect(input.getAttribute('aria-activedescendant')).toBeNull();
+    });
+
+    it('should correctly set aria-autocomplete depending on showHint', () => {
+      const fixture = createTestComponent('<input type="text" [ngbTypeahead]="findObjects"  [showHint]="true" />');
+      const input = getNativeInput(fixture.nativeElement);
+
+      fixture.detectChanges();
+
+      expect(input.getAttribute('aria-autocomplete')).toBe('both');
     });
 
     it('should have the correct ARIA attributes when interacting with input', async(() => {
@@ -605,10 +617,17 @@ describe('ngb-typeahead', () => {
            expect(input.getAttribute('aria-owns')).toMatch(/ngb-typeahead-[0-9]+/);
            expect(input.getAttribute('aria-activedescendant')).toMatch(/ngb-typeahead-[0-9]+-0/);
 
-           const event = createKeyDownEvent(Key.ArrowDown);
+           let event = createKeyDownEvent(Key.ArrowDown);
            getDebugInput(fixture.debugElement).triggerEventHandler('keydown', event);
            fixture.detectChanges();
            expect(input.getAttribute('aria-activedescendant')).toMatch(/ngb-typeahead-[0-9]+-1/);
+
+           event = createKeyDownEvent(Key.Enter);
+           getDebugInput(fixture.debugElement).triggerEventHandler('keydown', event);
+           fixture.detectChanges();
+           expect(input.getAttribute('aria-expanded')).toBe('false');
+           expect(input.getAttribute('aria-owns')).toBeNull();
+           expect(input.getAttribute('aria-activedescendant')).toBeNull();
          });
        }));
   });

diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
@@ -72,7 +72,8 @@ let nextWindowId = 0;
     'autocapitalize': 'off',
     'autocorrect': 'off',
     'role': 'combobox',
-    'aria-autocomplete': 'list',
+    'aria-multiline': 'false',
+    '[attr.aria-autocomplete]': 'showHint ? "both" : "list"',
     '[attr.aria-activedescendant]': 'activeDescendant',
     '[attr.aria-owns]': 'isPopupOpen() ? popupId : null',
     '[attr.aria-expanded]': 'isPopupOpen()'