Merge pull request #242 from eserkansozer/241-Accessibility-Missing_r…

…equired_WAI-ARIA_states_or_properties Issue#241- Aria-controls added to input
corejavascript · Sep 3, 2021 · 88c12a7 · 88c12a7
2 parents a03813e + c30da7b
commit 88c12a7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/typeahead/input.js b/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

diff --git a/test/typeahead/input_spec.js b/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');