fix(): Add better warnings to materialAria

angular · Oct 2, 2014 · e582b55 · e582b55
1 parent 43c2891
commit e582b55
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 15 deletions.
diff --git a/config/test-utils.js b/config/test-utils.js
@@ -32,6 +32,23 @@ var TestUtil = {
     test.after(function() {
       angular.element.prototype.focus = focus;
     });
-  }
+  },
+
+  /**
+   * Create a fake version of $$rAF that does things asynchronously
+   */
+  mockRaf: function() {
+    module('ng', function($provide) {
+      $provide.value('$$rAF', mockRaf);
 
+      function mockRaf(cb) {
+        cb();
+      }
+      mockRaf.debounce = function(cb) {
+        return function() {
+          cb.apply(this, arguments);
+        };
+      };
+    });
+  }
 };
diff --git a/src/components/buttons/buttons.js b/src/components/buttons/buttons.js
@@ -95,7 +95,7 @@ function MaterialButtonDirective(ngHrefDirectives, $materialInkRipple, $material
         });
 
       return function postLink(scope, element, attr) {
-        $materialAria.expect(element, 'aria-label', element.text());
+        $materialAria.expect(element, 'aria-label');
         $materialInkRipple.attachButtonBehavior(element);
       };
     }

diff --git a/src/components/buttons/buttons.spec.js b/src/components/buttons/buttons.spec.js
@@ -1,5 +1,6 @@
 describe('material-button', function() {
 
+  beforeEach(TestUtil.mockRaf);
   beforeEach(module('material.components.button'));
 
   it('should have inner-anchor with attrs if href attr is given', inject(function($compile, $rootScope) {

diff --git a/src/components/buttons/demo1/index.html b/src/components/buttons/demo1/index.html
@@ -42,19 +42,19 @@
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
 
-        <material-button class="material-button-fab">
+        <material-button class="material-button-fab" aria-label="Time">
             <material-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></material-icon>
         </material-button>
 
-      <material-button class="material-button-fab">
+      <material-button class="material-button-fab" aria-label="New document">
         <material-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></material-icon>
       </material-button>
 
-        <material-button class="material-button-fab" disabled>
+        <material-button class="material-button-fab" disabled aria-label="Comment">
             <material-icon icon="/img/icons/ic_comment_24px.svg" style="width: 24px; height: 24px;"></material-icon>
         </material-button>
 
-        <material-button class="material-button-fab material-theme-light-blue">
+        <material-button class="material-button-fab material-theme-light-blue" aria-label="People">
             <material-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></material-icon>
         </material-button>
 

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
@@ -76,7 +76,7 @@ function MaterialCheckboxDirective(inputDirectives, $materialInkRipple, $materia
     tAttrs.tabIndex = 0;
     tElement.attr('role', tAttrs.type);
 
-    $materialAria.expect(tElement, 'aria-label', tElement.text());
+    $materialAria.expect(tElement, 'aria-label');
 
     return function postLink(scope, element, attr, ngModelCtrl) {
       var checked = false;

diff --git a/src/components/checkbox/checkbox.spec.js b/src/components/checkbox/checkbox.spec.js
@@ -4,6 +4,7 @@ describe('materialCheckbox', function() {
 
   beforeEach(module('material.components.checkbox'));
   beforeEach(module('ngAria'));
+  beforeEach(TestUtil.mockRaf);
 
   it('should set checked css class and aria-checked attributes', inject(function($compile, $rootScope) {
     var element = $compile('<div>' +

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
@@ -140,7 +140,7 @@ function MaterialDialogDirective($$rAF) {
  *
  */
 
-function MaterialDialogService($timeout, $rootElement, $materialEffects, $animate, $aria, $$interimElement) {
+function MaterialDialogService($timeout, $rootElement, $materialEffects, $animate, $materialAria, $$interimElement) {
 
   var $dialogService;
   return $dialogService = $$interimElement({

diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js
@@ -1,5 +1,6 @@
 describe('$materialDialog', function() {
 
+  beforeEach(TestUtil.mockRaf);
   beforeEach(module('material.components.dialog', 'ngAnimateMock'));
 
   beforeEach(inject(function spyOnMaterialEffects($materialEffects, $$q, $animate) {

diff --git a/src/components/radioButton/radioButton.js b/src/components/radioButton/radioButton.js
@@ -250,7 +250,7 @@ function materialRadioButtonDirective($materialAria) {
         'aria-checked' : 'false'
       });
 
-      $materialAria.expect(element, 'aria-label', element.text());
+      $materialAria.expect(element, 'aria-label');
 
       /**
        * Build a unique ID for each radio button that will be used with aria-activedescendant.

diff --git a/src/components/radioButton/radioButton.spec.js b/src/components/radioButton/radioButton.spec.js
@@ -1,6 +1,7 @@
 describe('radioButton', function() {
   var CHECKED_CSS = 'material-checked';
 
+  beforeEach(TestUtil.mockRaf);
   beforeEach(module('material.components.radioButton'));
 
   it('should set checked css class', inject(function($compile, $rootScope) {

diff --git a/src/components/switch/switch.spec.js b/src/components/switch/switch.spec.js
@@ -1,6 +1,7 @@
 describe('<material-switch>', function() {
   var CHECKED_CSS = 'material-checked';
 
+  beforeEach(TestUtil.mockRaf);
   beforeEach(module('ngAria'));
   beforeEach(module('material.components.switch'));
 

diff --git a/src/components/tabs/js/tabItemDirective.js b/src/components/tabs/js/tabItemDirective.js
@@ -200,7 +200,7 @@ function MaterialTabDirective($materialInkRipple, $compile, $materialAria) {
           'aria-labelledby': tabId
         });
 
-        $materialAria.expect(element, 'aria-label', element.text());
+        $materialAria.expect(element, 'aria-label');
       }
 
     };

diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
@@ -1,5 +1,6 @@
 describe('materialTabs directive', function() {
 
+  beforeEach(TestUtil.mockRaf);
   beforeEach(module('material.components.tabs', 'material.decorators', 'material.services.aria'));
 
   describe('controller', function(){

diff --git a/src/services/aria/aria.js b/src/services/aria/aria.js
@@ -1,16 +1,17 @@
 angular.module('material.services.aria', [])
 
 .service('$materialAria', [
+  '$$rAF',
   '$log',
   AriaService
 ]);
 
-function AriaService($log) {
-  var messageTemplate = 'ARIA: Attribute "%s", required for accessibility, is missing on "%s"!';
+function AriaService($$rAF, $log) {
+  var messageTemplate = 'ARIA: Attribute "%s", required for accessibility, is missing on "%s"';
   var defaultValueTemplate = 'Default value was set: %s="%s".';
 
   return {
-    expect : expectAttribute,
+    expect : $$rAF.debounce(expectAttribute),
   };
 
   /**
@@ -23,15 +24,20 @@ function AriaService($log) {
 
     var node = element[0];
     if (!node.hasAttribute(attrName)) {
-      var hasDefault = angular.isDefined(defaultValue);
+
+      if(!defaultValue){
+        defaultValue = element.text().trim();
+      }
+      var hasDefault = angular.isDefined(defaultValue) && defaultValue.length;
 
       if (hasDefault) {
         defaultValue = String(defaultValue).trim();
         // $log.warn(messageTemplate + ' ' + defaultValueTemplate,
         //           attrName, getTagString(node), attrName, defaultValue);
         element.attr(attrName, defaultValue);
       } else {
-        // $log.warn(messageTemplate, attrName, getTagString(node));
+        $log.warn(messageTemplate, attrName, getTagString(node));
+        $log.warn(node);
       }
     }
   }