Fix .visuallyhidden not being actually hidden (fix #106)

Author: futpib

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) {

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() {