Merge pull request #107 from futpib/master

Fix `.visuallyhidden` not being actually hidden
corejavascript · Jan 12, 2017 · e9696a4 · e9696a4
2 parents a47d4b5 + 89dc484
commit e9696a4
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 19 deletions.
diff --git a/dist/bloodhound.js b/dist/bloodhound.js
@@ -1,5 +1,5 @@
 /*!
- * typeahead.js 1.0.1
+ * typeahead.js 1.1.0
  * https://github.com/twitter/typeahead.js
  * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
@@ -158,7 +158,7 @@
             noop: function() {}
         };
     }();
-    var VERSION = "1.0.1";
+    var VERSION = "1.1.0";
     var tokenizers = function() {
         "use strict";
         return {

diff --git a/dist/bloodhound.min.js b/dist/bloodhound.min.js
diff --git a/dist/typeahead.bundle.js b/dist/typeahead.bundle.js
@@ -1,5 +1,5 @@
 /*!
- * typeahead.js 1.0.1
+ * typeahead.js 1.1.0
  * https://github.com/twitter/typeahead.js
  * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
@@ -158,7 +158,7 @@
             noop: function() {}
         };
     }();
-    var VERSION = "1.0.1";
+    var VERSION = "1.1.0";
     var tokenizers = function() {
         "use strict";
         return {
@@ -2003,8 +2003,21 @@
     var Status = function() {
         "use strict";
         function Status(options) {
-            this.el = '<span role="status" aria-live="polite" class="visuallyhidden"></span>';
-            this.$el = $(this.el);
+            this.$el = $("<span></span>", {
+                role: "status",
+                "aria-live": "polite"
+            }).css({
+                position: "absolute",
+                padding: "0",
+                border: "0",
+                height: "1px",
+                width: "1px",
+                "margin-bottom": "-1px",
+                "margin-right": "-1px",
+                overflow: "hidden",
+                clip: "rect(0 0 0 0)",
+                "white-space": "nowrap"
+            });
             options.$input.after(this.$el);
             _.each(options.menu.datasets, _.bind(function(dataset) {
                 if (dataset.onSync) {

diff --git a/dist/typeahead.bundle.min.js b/dist/typeahead.bundle.min.js
diff --git a/dist/typeahead.jquery.js b/dist/typeahead.jquery.js
@@ -1,5 +1,5 @@
 /*!
- * typeahead.js 1.0.1
+ * typeahead.js 1.1.0
  * https://github.com/twitter/typeahead.js
  * Copyright 2013-2016 Twitter, Inc. and other contributors; Licensed MIT
  */
@@ -1056,8 +1056,21 @@
     var Status = function() {
         "use strict";
         function Status(options) {
-            this.el = '<span role="status" aria-live="polite" class="visuallyhidden"></span>';
-            this.$el = $(this.el);
+            this.$el = $("<span></span>", {
+                role: "status",
+                "aria-live": "polite"
+            }).css({
+                position: "absolute",
+                padding: "0",
+                border: "0",
+                height: "1px",
+                width: "1px",
+                "margin-bottom": "-1px",
+                "margin-right": "-1px",
+                overflow: "hidden",
+                clip: "rect(0 0 0 0)",
+                "white-space": "nowrap"
+            });
             options.$input.after(this.$el);
             _.each(options.menu.datasets, _.bind(function(dataset) {
                 if (dataset.onSync) {

diff --git a/dist/typeahead.jquery.min.js b/dist/typeahead.jquery.min.js
diff --git a/src/typeahead/status.js b/src/typeahead/status.js
@@ -2,8 +2,23 @@ var Status = (function () {
   'use strict';
 
   function Status(options) {
-    this.el = '<span role="status" aria-live="polite" class="visuallyhidden"></span>';
-    this.$el = $(this.el);
+    this.$el = $('<span></span>', {
+      'role': 'status',
+      'aria-live': 'polite',
+    }).css({
+      // This `.visuallyhidden` style is inspired by HTML5 Boilerplate
+      // https://github.com/h5bp/html5-boilerplate/blob/fea7f22/src/css/main.css#L128
+      'position': 'absolute',
+      'padding': '0',
+      'border': '0',
+      'height': '1px',
+      'width': '1px',
+      'margin-bottom': '-1px',
+      'margin-right': '-1px',
+      'overflow': 'hidden',
+      'clip': 'rect(0 0 0 0)',
+      'white-space': 'nowrap',
+    });
     options.$input.after(this.$el);
     _.each(options.menu.datasets, _.bind(function (dataset) {
       if (dataset.onSync) {

diff --git a/test/typeahead/status_spec.js b/test/typeahead/status_spec.js
@@ -25,10 +25,24 @@ describe('Status', function() {
   });
 
   it('renders a status element after the input', function() {
-    expect(status.el).toEqual('<span role="status" aria-live="polite" class="visuallyhidden"></span>');
+    expect(status.$el.attr('role')).toEqual('status');
+    expect(status.$el.attr('aria-live')).toEqual('polite');
     expect(status.$el.prev()).toEqual(this.$input);
   });
 
+  it('renders a status element that is visible to screen readers', function () {
+    expect(status.$el.attr('aria-hidden')).not.toEqual('true');
+    expect(status.$el.css('display')).not.toEqual('none');
+    expect(status.$el.css('visibility')).not.toEqual('hidden');
+    expect(status.$el.height()).not.toEqual(0);
+    expect(status.$el.width()).not.toEqual(0);
+  });
+
+  it('renders a status element that is hidden on displays', function () {
+    expect(status.$el.outerHeight(true)).toEqual(0);
+    expect(status.$el.outerWidth(true)).toEqual(0);
+  });
+
   describe('when rendered is triggered on the datasets', function() {
 
     it('should update the status text based on number of suggestion', function() {