angular-fontawesome - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

bower.json

 {
   "name": "angular-fontawesome",
   "description": "Angular directive for FontAwesome",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "main": [
@@ -6,0 +6,0 @@ "dist/angular-fontawesome.js"

dist/angular-fontawesome.js

@@ -0,140 +1,171 @@
+'use strict';
+
 angular.module('picardy.fontawesome', [])
-	.directive('fa', function () {
-		return {
-			restrict: 'E',
-			template: '<i class="fa"></i>',
-			replace: true,
-			link: function (scope, element, attrs) {
+  .directive('fa', function () {
+    return {
+      restrict: 'E',
+      template: '<span class="fa" aria-hidden="true"></span>',
+      replace: true,
+      link: function (scope, element, attrs) {
 
-				/*** STRING ATTRS ***/
-				// keep a state of the current attrs so that when they change,
-				// we can remove the old attrs before adding the new ones.
-				var currentClasses = {};
+        /*** STRING ATTRS ***/
+        // keep a state of the current attrs so that when they change,
+        // we can remove the old attrs before adding the new ones.
+        var currentClasses = {};
 
-				// generic function to bind string attrs
-				function _observeStringAttr (attr, baseClass) {
-					attrs.$observe(attr, function () {
-						baseClass = baseClass || 'fa-' + attr;
-						element.removeClass(currentClasses[attr]);
-						if (attrs[attr]) {
-							var className = [baseClass, attrs[attr]].join('-');
-							element.addClass(className);
-							currentClasses[attr] = className;
-						}
-					});
-				}
+        // generic function to bind string attrs
+        function _observeStringAttr (attr, baseClass) {
+          var className;
 
-				_observeStringAttr('name', 'fa');
-				_observeStringAttr('rotate');
-				_observeStringAttr('flip');
-				_observeStringAttr('stack');
+          attrs.$observe(attr, function () {
+            baseClass = baseClass || 'fa-' + attr;
+            element.removeClass(currentClasses[attr]);
+            if (attrs[attr]) {
+              className = [baseClass, attrs[attr]].join('-');
+              element.addClass(className);
+              currentClasses[attr] = className;
+            }
+          });
+        }
 
-				/**
-				 * size can be passed "large" or an integer
-				 */
-				attrs.$observe('size', function () {
-					var className;
-					element.removeClass(currentClasses.size);
+        _observeStringAttr('name', 'fa');
+        _observeStringAttr('rotate');
+        _observeStringAttr('flip');
+        _observeStringAttr('stack');
 
-					if (attrs.size === 'large') {
-						className = 'fa-lg';
-					} else if (!isNaN(parseInt(attrs.size, 10))) {
-						className = 'fa-' + attrs.size + 'x';
-					}
+        /**
+         * size can be passed "large" or an integer
+         */
+        attrs.$observe('size', function () {
+          var className;
+          element.removeClass(currentClasses.size);
 
-					element.addClass(className);
-					currentClasses.size = className;
-				});
+          if (attrs.size === 'large') {
+            className = 'fa-lg';
+          } else if (!isNaN(parseInt(attrs.size, 10))) {
+            className = 'fa-' + attrs.size + 'x';
+          }
 
-				/**
-				 * stack can be passed "large" or an integer
-				 */
-				attrs.$observe('stack', function () {
-					var className;
-					element.removeClass(currentClasses.stack);
+          element.addClass(className);
+          currentClasses.size = className;
+        });
 
-					if (attrs.stack === 'large') {
-						className = 'fa-stack-lg';
-					} else if (!isNaN(parseInt(attrs.stack, 10))) {
-						className = 'fa-stack-' + attrs.stack + 'x';
-					}
+        /**
+         * stack can be passed "large" or an integer
+         */
+        attrs.$observe('stack', function () {
+          var className;
+          element.removeClass(currentClasses.stack);
 
-					element.addClass(className);
-					currentClasses.stack = className;
-				});
+          if (attrs.stack === 'large') {
+            className = 'fa-stack-lg';
+          } else if (!isNaN(parseInt(attrs.stack, 10))) {
+            className = 'fa-stack-' + attrs.stack + 'x';
+          }
 
-				/*** BOOLEAN ATTRS ***/
-				// generic function to bind boolean attrs
-				function _observeBooleanAttr (attr, className) {
-					attrs.$observe(attr, function () {
-						className = className || 'fa-' + attr;
-						var value = attr in attrs && attrs[attr] !== 'false' && attrs[attr] !== false;
-						element.toggleClass(className, value);
-					});
-				}
+          element.addClass(className);
+          currentClasses.stack = className;
+        });
 
-				_observeBooleanAttr('border');
-				_observeBooleanAttr('fw');
-				_observeBooleanAttr('inverse');
-				_observeBooleanAttr('spin');
+        /*** BOOLEAN ATTRS ***/
+        // generic function to bind boolean attrs
+        function _observeBooleanAttr (attr, className) {
+          var value;
 
-				/*** CONDITIONAL ATTRS ***/
-					// automatically populate fa-li if DOM structure indicates
-				element.toggleClass('fa-li', (
-					element.parent() &&
-					element.parent().parent() &&
-					element.parent().parent().hasClass('fa-ul') &&
-					element.parent().children()[0] === element[0]) &&
-					attrs.list !== 'false' &&
-					attrs.list !== false
-				);
-			}
-		};
-	})
-	.directive('faStack', function () {
-		return {
-			restrict: 'E',
-			transclude: true,
-			template: '<span ng-transclude class="fa-stack fa-lg"></span>',
-			replace: true,
-			link: function (scope, element, attrs) {
+          attrs.$observe(attr, function () {
+            className = className || 'fa-' + attr;
+            value = attr in attrs && attrs[attr] !== 'false' && attrs[attr] !== false;
+            element.toggleClass(className, value);
+          });
+        }
 
-				/*** STRING ATTRS ***/
-				// keep a state of the current attrs so that when they change,
-				// we can remove the old attrs before adding the new ones.
-				var currentClasses = {};
+        _observeBooleanAttr('border');
+        _observeBooleanAttr('fw');
+        _observeBooleanAttr('inverse');
+        _observeBooleanAttr('spin');
 
-				// generic function to bind string attrs
-				function _observeStringAttr (attr, baseClass) {
-					attrs.$observe(attr, function () {
-						baseClass = baseClass || 'fa-' + attr;
-						element.removeClass(currentClasses[attr]);
-						if (attrs[attr]) {
-							var className = [baseClass, attrs[attr]].join('-');
-							element.addClass(className);
-							currentClasses[attr] = className;
-						}
-					});
-				}
+        /*** CONDITIONAL ATTRS ***/
+          // automatically populate fa-li if DOM structure indicates
+        element.toggleClass('fa-li',
+          element.parent() &&
+          element.parent().prop('tagName') === 'LI' &&
+          element.parent().parent() &&
+          element.parent().parent().hasClass('fa-ul') &&
+          element.parent().children()[0] === element[0] &&
+          attrs.list !== 'false' &&
+          attrs.list !== false
+        );
 
-				_observeStringAttr('size');
+        attrs.$observe('alt', function () {
+          var altText = attrs.alt,
+              altElem = element.next(),
+              altElemClass = 'fa-alt-text';
 
-				/**
-				 * size can be passed "large" or an integer
-				 */
-				attrs.$observe('size', function () {
-					var className;
-					element.removeClass(currentClasses.size);
+          if (altText) {
+            element.removeAttr('alt');
 
-					if (attrs.size === 'large') {
-						className = 'fa-lg';
-					} else if (!isNaN(parseInt(attrs.size, 10))) {
-						className = 'fa-' + attrs.size + 'x';
-					}
+            // create the alt elem if one does not exist
+            if (!altElem || !altElem.hasClass(altElemClass)) {
+              element.after('<span class="sr-only fa-alt-text"></span>');
+              altElem = element.next();
+            }
 
-					element.addClass(className);
-					currentClasses.size = className;
-				});
-			}
-		};
-	});
+            altElem.text(altText);
+          } else if (altElem && altElem.hasClass(altElemClass)) {
+            // kill the alt elem if we used to have alt text, but now we don't
+            altElem.remove();
+          }
+        });
+      }
+    };
+  })
+  .directive('faStack', function () {
+    return {
+      restrict: 'E',
+      transclude: true,
+      template: '<span ng-transclude class="fa-stack fa-lg"></span>',
+      replace: true,
+      link: function (scope, element, attrs) {
+
+        /*** STRING ATTRS ***/
+        // keep a state of the current attrs so that when they change,
+        // we can remove the old attrs before adding the new ones.
+        var currentClasses = {};
+
+        // generic function to bind string attrs
+        function _observeStringAttr (attr, baseClass) {
+          var className;
+
+          attrs.$observe(attr, function () {
+            baseClass = baseClass || 'fa-' + attr;
+            element.removeClass(currentClasses[attr]);
+            if (attrs[attr]) {
+              className = [baseClass, attrs[attr]].join('-');
+              element.addClass(className);
+              currentClasses[attr] = className;
+            }
+          });
+        }
+
+        _observeStringAttr('size');
+
+        /**
+         * size can be passed "large" or an integer
+         */
+        attrs.$observe('size', function () {
+          var className;
+
+          element.removeClass(currentClasses.size);
+
+          if (attrs.size === 'large') {
+            className = 'fa-lg';
+          } else if (!isNaN(parseInt(attrs.size, 10))) {
+            className = 'fa-' + attrs.size + 'x';
+          }
+
+          element.addClass(className);
+          currentClasses.size = className;
+        });
+      }
+    };
+  });

dist/angular-fontawesome.min.js

@@ -1,1 +0,1 @@
-angular.module("picardy.fontawesome",[]).directive("fa",function(){return{restrict:"E",template:'<i class="fa"></i>',replace:!0,link:function(a,b,c){function d(a,d){c.$observe(a,function(){if(d=d||"fa-"+a,b.removeClass(f[a]),c[a]){var e=[d,c[a]].join("-");b.addClass(e),f[a]=e}})}function e(a,d){c.$observe(a,function(){d=d||"fa-"+a;var e=a in c&&"false"!==c[a]&&c[a]!==!1;b.toggleClass(d,e)})}var f={};d("name","fa"),d("rotate"),d("flip"),d("stack"),c.$observe("size",function(){var a;b.removeClass(f.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),f.size=a}),c.$observe("stack",function(){var a;b.removeClass(f.stack),"large"===c.stack?a="fa-stack-lg":isNaN(parseInt(c.stack,10))||(a="fa-stack-"+c.stack+"x"),b.addClass(a),f.stack=a}),e("border"),e("fw"),e("inverse"),e("spin"),b.toggleClass("fa-li",b.parent()&&b.parent().parent()&&b.parent().parent().hasClass("fa-ul")&&b.parent().children()[0]===b[0]&&"false"!==c.list&&c.list!==!1)}}}).directive("faStack",function(){return{restrict:"E",transclude:!0,template:'<span ng-transclude class="fa-stack fa-lg"></span>',replace:!0,link:function(a,b,c){function d(a,d){c.$observe(a,function(){if(d=d||"fa-"+a,b.removeClass(e[a]),c[a]){var f=[d,c[a]].join("-");b.addClass(f),e[a]=f}})}var e={};d("size"),c.$observe("size",function(){var a;b.removeClass(e.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),e.size=a})}}});
+"use strict";angular.module("picardy.fontawesome",[]).directive("fa",function(){return{restrict:"E",template:'<span class="fa" aria-hidden="true"></span>',replace:!0,link:function(a,b,c){function d(a,d){var e;c.$observe(a,function(){d=d||"fa-"+a,b.removeClass(f[a]),c[a]&&(e=[d,c[a]].join("-"),b.addClass(e),f[a]=e)})}function e(a,d){var e;c.$observe(a,function(){d=d||"fa-"+a,e=a in c&&"false"!==c[a]&&c[a]!==!1,b.toggleClass(d,e)})}var f={};d("name","fa"),d("rotate"),d("flip"),d("stack"),c.$observe("size",function(){var a;b.removeClass(f.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),f.size=a}),c.$observe("stack",function(){var a;b.removeClass(f.stack),"large"===c.stack?a="fa-stack-lg":isNaN(parseInt(c.stack,10))||(a="fa-stack-"+c.stack+"x"),b.addClass(a),f.stack=a}),e("border"),e("fw"),e("inverse"),e("spin"),b.toggleClass("fa-li",b.parent()&&"LI"===b.parent().prop("tagName")&&b.parent().parent()&&b.parent().parent().hasClass("fa-ul")&&b.parent().children()[0]===b[0]&&"false"!==c.list&&c.list!==!1),c.$observe("alt",function(){var a=c.alt,d=b.next(),e="fa-alt-text";a?(b.removeAttr("alt"),d&&d.hasClass(e)||(b.after('<span class="sr-only fa-alt-text"></span>'),d=b.next()),d.text(a)):d&&d.hasClass(e)&&d.remove()})}}}).directive("faStack",function(){return{restrict:"E",transclude:!0,template:'<span ng-transclude class="fa-stack fa-lg"></span>',replace:!0,link:function(a,b,c){function d(a,d){var f;c.$observe(a,function(){d=d||"fa-"+a,b.removeClass(e[a]),c[a]&&(f=[d,c[a]].join("-"),b.addClass(f),e[a]=f)})}var e={};d("size"),c.$observe("size",function(){var a;b.removeClass(e.size),"large"===c.size?a="fa-lg":isNaN(parseInt(c.size,10))||(a="fa-"+c.size+"x"),b.addClass(a),e.size=a})}}});

Gruntfile.js

@@ -0,66 +1,87 @@
+'use strict';
+
 module.exports = function (grunt) {
-	grunt.initConfig({
-		bump: {
-			options: {
-				files: ['package.json', 'bower.json'],
-				updateConfigs: [],
-				commit: true,
-				commitMessage: 'Release v%VERSION%',
-				commitFiles: ['-a'],
-				createTag: true,
-				tagName: 'v%VERSION%',
-				tagMessage: 'Version %VERSION%',
-				push: true,
-				pushTo: 'origin',
-				gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d'
-			}
-		},
-		copy: {
-			dist: {
-				src: 'src/angular-fontawesome.js',
-				dest: 'dist/angular-fontawesome.js'
-			}
-		},
-		uglify: {
-			dist: {
-				files: {
-					'dist/angular-fontawesome.min.js': [ 'dist/angular-fontawesome.js' ]
-				}
-			}
-		},
-		clean: {
-			dist: {
-				src: ['dist/*']
-			}
-		},
-		karma: {
-			all: {
-				configFile: 'karma.conf.js',
-				options: {
-					browsers: ['Chrome', 'Safari', 'Firefox']
-				}
-			},
-			phantomjs: {
-				configFile: 'karma.conf.js',
-				options: {
-					browsers: ['PhantomJS']
-				}
-			}
-		},
-		jshint: {
-			main: [ 'Gruntfile.js', 'test/**/*.js', 'src/**/*.js' ]
-		}
-	});
+  grunt.initConfig({
+    bump: {
+      options: {
+        files: ['package.json', 'bower.json'],
+        updateConfigs: [],
+        commit: true,
+        commitMessage: 'Release v%VERSION%',
+        commitFiles: ['-a'],
+        createTag: true,
+        tagName: 'v%VERSION%',
+        tagMessage: 'Version %VERSION%',
+        push: true,
+        pushTo: 'origin',
+        gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d'
+      }
+    },
+    copy: {
+      dist: {
+        src: 'src/angular-fontawesome.js',
+        dest: 'dist/angular-fontawesome.js'
+      }
+    },
+    connect: {
+      demo: {
+        options: {
+          port: 8005,
+          hostname: '*',
+          open: 'http://localhost:8005/demo'
+        }
+      }
+    },
+    uglify: {
+      dist: {
+        files: {
+          'dist/angular-fontawesome.min.js': ['dist/angular-fontawesome.js']
+        }
+      }
+    },
+    clean: {
+      dist: {
+        src: ['dist/*']
+      }
+    },
+    karma: {
+      all: {
+        configFile: 'karma.conf.js',
+        options: {
+          browsers: ['Chrome', 'Safari', 'Firefox']
+        }
+      },
+      phantomjs: {
+        configFile: 'karma.conf.js',
+        options: {
+          browsers: ['PhantomJS']
+        }
+      }
+    },
+    eslint: {
+      main: ['Gruntfile.js', 'test/**/*.js', 'src/**/*.js', 'demo/**/*.js']
+    },
+    'gh-pages': {
+      demo: {
+        options: {
+          base: '.'
+        },
+        src: ['src/**/*', 'dist/**/*', 'demo/**/*']
+      }
+    }
+  });
 
-	grunt.loadNpmTasks('grunt-bump');
-	grunt.loadNpmTasks('grunt-contrib-clean');
-	grunt.loadNpmTasks('grunt-contrib-copy');
-	grunt.loadNpmTasks('grunt-contrib-uglify');
-	grunt.loadNpmTasks('grunt-contrib-jshint');
-	grunt.loadNpmTasks('grunt-karma');
+  grunt.loadNpmTasks('grunt-bump');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-eslint');
+  grunt.loadNpmTasks('grunt-gh-pages');
+  grunt.loadNpmTasks('grunt-karma');
 
-	grunt.registerTask('build', ['clean:dist', 'copy:dist', 'uglify:dist']);
-	grunt.registerTask('test-suite', ['jshint', 'karma:all']);
-	grunt.registerTask('test', ['jshint', 'karma:phantomjs']);
-	grunt.registerTask('release', ['test-suite', 'build', 'bump']);
-};
+  grunt.registerTask('build', ['clean:dist', 'copy:dist', 'uglify:dist']);
+  grunt.registerTask('test-suite', ['eslint', 'karma:all']);
+  grunt.registerTask('test', ['eslint', 'karma:phantomjs']);
+  grunt.registerTask('release', ['test-suite', 'build', 'bump', 'gh-pages']);
+};

package.json

 {
   "name": "angular-fontawesome",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "author": "Paul Marbach <[e-mail]>",
@@ -25,10 +25,11 @@ "description": "Angular directive for FontAwesome",
     "grunt": "^0.4.4",
+    "grunt-bump": "~0.0.15",
     "grunt-contrib-clean": "0.6.0",
+    "grunt-contrib-connect": "^0.11.2",
     "grunt-contrib-copy": "0.8.0",
-    "grunt-contrib-jshint": "0.11.0",
     "grunt-contrib-uglify": "0.8.0",
+    "grunt-eslint": "^17.2.0",
+    "grunt-gh-pages": "^0.10.0",
     "grunt-karma": "^0.8.2",
-    "grunt-bump": "~0.0.15",
     "karma": "^0.12.9",
-    "karma-ng-scenario": "^0.1.0",
     "karma-chrome-launcher": "0.1.7",
@@ -38,2 +39,3 @@ "karma-firefox-launcher": "0.1.4",
     "karma-ng-html2js-preprocessor": "^0.1.0",
+    "karma-ng-scenario": "^0.1.0",
     "karma-phantomjs-launcher": "0.1.4",
@@ -40,0 +42,0 @@ "karma-safari-launcher": "0.1.1"

README.md

@@ -5,2 +5,4 @@ # angular-fontawesome [![Build Status](https://travis-ci.org/picardy/angular-fontawesome.svg?branch=master)](https://travis-ci.org/picardy/angular-fontawesome)
 
+http://picardy.github.io/angular-fontawesome/demo/
+
 A simple directive for [FontAwesome](http://fontawesome.io/) icons. Avoid writing a massive `ngStyle` declaration for your FontAwesome integration, and use the power of Angular to make interactive icon-based widgets.
@@ -16,3 +18,3 @@
     ```
-    
+
 3. Use the directive on any page which bootstraps your app.
@@ -32,2 +34,3 @@ ```html
 <fa name="ICON-NAME"
+    alt="TEXT-ALTERNATIVE"
     size="1-5|large"
@@ -50,2 +53,25 @@ flip="horizontal|vertical"
 
+##### alt
+For accessibility support, you can now add an *alt* attribute, which will add a [screen-reader friendly](https://github.com/FortAwesome/Font-Awesome/issues/6133#issuecomment-88944728) replacement text.
+```html
+<fa name="github" alt="github website"></fa>
+<!-- rendered -->
+<i class="fa fa-github" aria-hidden="true"></i>
+<span class="sr-only">github website</span>
+```
+
+*notice:* the ['sr-only' class](http://getbootstrap.com/css/#helper-classes-screen-readers) will hide the text from anyone not using a screen reader. It is derived from [Bootstrap](http://getbootstrap.com/), so if you're not using Bootstrap, you must add this style to your css:
+```css
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+```
+
 ##### size
@@ -94,3 +120,3 @@ The icon's font size, either defined by a multiplier (1-5), or by the string `"large"`.
 <!-- rendered -->
-<i class="fa fa-envelope fa-border"></i> 
+<i class="fa fa-envelope fa-border"></i>
 ```
@@ -142,3 +168,3 @@
 ```
-When using <fa-stack> as a wrapper, you must also specify the 'stack' attribute on the children, 
+When using <fa-stack> as a wrapper, you must also specify the 'stack' attribute on the children,
 as described [here](http://fortawesome.github.io/Font-Awesome/examples/#stacked).
@@ -150,6 +176,5 @@ Failure to do so will render the fonts, just not one on top of another like we want them to.
  * `pull="left"`, `pull="right"`
- * demos on Github pages
+ * full browser support list
 
-
 ### License
 MIT Licensed by [Picardy](http://beta.picardylearning.com).

src/angular-fontawesome.js

@@ -0,140 +1,171 @@
+'use strict';
+
 angular.module('picardy.fontawesome', [])
-	.directive('fa', function () {
-		return {
-			restrict: 'E',
-			template: '<i class="fa"></i>',
-			replace: true,
-			link: function (scope, element, attrs) {
+  .directive('fa', function () {
+    return {
+      restrict: 'E',
+      template: '<span class="fa" aria-hidden="true"></span>',
+      replace: true,
+      link: function (scope, element, attrs) {
 
-				/*** STRING ATTRS ***/
-				// keep a state of the current attrs so that when they change,
-				// we can remove the old attrs before adding the new ones.
-				var currentClasses = {};
+        /*** STRING ATTRS ***/
+        // keep a state of the current attrs so that when they change,
+        // we can remove the old attrs before adding the new ones.
+        var currentClasses = {};
 
-				// generic function to bind string attrs
-				function _observeStringAttr (attr, baseClass) {
-					attrs.$observe(attr, function () {
-						baseClass = baseClass || 'fa-' + attr;
-						element.removeClass(currentClasses[attr]);
-						if (attrs[attr]) {
-							var className = [baseClass, attrs[attr]].join('-');
-							element.addClass(className);
-							currentClasses[attr] = className;
-						}
-					});
-				}
+        // generic function to bind string attrs
+        function _observeStringAttr (attr, baseClass) {
+          var className;
 
-				_observeStringAttr('name', 'fa');
-				_observeStringAttr('rotate');
-				_observeStringAttr('flip');
-				_observeStringAttr('stack');
+          attrs.$observe(attr, function () {
+            baseClass = baseClass || 'fa-' + attr;
+            element.removeClass(currentClasses[attr]);
+            if (attrs[attr]) {
+              className = [baseClass, attrs[attr]].join('-');
+              element.addClass(className);
+              currentClasses[attr] = className;
+            }
+          });
+        }
 
-				/**
-				 * size can be passed "large" or an integer
-				 */
-				attrs.$observe('size', function () {
-					var className;
-					element.removeClass(currentClasses.size);
+        _observeStringAttr('name', 'fa');
+        _observeStringAttr('rotate');
+        _observeStringAttr('flip');
+        _observeStringAttr('stack');
 
-					if (attrs.size === 'large') {
-						className = 'fa-lg';
-					} else if (!isNaN(parseInt(attrs.size, 10))) {
-						className = 'fa-' + attrs.size + 'x';
-					}
+        /**
+         * size can be passed "large" or an integer
+         */
+        attrs.$observe('size', function () {
+          var className;
+          element.removeClass(currentClasses.size);
 
-					element.addClass(className);
-					currentClasses.size = className;
-				});
+          if (attrs.size === 'large') {
+            className = 'fa-lg';
+          } else if (!isNaN(parseInt(attrs.size, 10))) {
+            className = 'fa-' + attrs.size + 'x';
+          }
 
-				/**
-				 * stack can be passed "large" or an integer
-				 */
-				attrs.$observe('stack', function () {
-					var className;
-					element.removeClass(currentClasses.stack);
+          element.addClass(className);
+          currentClasses.size = className;
+        });
 
-					if (attrs.stack === 'large') {
-						className = 'fa-stack-lg';
-					} else if (!isNaN(parseInt(attrs.stack, 10))) {
-						className = 'fa-stack-' + attrs.stack + 'x';
-					}
+        /**
+         * stack can be passed "large" or an integer
+         */
+        attrs.$observe('stack', function () {
+          var className;
+          element.removeClass(currentClasses.stack);
 
-					element.addClass(className);
-					currentClasses.stack = className;
-				});
+          if (attrs.stack === 'large') {
+            className = 'fa-stack-lg';
+          } else if (!isNaN(parseInt(attrs.stack, 10))) {
+            className = 'fa-stack-' + attrs.stack + 'x';
+          }
 
-				/*** BOOLEAN ATTRS ***/
-				// generic function to bind boolean attrs
-				function _observeBooleanAttr (attr, className) {
-					attrs.$observe(attr, function () {
-						className = className || 'fa-' + attr;
-						var value = attr in attrs && attrs[attr] !== 'false' && attrs[attr] !== false;
-						element.toggleClass(className, value);
-					});
-				}
+          element.addClass(className);
+          currentClasses.stack = className;
+        });
 
-				_observeBooleanAttr('border');
-				_observeBooleanAttr('fw');
-				_observeBooleanAttr('inverse');
-				_observeBooleanAttr('spin');
+        /*** BOOLEAN ATTRS ***/
+        // generic function to bind boolean attrs
+        function _observeBooleanAttr (attr, className) {
+          var value;
 
-				/*** CONDITIONAL ATTRS ***/
-					// automatically populate fa-li if DOM structure indicates
-				element.toggleClass('fa-li', (
-					element.parent() &&
-					element.parent().parent() &&
-					element.parent().parent().hasClass('fa-ul') &&
-					element.parent().children()[0] === element[0]) &&
-					attrs.list !== 'false' &&
-					attrs.list !== false
-				);
-			}
-		};
-	})
-	.directive('faStack', function () {
-		return {
-			restrict: 'E',
-			transclude: true,
-			template: '<span ng-transclude class="fa-stack fa-lg"></span>',
-			replace: true,
-			link: function (scope, element, attrs) {
+          attrs.$observe(attr, function () {
+            className = className || 'fa-' + attr;
+            value = attr in attrs && attrs[attr] !== 'false' && attrs[attr] !== false;
+            element.toggleClass(className, value);
+          });
+        }
 
-				/*** STRING ATTRS ***/
-				// keep a state of the current attrs so that when they change,
-				// we can remove the old attrs before adding the new ones.
-				var currentClasses = {};
+        _observeBooleanAttr('border');
+        _observeBooleanAttr('fw');
+        _observeBooleanAttr('inverse');
+        _observeBooleanAttr('spin');
 
-				// generic function to bind string attrs
-				function _observeStringAttr (attr, baseClass) {
-					attrs.$observe(attr, function () {
-						baseClass = baseClass || 'fa-' + attr;
-						element.removeClass(currentClasses[attr]);
-						if (attrs[attr]) {
-							var className = [baseClass, attrs[attr]].join('-');
-							element.addClass(className);
-							currentClasses[attr] = className;
-						}
-					});
-				}
+        /*** CONDITIONAL ATTRS ***/
+          // automatically populate fa-li if DOM structure indicates
+        element.toggleClass('fa-li',
+          element.parent() &&
+          element.parent().prop('tagName') === 'LI' &&
+          element.parent().parent() &&
+          element.parent().parent().hasClass('fa-ul') &&
+          element.parent().children()[0] === element[0] &&
+          attrs.list !== 'false' &&
+          attrs.list !== false
+        );
 
-				_observeStringAttr('size');
+        attrs.$observe('alt', function () {
+          var altText = attrs.alt,
+              altElem = element.next(),
+              altElemClass = 'fa-alt-text';
 
-				/**
-				 * size can be passed "large" or an integer
-				 */
-				attrs.$observe('size', function () {
-					var className;
-					element.removeClass(currentClasses.size);
+          if (altText) {
+            element.removeAttr('alt');
 
-					if (attrs.size === 'large') {
-						className = 'fa-lg';
-					} else if (!isNaN(parseInt(attrs.size, 10))) {
-						className = 'fa-' + attrs.size + 'x';
-					}
+            // create the alt elem if one does not exist
+            if (!altElem || !altElem.hasClass(altElemClass)) {
+              element.after('<span class="sr-only fa-alt-text"></span>');
+              altElem = element.next();
+            }
 
-					element.addClass(className);
-					currentClasses.size = className;
-				});
-			}
-		};
-	});
+            altElem.text(altText);
+          } else if (altElem && altElem.hasClass(altElemClass)) {
+            // kill the alt elem if we used to have alt text, but now we don't
+            altElem.remove();
+          }
+        });
+      }
+    };
+  })
+  .directive('faStack', function () {
+    return {
+      restrict: 'E',
+      transclude: true,
+      template: '<span ng-transclude class="fa-stack fa-lg"></span>',
+      replace: true,
+      link: function (scope, element, attrs) {
+
+        /*** STRING ATTRS ***/
+        // keep a state of the current attrs so that when they change,
+        // we can remove the old attrs before adding the new ones.
+        var currentClasses = {};
+
+        // generic function to bind string attrs
+        function _observeStringAttr (attr, baseClass) {
+          var className;
+
+          attrs.$observe(attr, function () {
+            baseClass = baseClass || 'fa-' + attr;
+            element.removeClass(currentClasses[attr]);
+            if (attrs[attr]) {
+              className = [baseClass, attrs[attr]].join('-');
+              element.addClass(className);
+              currentClasses[attr] = className;
+            }
+          });
+        }
+
+        _observeStringAttr('size');
+
+        /**
+         * size can be passed "large" or an integer
+         */
+        attrs.$observe('size', function () {
+          var className;
+
+          element.removeClass(currentClasses.size);
+
+          if (attrs.size === 'large') {
+            className = 'fa-lg';
+          } else if (!isNaN(parseInt(attrs.size, 10))) {
+            className = 'fa-' + attrs.size + 'x';
+          }
+
+          element.addClass(className);
+          currentClasses.size = className;
+        });
+      }
+    };
+  });

test/angular-fontawesome.test.js

@@ -1,491 +0,595 @@
-(function () {
-  
-  'use strict';
+'use strict';
 
-  describe('angular-fontawesome', function () {
+/* global inject: true, module: true */
 
-    beforeEach(module('picardy.fontawesome'));
+describe('angular-fontawesome', function () {
 
-    afterEach(inject(function ($rootScope) {
-      delete $rootScope.options;
+  beforeEach(module('picardy.fontawesome'));
+
+  afterEach(inject(function ($rootScope) {
+    delete $rootScope.options;
+  }));
+
+  describe('constructor', function () {
+    var elm;
+
+    beforeEach(inject(function ($rootScope, $compile) {
+      elm = angular.element('<fa></fa>');
+      $compile(elm)($rootScope);
+      $rootScope.$digest();
     }));
 
-    describe('constructor', function () {
+    it('should have the fa class all the time', function () {
+       expect(elm.hasClass('fa')).toBe(true);
+    });
+  });
+
+  describe('string-based attributes', function () {
+    describe('name', function () {
       var elm, scope;
 
       beforeEach(inject(function ($rootScope, $compile) {
-        elm = angular.element('<fa></fa>');
+        elm = angular.element('<fa name="{{ options.name }}"></fa>');
         scope = $rootScope;
-        $compile(elm)($rootScope);
+        $compile(elm)(scope);
+
+        $rootScope.options = $rootScope.options || {};
+        $rootScope.options.name = 'square';
         $rootScope.$digest();
       }));
 
-      it('should have the fa class all the time', function () {
-         expect(elm.hasClass('fa')).toBe(true);
+      it('should replace the <fa> tag with an <span> tag that contains the proper classes', function () {
+        expect(elm.prop('tagName')).toBe('SPAN');
+        expect(elm.hasClass('fa-square')).toBe(true);
+        expect(elm.attr('aria-hidden')).toBe('true');
       });
+
+      it('should be able to change the used icon during the $digest cycle', function () {
+        scope.options.name = 'book';
+        scope.$digest();
+
+        expect(elm.hasClass('fa-square')).not.toBe(true);
+        expect(elm.hasClass('fa-book')).toBe(true);
+      });
     });
 
-    describe('string-based attributes', function () {
-      describe('name', function () {
-        var elm, scope;
+    describe('size', function () {
+      var elm, scope;
+      beforeEach(inject(function ($rootScope, $compile) {
+        elm = angular.element('<fa name="book" size="{{ options.size }}"></fa>');
+        scope = $rootScope;
 
-        beforeEach(inject(function($rootScope, $compile) {
-          elm = angular.element('<fa name="{{ options.name }}"></fa>');
-          scope = $rootScope;
-          $compile(elm)(scope);
+        $rootScope.options = $rootScope.options || {};
 
-          $rootScope.options = $rootScope.options || {};
-          $rootScope.options.name = 'square';
-          $rootScope.$digest();
-        }));
+        $compile(elm)(scope);
+        scope.$digest();
+      }));
 
-        it('should replace the <fa> tag with an <i> tag that contains the proper classes', function () {
-          expect(elm.hasClass('fa-square')).toBe(true);
-        });
+      it('should handle the "large" string', function () {
+        scope.options.size = 'large';
+        scope.$digest();
 
-        it('should be able to change the used icon during the $digest cycle', function () {
-          scope.options.name = 'book';
-          scope.$digest();
+        expect(elm.hasClass('fa-lg')).toBe(true);
+      });
 
-          expect(elm.hasClass('fa-square')).not.toBe(true);
-          expect(elm.hasClass('fa-book')).toBe(true);
-        });
+      it('should handle integers', function () {
+        scope.options.size = 1;
+        scope.$digest();
+
+        expect(elm.hasClass('fa-1x')).toBe(true);
       });
 
-      describe('size', function () {
-        var elm, scope;
-        beforeEach(inject(function($rootScope, $compile) {
-          elm = angular.element('<fa name="book" size="{{ options.size }}"></fa>');
-          scope = $rootScope;
+      it('should reject non-conforming input', function () {
+        scope.options.size = 'a';
+        scope.$digest();
 
-          $rootScope.options = $rootScope.options || {};
+        expect(elm.hasClass('fa-ax')).not.toBe(true);
+      });
 
-          $compile(elm)(scope);
-          scope.$digest();
-        }));
+      it('should clear existing classes', function () {
+        scope.options.size = 'large';
+        scope.$digest();
 
-        it('should handle the "large" string', function () {
-          scope.options.size = 'large';
-          scope.$digest();
+        expect(elm.hasClass('fa-lg')).toBe(true);
 
-          expect(elm.hasClass('fa-lg')).toBe(true);
-        });
+        scope.options.size = 1;
+        scope.$digest();
 
-        it('should handle integers', function () {
-          scope.options.size = 1;
-          scope.$digest();
+        expect(elm.hasClass('fa-1x')).toBe(true);
+        expect(elm.hasClass('fa-lg')).not.toBe(true);
+      });
 
-          expect(elm.hasClass('fa-1x')).toBe(true);
-        });
+      it('should handle any and all ints, including unsupported ones', function () {
+        var i;
 
-        it('should reject non-conforming input', function () {
-          scope.options.size = 'a';
+        for (i = 0; i < 100; i++) {
+          scope.options.size = i;
           scope.$digest();
 
-          expect(elm.hasClass('fa-ax')).not.toBe(true);
-        });
+          expect(elm.hasClass('fa-' + i + 'x')).toBe(true);
+          expect(elm.hasClass('fa-' + (i - 1) + 'x')).not.toBe(true);
+        }
+      });
+    });
 
-        it('should clear existing classes', function () {
-          scope.options.size = 'large';
-          scope.$digest();
-          
-          expect(elm.hasClass('fa-lg')).toBe(true);
+    describe('flip', function () {
+      var elm, scope;
+      beforeEach(inject(function ($rootScope, $compile) {
+        elm = angular.element('<fa name="book" flip="{{ options.flip }}"></fa>');
+        scope = $rootScope;
 
-          scope.options.size = 1;
-          scope.$digest();
+        $rootScope.options = $rootScope.options || {};
 
-          expect(elm.hasClass('fa-1x')).toBe(true);
-          expect(elm.hasClass('fa-lg')).not.toBe(true);
-        });
+        $compile(elm)(scope);
+        scope.$digest();
+      }));
 
-        it('should handle any and all ints, including unsupported ones', function () {
-          for (var i=0; i<100; i++) {
-            scope.options.size = i;
-            scope.$digest();
+      it('should handle any string #futureproofing', function () {
+        scope.options.flip = 'horizontal';
+        scope.$digest();
+        expect(elm.hasClass('fa-flip-horizontal')).toBe(true);
 
-            expect(elm.hasClass('fa-' + i + 'x')).toBe(true);
-            expect(elm.hasClass('fa-' + (i - 1) + 'x')).not.toBe(true);
-          }
-        });
+        scope.options.flip = 'vertical';
+        scope.$digest();
+        expect(elm.hasClass('fa-flip-vertical')).toBe(true);
+
+        scope.options.flip = 'foobar';
+        scope.$digest();
+        expect(elm.hasClass('fa-flip-foobar')).toBe(true);
       });
 
-      describe('flip', function () {
+      it('should clear existing classes', function () {
+        scope.options.flip = 'horizontal';
+        scope.$digest();
+        expect(elm.hasClass('fa-flip-horizontal')).toBe(true);
+
+        scope.options.flip = 'vertical';
+        scope.$digest();
+        expect(elm.hasClass('fa-flip-vertical')).toBe(true);
+        expect(elm.hasClass('fa-flip-horizontal')).not.toBe(true);
+      });
+    });
+
+    describe('rotate', function () {
+      var elm, scope;
+
+      beforeEach(inject(function ($rootScope, $compile) {
+        elm = angular.element('<fa name="shield" rotate="{{ options.rotate }}"></fa>');
+        scope = $rootScope;
+
+        $rootScope.options = $rootScope.options || {};
+        $compile(elm)(scope);
+        scope.$digest();
+      }));
+
+      it('should handle any int #futureproofing', function () {
+        scope.options.rotate = 90;
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-90')).toBe(true);
+
+        scope.options.rotate = 180;
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-180')).toBe(true);
+
+        scope.options.rotate = 270;
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-270')).toBe(true);
+      });
+
+      it('should handle any string #futureproofing', function () {
+        scope.options.rotate = '90';
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-90')).toBe(true);
+
+        scope.options.rotate = '180';
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-180')).toBe(true);
+
+        scope.options.rotate = '270';
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-270')).toBe(true);
+      });
+
+      it('should clear existing classes', function () {
+        scope.options.rotate = 90;
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-90')).toBe(true);
+
+        scope.options.rotate = 180;
+        scope.$digest();
+        expect(elm.hasClass('fa-rotate-180')).toBe(true);
+        expect(elm.hasClass('fa-rotate-90')).not.toBe(true);
+      });
+    });
+
+    describe('alt', function () {
+      it('should add an element after the icon if alt text exists', function (done) {
         var elm, scope;
-        beforeEach(inject(function($rootScope, $compile) {
-          elm = angular.element('<fa name="book" flip="{{ options.flip }}"></fa>');
+
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" alt="{{ options.alt }}"></fa>');
           scope = $rootScope;
 
-          $rootScope.options = $rootScope.options || {};
+          scope.options = {alt: 'my text'};
 
           $compile(elm)(scope);
           scope.$digest();
-        }));
 
-        it('should handle any string #futureproofing', function () {
-          scope.options.flip = 'horizontal';
-          scope.$digest();
-          expect(elm.hasClass('fa-flip-horizontal')).toBe(true);
+          expect(elm.next().hasClass('sr-only')).toBe(true);
+          expect(elm.next().hasClass('fa-alt-text')).toBe(true);
+          expect(elm.next().text()).toBe('my text');
 
-          scope.options.flip = 'vertical';
+          done();
+        });
+      });
+
+      it('should bind to an expression', function (done) {
+        var elm, scope;
+
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" alt="{{ options.alt }}"></fa>');
+          scope = $rootScope;
+
+          scope.options = {alt: 'old text'};
+
+          $compile(elm)(scope);
           scope.$digest();
-          expect(elm.hasClass('fa-flip-vertical')).toBe(true);
+          expect(elm.next().text()).toBe('old text');
 
-          scope.options.flip = 'foobar';
+          scope.options.alt = 'my text';
           scope.$digest();
-          expect(elm.hasClass('fa-flip-foobar')).toBe(true);
-        });
+          expect(elm.next().text()).toBe('my text');
 
-        it('should clear existing classes', function () {
-          scope.options.flip = 'horizontal';
+          scope.options.alt = 'my newer text';
           scope.$digest();
-          expect(elm.hasClass('fa-flip-horizontal')).toBe(true);
+          expect(elm.next().text()).toBe('my newer text');
 
-          scope.options.flip = 'vertical';
-          scope.$digest();
-          expect(elm.hasClass('fa-flip-vertical')).toBe(true);
-          expect(elm.hasClass('fa-flip-horizontal')).not.toBe(true);
+          done();
         });
       });
 
-      describe('rotate', function () {
+      it('should only insert the element if alt text is present', function (done) {
         var elm, scope;
 
-        beforeEach(inject(function($rootScope, $compile) {
-          elm = angular.element('<fa name="shield" rotate="{{ options.rotate }}"></fa>');
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" alt=""></fa>');
           scope = $rootScope;
 
-          $rootScope.options = $rootScope.options || {};
           $compile(elm)(scope);
           scope.$digest();
-        }));
+          expect(elm.next()).toEqual({});
 
-        it('should handle any int #futureproofing', function () {
-          scope.options.rotate = 90;
-          scope.$digest();
-          expect(elm.hasClass('fa-rotate-90')).toBe(true);
+          done();
+        });
+      });
 
-          scope.options.rotate = 180;
+      it('should not mess with an existing sibling', function (done) {
+        var elm, scope;
+
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" alt="{{ options.alt }}"></fa>');
+          elm.after('<span>my non-sr label</span>');
+          scope = $rootScope;
+
+          scope.options = {alt: 'old text'};
+
+          $compile(elm)(scope);
           scope.$digest();
-          expect(elm.hasClass('fa-rotate-180')).toBe(true);
+          expect(elm.next().text()).toBe('old text');
+          expect(elm.next().next().text()).toBe('my non-sr label');
 
-          scope.options.rotate = 270;
-          scope.$digest();
-          expect(elm.hasClass('fa-rotate-270')).toBe(true);
+          done();
         });
+      });
 
-        it('should handle any string #futureproofing', function () {
-          scope.options.rotate = '90';
-          scope.$digest();
-          expect(elm.hasClass('fa-rotate-90')).toBe(true);
+      it('should remove the alt element if alt text has been removed', function (done) {
+        var elm, scope;
 
-          scope.options.rotate = '180';
-          scope.$digest();
-          expect(elm.hasClass('fa-rotate-180')).toBe(true);
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" alt="{{ options.alt }}"></fa>');
+          scope = $rootScope;
 
-          scope.options.rotate = '270';
+          $rootScope.options = {alt: 'old text'};
+
+          $compile(elm)(scope);
           scope.$digest();
-          expect(elm.hasClass('fa-rotate-270')).toBe(true);
-        });
+          expect(elm.next().text()).toBe('old text');
 
-        it('should clear existing classes', function () {
-          scope.options.rotate = 90;
+          delete scope.options.alt;
           scope.$digest();
-          expect(elm.hasClass('fa-rotate-90')).toBe(true);
+          expect(elm.next()).toEqual({});
 
-          scope.options.rotate = 180;
-          scope.$digest();
-          expect(elm.hasClass('fa-rotate-180')).toBe(true);
-          expect(elm.hasClass('fa-rotate-90')).not.toBe(true);
+          done();
         });
       });
     });
+  });
 
-    describe('boolean attributes', function () {
-      describe('spin', function () {
-        it('should set the class if the attr is present with no value', function (done) {
-          var elm, scope;
+  describe('boolean attributes', function () {
+    describe('spin', function () {
+      it('should set the class if the attr is present with no value', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" spin></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" spin></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-spin')).toBe(true);
+          expect(elm.hasClass('fa-spin')).toBe(true);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should be set to false if it\'s declared', function (done) {
-          var elm, scope;
+      it('should be set to false if it\'s declared', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" spin="false"></fa>');
-            scope = $rootScope;
-            $compile(elm)(scope);
-            scope.$digest();
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" spin="false"></fa>');
+          scope = $rootScope;
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-spin')).toBe(false);
+          expect(elm.hasClass('fa-spin')).toBe(false);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should bind to an expression', function (done) {
-          var elm, scope;
+      it('should bind to an expression', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" spin="{{ options.loading }}"></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" spin="{{ options.loading }}"></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            scope.options.loading = true;
-            scope.$digest();
-            expect(elm.hasClass('fa-spin')).toBe(true);
+          scope.options.loading = true;
+          scope.$digest();
+          expect(elm.hasClass('fa-spin')).toBe(true);
 
-            scope.options.loading = false;
-            scope.$digest();
-            expect(elm.hasClass('fa-spin')).toBe(false);
+          scope.options.loading = false;
+          scope.$digest();
+          expect(elm.hasClass('fa-spin')).toBe(false);
 
-            done();
-          });
+          done();
         });
       });
+    });
 
-      describe('border', function () {
-        it('should set the class if the attr is present with no value', function (done) {
-          var elm, scope;
+    describe('border', function () {
+      it('should set the class if the attr is present with no value', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" border></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" border></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-border')).toBe(true);
+          expect(elm.hasClass('fa-border')).toBe(true);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should be set to false if it\'s declared', function (done) {
-          var elm, scope;
+      it('should be set to false if it\'s declared', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" border="false"></fa>');
-            scope = $rootScope;
-            $compile(elm)(scope);
-            scope.$digest();
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" border="false"></fa>');
+          scope = $rootScope;
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-border')).toBe(false);
+          expect(elm.hasClass('fa-border')).toBe(false);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should bind to an expression', function (done) {
-          var elm, scope;
+      it('should bind to an expression', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="loading" border="{{ options.border }}"></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="loading" border="{{ options.border }}"></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            scope.options.border = true;
-            scope.$digest();
-            expect(elm.hasClass('fa-border')).toBe(true);
+          scope.options.border = true;
+          scope.$digest();
+          expect(elm.hasClass('fa-border')).toBe(true);
 
-            scope.options.border = false;
-            scope.$digest();
-            expect(elm.hasClass('fa-border')).toBe(false);
+          scope.options.border = false;
+          scope.$digest();
+          expect(elm.hasClass('fa-border')).toBe(false);
 
-            done();
-          });
+          done();
         });
       });
+    });
 
-      describe('fw', function () {
-        it('should set the class if the attr is present with no value', function (done) {
-          var elm, scope;
+    describe('fw', function () {
+      it('should set the class if the attr is present with no value', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="square" fw></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="square" fw></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-fw')).toBe(true);
+          expect(elm.hasClass('fa-fw')).toBe(true);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should be set to false if it\'s declared', function (done) {
-          var elm, scope;
+      it('should be set to false if it\'s declared', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="square" fw="false"></fa>');
-            scope = $rootScope;
-            $compile(elm)(scope);
-            scope.$digest();
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="square" fw="false"></fa>');
+          scope = $rootScope;
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-fw')).toBe(false);
+          expect(elm.hasClass('fa-fw')).toBe(false);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should bind to an expression', function (done) {
-          var elm, scope;
+      it('should bind to an expression', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="square" fw="{{ options.fw }}"></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="square" fw="{{ options.fw }}"></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            scope.options.fw = true;
-            scope.$digest();
-            expect(elm.hasClass('fa-fw')).toBe(true);
+          scope.options.fw = true;
+          scope.$digest();
+          expect(elm.hasClass('fa-fw')).toBe(true);
 
-            scope.options.fw = false;
-            scope.$digest();
-            expect(elm.hasClass('fa-fw')).toBe(false);
+          scope.options.fw = false;
+          scope.$digest();
+          expect(elm.hasClass('fa-fw')).toBe(false);
 
-            done();
-          });
+          done();
         });
       });
+    });
 
-      describe('inverse', function () {
-        it('should set the class if the attr is present with no value', function (done) {
-          var elm, scope;
+    describe('inverse', function () {
+      it('should set the class if the attr is present with no value', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="github" inverse></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" inverse></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-inverse')).toBe(true);
+          expect(elm.hasClass('fa-inverse')).toBe(true);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should be set to false if it\'s declared', function (done) {
-          var elm, scope;
+      it('should be set to false if it\'s declared', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="github" inverse="false"></fa>');
-            scope = $rootScope;
-            $compile(elm)(scope);
-            scope.$digest();
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" inverse="false"></fa>');
+          scope = $rootScope;
+          $compile(elm)(scope);
+          scope.$digest();
 
-            expect(elm.hasClass('fa-inverse')).toBe(false);
+          expect(elm.hasClass('fa-inverse')).toBe(false);
 
-            done();
-          });
+          done();
         });
+      });
 
-        it('should bind to an expression', function (done) {
-          var elm, scope;
+      it('should bind to an expression', function (done) {
+        var elm, scope;
 
-          inject(function($rootScope, $compile) {
-            elm = angular.element('<fa name="github" inverse="{{ options.inverse }}"></fa>');
-            scope = $rootScope;
+        inject(function ($rootScope, $compile) {
+          elm = angular.element('<fa name="github" inverse="{{ options.inverse }}"></fa>');
+          scope = $rootScope;
 
-            $rootScope.options = $rootScope.options || {};
+          $rootScope.options = $rootScope.options || {};
 
-            $compile(elm)(scope);
-            scope.$digest();
+          $compile(elm)(scope);
+          scope.$digest();
 
-            scope.options.inverse = true;
-            scope.$digest();
-            expect(elm.hasClass('fa-inverse')).toBe(true);
+          scope.options.inverse = true;
+          scope.$digest();
+          expect(elm.hasClass('fa-inverse')).toBe(true);
 
-            scope.options.inverse = false;
-            scope.$digest();
-            expect(elm.hasClass('fa-inverse')).toBe(false);
+          scope.options.inverse = false;
+          scope.$digest();
+          expect(elm.hasClass('fa-inverse')).toBe(false);
 
-            done();
-          });
+          done();
         });
       });
     });
+  });
 
-    describe('conditional attributes', function () {
-      describe('list', function () {});
+  describe('conditional attributes', function () {
+    describe('list', function () {});
 
-      // describe('stacks', function () {});
+    // describe('stacks', function () {});
 
-      describe('ratings stars', function () {});
-    });
+    describe('ratings stars', function () {});
+  });
 
-    describe('demo tests', function () {
-      it('should handle normal directives, such as ng-class', function (done) {
-        var elm, scope;
+  describe('demo tests', function () {
+    it('should handle normal directives, such as ng-class', function (done) {
+      var elm, scope;
 
-        inject(function ($rootScope, $compile) {
-          elm = angular.element('<fa name="{{ options.name }}" ng-class="{\'boom\': options.booming}" ng-style="{\'color\': options.color}"></fa>');
-          scope = $rootScope;
-          $compile(elm)($rootScope);
-          $rootScope.$digest();
+      inject(function ($rootScope, $compile) {
+        elm = angular.element('<fa name="{{ options.name }}" ng-class="{\'boom\': options.booming}" ng-style="{\'color\': options.color}"></fa>');
+        scope = $rootScope;
+        $compile(elm)($rootScope);
+        $rootScope.$digest();
 
-          scope.options = scope.options || {};
-          scope.options.name = 'square';
-          scope.options.color = 'blue';
-          scope.$digest();
+        scope.options = scope.options || {};
+        scope.options.name = 'square';
+        scope.options.color = 'blue';
+        scope.$digest();
 
-          expect(elm.hasClass('fa')).toBe(true);
-          expect(elm.hasClass('fa-square')).toBe(true);
-          expect(elm.hasClass('boom')).toBe(false);
-          expect(elm.css('color')).toBe('blue');
+        expect(elm.hasClass('fa')).toBe(true);
+        expect(elm.hasClass('fa-square')).toBe(true);
+        expect(elm.hasClass('boom')).toBe(false);
+        expect(elm.css('color')).toBe('blue');
 
-          scope.options.name = 'envelope';
-          scope.options.color = 'red';
-          scope.options.booming = true;
-          scope.$digest();
+        scope.options.name = 'envelope';
+        scope.options.color = 'red';
+        scope.options.booming = true;
+        scope.$digest();
 
-          expect(elm.hasClass('fa')).toBe(true);
-          expect(elm.hasClass('fa-envelope')).toBe(true);
-          expect(elm.hasClass('fa-square')).not.toBe(true);
-          expect(elm.hasClass('boom')).toBe(true);
-          expect(elm.css('color')).toBe('red');
+        expect(elm.hasClass('fa')).toBe(true);
+        expect(elm.hasClass('fa-envelope')).toBe(true);
+        expect(elm.hasClass('fa-square')).not.toBe(true);
+        expect(elm.hasClass('boom')).toBe(true);
+        expect(elm.css('color')).toBe('red');
 
-          done();
-        });
+        done();
       });
+    });
 
-      describe('list', function () {});
+    describe('list', function () {});
 
-      // describe('stacks', function () {});
+    // describe('stacks', function () {});
 
-      describe('ratings stars', function () {});
-    });
+    describe('ratings stars', function () {});
   });
-}());
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62165

increased by68.2%

Number of package files

16

increased by14.29%

Lines of code

932

increased by20.41%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

174

increased by16.78%

Worsened metrics

Dev dependency count

18

increased by12.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes