added aria live support

To change text announced, use `growlProvider.closeButtonText(@string);` Closes marcorinckGH-22
jonespen · Mar 6, 2014 · 546b2d0 · 546b2d0
1 parent 9eb745a
commit 546b2d0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -75,7 +75,7 @@ Finally, you have to include the directive somewhere in your HTML like this:
 
 ````html
 <body>
-    <div growl></div>
+    <div growl aria-live="polite"></div>
 </body>
 ````
 
@@ -189,6 +189,21 @@ app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
     }
 }]);
 ````
+````
+
+###Close text for assisitive technology (AT)
+
+* Default: 'Close'
+
+Label for close button. If angular-translate is present, provide a key for the translate text
+
+````javascript
+var app = angular.module('myApp', ['angular-growl']);
+
+app.config(['growlProvider', function(growlProvider) {
+    growlProvider.closeButtonText('Lukk');
+}]);
+````
 
 ###Animations
 

diff --git a/demo/demo.html b/demo/demo.html
@@ -23,7 +23,7 @@
 <div ng-controller="demoCtrl">
     <div class="text-center container"><h1>angular-growl Demo site</h1></div>
 
-    <div growl></div>
+    <div growl aria-live="polite"></div>
     <div class="container">
         <div class="well row">
             <label>

diff --git a/src/growlDirective.js b/src/growlDirective.js
@@ -5,11 +5,14 @@ angular.module("angular-growl").directive("growl", ["$rootScope", function ($roo
 		restrict: 'A',
 		template:   '<div class="growl">' +
 					'	<div class="growl-item alert" ng-repeat="message in messages" ng-class="computeClasses(message)">' +
-					'		<button type="button" class="close" ng-click="deleteMessage(message)">&times;</button>' +
-					'       <div ng-switch="message.enableHtml">' +
-					'           <div ng-switch-when="true" ng-bind-html="message.text"></div>' +
-					'           <div ng-switch-default ng-bind="message.text"></div>' +
-					'       </div>' +
+					'		<button type="button" class="close" ng-click="deleteMessage(message)">' +
+					'			<span aria-hidden="true">&times;</span>' +
+					'			<span class="sr-only hide-text" ng-bind="message.closeButtonText"></span>' +
+					'		</button>' +
+					'   <div ng-switch="message.enableHtml">' +
+					'			<div ng-switch-when="true" ng-bind-html="message.text"></div>' +
+					'			<div ng-switch-default ng-bind="message.text"></div>' +
+					'		</div>' +
 					'	</div>' +
 					'</div>',
 		replace: false,

diff --git a/src/growlFactory.js b/src/growlFactory.js
@@ -1,13 +1,23 @@
 angular.module("angular-growl").provider("growl", function() {
 	"use strict";
 
-	var _ttl = null,
-        _enableHtml = false,
+	var _closeButtonText = 'close',
+		_ttl = null,
+    _enableHtml = false,
 		_messagesKey = 'messages',
 		_messageTextKey = 'text',
 		_messageSeverityKey = 'severity',
 		_onlyUniqueMessages = true;
 
+	/**
+	 * set the text used for the close button for screen readers
+	 *
+	 * @param {string} closeButtonText default: close
+	 */
+	this.closeButtonText = function(closeButtonText) {
+		_closeButtonText = closeButtonText;
+	};
+
 	/**
 	 * set a global timeout (time to live) after which messages will be automatically closed
 	 *
@@ -97,6 +107,7 @@ angular.module("angular-growl").provider("growl", function() {
 		function broadcastMessage(message) {
 			if (translate) {
 				message.text = translate(message.text);
+				message.closeButtonText = translate(message.closeButtonText);
 			}
 			$rootScope.$broadcast("growlMessage", message);
 		}
@@ -105,6 +116,7 @@ angular.module("angular-growl").provider("growl", function() {
 			var _config = config || {}, message;
 
 			message = {
+				closeButtonText: _config.closeButtonText || _closeButtonText,
 				text: text,
 				severity: severity,
 				ttl: _config.ttl || _ttl,