Merge pull request #242 from eserkansozer/241-Accessibility-Missing_required_WAI-ARIA_states_or_properties

Issue#241- Aria-controls added to input

Author: jlbooker

src/typeahead/input.js

@@ -36,7 +36,7 @@ var Input = (function() {
     this.$input = $(o.input);
     this.$menu = $(o.menu);
 
-    // this id is used for aria-owns
+    // this id is used for aria-owns and aria-controls
     id = this.$input.attr('id') || _.guid();
 
     this.$menu.attr('id', id + '_listbox');
@@ -47,6 +47,7 @@ var Input = (function() {
 
     this.$input.attr({
       'aria-owns': id + '_listbox',
+      'aria-controls': id + '_listbox',
       role: 'combobox',
       'aria-autocomplete': 'list',
       'aria-expanded': false

test/typeahead/input_spec.js

@@ -32,6 +32,10 @@ describe('Input', function() {
     function noInput() { new Input({}, www); }
   });
 
+  it('should have an aria-controls attribute', function() {
+    expect(this.$input.attr("aria-controls")).toBeDefined();
+  });
+
   describe('when the blur DOM event is triggered', function() {
     it('should reset the input value', function() {
       this.view.setQuery('wine');