Add role alert to toasts
For accessibility reasons, 'role="alert" is required for toast
messages. This notifies screen readers that an error or success
message has appeared. Adds a service layer for toast messages
that adds the role attribute to the message.
Change-Id: Ic4dbf5556337eea589de5692c1b4c3323e771813
Signed-off-by: beccabroek <beccabroek@gmail.com>
diff --git a/app/common/services/toastService.js b/app/common/services/toastService.js
new file mode 100644
index 0000000..c199e96
--- /dev/null
+++ b/app/common/services/toastService.js
@@ -0,0 +1,28 @@
+/**
+ * data service
+ *
+ * @module app/common/services/toastService
+ * @exports toastService
+ * @name toastService
+
+ */
+
+window.angular && (function(angular) {
+ 'use strict';
+
+ angular.module('app.common.services').service('toastService', [
+ 'ngToast', '$sce',
+ function(ngToast, $sce) {
+ this.error = function(message) {
+ var errorMessage = $sce.trustAsHtml(
+ '<div role="alert"><b>Error</b><br>' + message + '</div>');
+ ngToast.create({className: 'danger', content: errorMessage});
+ };
+ this.success = function(message) {
+ var successMessage = $sce.trustAsHtml(
+ '<div role="alert"><b>Success!</b><br>' + message + '</div>');
+ ngToast.create({className: 'success', content: successMessage});
+ };
+ }
+ ]);
+})(window.angular);
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
index ae6d1bc..a530472 100644
--- a/app/common/styles/elements/toast.scss
+++ b/app/common/styles/elements/toast.scss
@@ -15,14 +15,4 @@
border-radius: 0;
text-align: left;
}
- .alert-success::before {
- content: "Success!";
- display: block;
- font-weight: bold;
- }
- .alert-danger::before {
- content: "Error";
- display: block;
- font-weight: bold;
- }
}