From dbdbd85b73696783c7b3fdfc9784f6213e4e4d5a Mon Sep 17 00:00:00 2001
From: Shailesh Deosarkar <shailesh.deosarkar@gmail.com>
Date: Tue, 14 Jul 2020 23:35:35 +0100
Subject: [PATCH] Changed divs to span to be WCAG complaint

---
 src/typeahead/dataset.js       |  8 +++++---
 src/typeahead/input.js         |  4 ++--
 src/typeahead/menu.js          |  7 ++++---
 src/typeahead/typeahead.js     |  5 +++--
 src/typeahead/www.js           | 14 ++++++++++----
 test/typeahead/dataset_spec.js |  3 ++-
 6 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/typeahead/dataset.js b/src/typeahead/dataset.js
index fa154d9781..22066ae898 100644
--- a/src/typeahead/dataset.js
+++ b/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));
     }
   }
 
diff --git a/src/typeahead/input.js b/src/typeahead/input.js
index 3b8cc7ce01..b6854c6350 100644
--- a/src/typeahead/input.js
+++ b/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);
diff --git a/src/typeahead/menu.js b/src/typeahead/menu.js
index ea68fa3607..c6aebd895f 100644
--- a/src/typeahead/menu.js
+++ b/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);
 
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index 802f6b75c3..4af426f701 100644
--- a/src/typeahead/typeahead.js
+++ b/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
diff --git a/src/typeahead/www.js b/src/typeahead/www.js
index 8aa60827bb..cb26911d8c 100644
--- a/src/typeahead/www.js
+++ b/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',
diff --git a/test/typeahead/dataset_spec.js b/test/typeahead/dataset_spec.js
index 9c00c1f896..6649290779 100644
--- a/test/typeahead/dataset_spec.js
+++ b/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() {