Changed divs to span to be WCAG complaint

src/typeahead/dataset.js

@@ -60,6 +60,7 @@ var Dataset = (function() {
 
     this.$el = $(o.node)
     .attr('role', 'presentation')
+    .attr('style', 'display:block')
     .addClass(this.classes.dataset)
     .addClass(this.classes.dataset + '-' + this.name);
   }
@@ -295,8 +296,8 @@ var Dataset = (function() {
     },
 
     destroy: function destroy() {
-      // #970
-      this.$el = $('<div>');
+      // #970 #225
+      this.$el = $('<span>');
     }
   });
 
@@ -328,7 +329,8 @@ var Dataset = (function() {
     }
 
     function suggestionTemplate(context) {
-      return $('<div role="option">').attr('id', _.guid()).text(displayFn(context));
+      //#225
+      return $('<span role="option" style="display:block">').attr('id', _.guid()).text(displayFn(context));
     }
   }
 

src/typeahead/input.js

@@ -320,8 +320,8 @@ var Input = (function() {
       this.$input.off('.tt');
       this.$overflowHelper.remove();
 
-      // #970
-      this.$hint = this.$input = this.$overflowHelper = $('<div>');
+      // #970 #225
+      this.$hint = this.$input = this.$overflowHelper = $('<span>');
     },
     setAriaExpanded: function setAriaExpanded(value) {
       this.$input.attr('aria-expanded', value);

src/typeahead/menu.js

@@ -29,7 +29,8 @@ var Menu = (function() {
 
     function initializeDataset(oDataset) {
       var node = that.$node.find(oDataset.node).first();
-      oDataset.node = node.length ? node : $('<div>').appendTo(that.$node);
+      // #225
+      oDataset.node = node.length ? node : $('<span>').appendTo(that.$node);
 
       return new Dataset(oDataset, www);
     }
@@ -210,8 +211,8 @@ var Menu = (function() {
     destroy: function destroy() {
       this.$node.off('.tt');
 
-      // #970
-      this.$node = $('<div>');
+      // #970 , #225
+      this.$node = $('<span>');
 
       _.each(this.datasets, destroyDataset);
 

src/typeahead/typeahead.js

@@ -96,8 +96,9 @@ var Typeahead = (function() {
       var $input, $menu;
 
       // these default values are to make testing easier
-      $input = this.input.$input || $('<div>');
-      $menu = this.menu.$node || $('<div>');
+      // #225
+      $input = this.input.$input || $('<span>');
+      $menu = this.menu.$node || $('<span>');
 
       // #705: if there's scrollable overflow, ie doesn't support
       // blur cancellations when the scrollbar is clicked

src/typeahead/www.js

@@ -47,7 +47,8 @@ var WWW = (function() {
   function buildHtml(c) {
     return {
       wrapper: '<span class="' + c.wrapper + '"></span>',
-      menu: '<div role="listbox" class="' + c.menu + '"></div>'
+      //#225
+      menu: '<span role="listbox" class="' + c.menu + '"></span >'
     };
   }
 
@@ -76,18 +77,23 @@ var WWW = (function() {
       input: {
         position: 'relative',
         verticalAlign: 'top',
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
+        // #225
+        display: 'block'
       },
       inputWithNoHint: {
         position: 'relative',
-        verticalAlign: 'top'
+        verticalAlign: 'top',
+        // #225
+        display: 'block'
       },
       menu: {
         position: 'absolute',
         top: '100%',
         left: '0',
         zIndex: '100',
-        display: 'none'
+        // #225
+        display: 'block'
       },
       ltr: {
         left: '0',

test/typeahead/dataset_spec.js

@@ -430,7 +430,8 @@ describe('Dataset', function() {
     this.source.andCallFake(syncMockSuggestions);
     this.dataset.update('woah');
 
-    expect(this.dataset.$el.find('div[role="option"]')).toHaveAttr('id');
+    // #225
+    expect(this.dataset.$el.find('span[role="option"]')).toHaveAttr('id');
   });
 
   it('should apply id attribute when using custom suggestion template', function() {