Make toasts selectable by keyboard

test/toasterContainerControllerSpec.js

@@ -431,4 +431,52 @@ describe('toasterContainer controller', function () {
     		expect(console.log).toHaveBeenCalledWith("TOAST-NOTE: Your click handler is not inside a parent scope of toaster-container.");
 		});
 	});
+
+	describe('keydown', function () {
+		it('should do nothing if spacebar is pressed', function () {
+			var container = angular.element(
+						'<toaster-container toaster-options="{ \'tap-to-dismiss\': true, \'close-button\': false }"></toaster-container>');
+
+			$compile(container)(rootScope);
+			rootScope.$digest();
+			var scope = container.scope();
+
+			spyOn(scope, 'removeToast').and.callThrough();
+
+			toaster.pop({type: 'info'});
+			rootScope.$digest();
+
+			scope.enter({
+				stopPropagation: function () {
+					return true;
+				}, originalEvent: {key: 'Spacebar'}
+			}, scope.toasters[0]);
+
+			expect(scope.toasters.length).toBe(1);
+			expect(scope.removeToast).not.toHaveBeenCalled();
+		});
+
+		it('should remove toast if enter is pressed', function () {
+			var container = angular.element(
+						'<toaster-container toaster-options="{ \'tap-to-dismiss\': true, \'close-button\': false }"></toaster-container>');
+
+			$compile(container)(rootScope);
+			rootScope.$digest();
+			var scope = container.scope();
+
+			spyOn(scope, 'removeToast').and.callThrough();
+
+			toaster.pop({type: 'info'});
+			rootScope.$digest();
+
+			scope.enter({
+				stopPropagation: function () {
+					return true;
+				}, originalEvent: {key: 'Enter'}
+			}, scope.toasters[0]);
+
+			expect(scope.toasters.length).toBe(0);
+			expect(scope.removeToast).toHaveBeenCalled();
+		});
+	});
 });

toaster.js

@@ -45,8 +45,10 @@
     ).run(['$templateCache', function($templateCache) {
             $templateCache.put('angularjs-toaster/toast.html',
                 '<div id="toast-container" ng-class="[config.position, config.animation]">' +
-                    '<div ng-repeat="toaster in toasters" class="toast" ng-class="toaster.type" ng-click="click($event, toaster)" ng-mouseover="stopTimer(toaster)" ng-mouseout="restartTimer(toaster)">' +
-                        '<div ng-if="toaster.showCloseButton" ng-click="click($event, toaster, true)" ng-bind-html="toaster.closeHtml"></div>' +
+                    '<div ng-repeat="toaster in toasters" class="toast" ng-class="toaster.type" ng-click="click($event, toaster)" ' +
+                        'ng-keydown="enter($event, toaster)" tabindex="0" ng-mouseover="stopTimer(toaster)" ng-mouseout="restartTimer(toaster)">' +
+                        '<div ng-if="toaster.showCloseButton" ng-click="click($event, toaster, true)" ' +
+                        'ng-keydown="enter($event, toaster)" ng-bind-html="toaster.closeHtml"></div>' +
                         '<div ng-class="config.title">{{toaster.title}}</div>' +
                         '<div ng-class="config.message" ng-switch on="toaster.bodyOutputType">' +
                         '<div ng-switch-when="html" ng-bind-html="toaster.body"></div>' +
@@ -486,6 +488,13 @@
                                 }
                             };
 
+                            // Called on keydown
+                            $scope.enter = function(event, toast, isCloseButton) {
+                                if (event.originalEvent.key === 'Enter') {
+                                    $scope.click(event,toast,isCloseButton);
+                                }
+                            }
+
                             $scope.click = function(event, toast, isCloseButton) {
                                 event.stopPropagation();