From 3f22826e26c85033daaebc3914a0946256d21605 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 8 Apr 2013 16:28:31 -0400
Subject: [PATCH] studio - alerts: adding some ARIA-centric accessibility
 information to example prompts/notifications and advanced settings save
 notification

---
 cms/static/js/base.js                         |  2 +-
 cms/static/js/views/settings/advanced_view.js |  8 +--
 cms/templates/settings_advanced.html          | 10 +--
 cms/templates/ux-alerts.html                  | 62 ++++++++-----------
 4 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index bb3fe88510..6d047050be 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -545,7 +545,7 @@ function removeDateSetter(e) {
 
 function hideNotification(e) {
     (e).preventDefault();
-    $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
+    $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding').attr('aria-hidden','true');
 }
 
 function hideAlert(e) {
diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js
index 536f23004e..9c62499773 100644
--- a/cms/static/js/views/settings/advanced_view.js
+++ b/cms/static/js/views/settings/advanced_view.js
@@ -104,10 +104,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         $(".wrapper-alert").removeClass("is-shown");
         if (type) {
             if (type === this.error_saving) {
-                $(".wrapper-alert-error").addClass("is-shown");
+                $(".wrapper-alert-error").addClass("is-shown").attr('aria-hidden','false');
             }
             else if (type === this.successful_changes) {
-                $(".wrapper-alert-confirmation").addClass("is-shown");
+                $(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
                 this.hideSaveCancelButtons();
             }
         }
@@ -119,13 +119,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
     showSaveCancelButtons: function(event) {
         if (!this.notificationBarShowing) {
             this.$el.find(".message-status").removeClass("is-shown");
-            $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown');
+            $('.wrapper-notification').removeClass('is-hiding').addClass('is-shown').attr('aria-hidden','false');
             this.notificationBarShowing = true;
         }
     },
     hideSaveCancelButtons: function() {
         if (this.notificationBarShowing) {
-            $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
+            $('.wrapper-notification').removeClass('is-shown').addClass('is-hiding').attr('aria-hidden','true');
             this.notificationBarShowing = false;
         }
     },
diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html
index 4cd1a4acd9..034f1a32e2 100644
--- a/cms/templates/settings_advanced.html
+++ b/cms/templates/settings_advanced.html
@@ -108,13 +108,13 @@ editor.render();
 
 <%block name="view_notifications">
 <!-- notification: change has been made and a save is needed -->
-<div class="wrapper wrapper-notification wrapper-notification-warning">
+<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description">
   <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
 
     <div class="copy">
-      <h2 class="title title-3">You've Made Some Changes</h2>
-      <p>Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
+      <h2 class="title title-3" id="notification-changesMade-title">You've Made Some Changes</h2>
+      <p id="notification-changesMade-description">Your changes will not take effect until you <strong>save your progress</strong>. Take care with key and value formatting, as validation is <strong>not implemented</strong>.</p>
     </div>
 
     <nav class="nav-actions">
@@ -134,7 +134,7 @@ editor.render();
 
 <%block name="view_alerts">
 <!-- alert: save confirmed with close -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation">
+<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
   <div class="alert confirmation">
     <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
 
@@ -151,7 +151,7 @@ editor.render();
 </div>
 
 <!-- alert: error -->
-<div class="wrapper wrapper-alert wrapper-alert-error">
+<div class="wrapper wrapper-alert wrapper-alert-error" role="status">
   <div class="alert error">
     <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
 
diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html
index bc4f135f63..de062e471e 100644
--- a/cms/templates/ux-alerts.html
+++ b/cms/templates/ux-alerts.html
@@ -24,42 +24,32 @@
     $('.action-prompt').click(function(e){
         (e).preventDefault();
         $body.toggleClass('prompt-is-shown');
+        $(this).closest('.wrapper-prompt').attr('aria-hidden','false');
     });
 
     // prompt close
     $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
         (e).preventDefault();
         $body.removeClass('prompt-is-shown');
+        $(this).closest('.wrapper-prompt').attr('aria-hidden','true');
     });
 
     $('.hide-notification').click(function(e) {
         (e).preventDefault();
-        $('.wrapper-notification').removeClass('is-hiding is-shown');
-        $(this.hash).addClass('is-hiding');
+        $('.wrapper-notification').removeClass('is-hiding is-shown').attr('aria-hidden','true');
+        $(this.hash).addClass('is-hiding').attr('aria-hidden','true');
     });
 
     $('.show-notification').click(function(e) {
         (e).preventDefault();
         $('.wrapper-notification').removeClass('is-shown is-hiding');
-        $(this.hash).addClass('is-shown');
+        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
     });
 
     $('.show-notification-fleeting').click(function(e) {
         (e).preventDefault();
-        $('.wrapper-notification').removeClass('is-fleeting');
-        $(this.hash).addClass('is-fleeting');
-    });
-
-    $('.hide-banner').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-banner').removeClass('is-hiding');
-        $(this.hash).addClass('is-hiding');
-    });
-
-    $('.show-banner').click(function(e) {
-        (e).preventDefault();
-        $('.wrapper-banner').removeClass('is-shown');
-        $(this.hash).addClass('is-shown');
+        $('.wrapper-notification').removeClass('is-fleeting').attr('aria-hidden','true');
+        $(this.hash).addClass('is-fleeting').attr('aria-hidden','false');
     });
 
     $('.hide-alert').click(function(e) {
@@ -83,7 +73,7 @@
         (e).preventDefault();
         $body.toggleClass('prompt-is-shown');
         $('.wrapper-prompt').removeClass('is-shown');
-        $(this.hash).addClass('is-shown');
+        $(this.hash).addClass('is-shown').attr('aria-hidden','false');
     });
   });
 </script>
@@ -377,7 +367,7 @@
 
 <%block name="view_notifications">
 <!-- notification: change has been made and a save is needed -->
-<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change">
+<div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change" role="status">
   <div class="notification change has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
 
@@ -401,13 +391,13 @@
 </div>
 
 <!-- notification: newer version exists -->
-<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version">
+<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-version" aria-hidden="true" role="dialog" aria-labelledby="notification-warning-title" aria-describedby="notification-warning-description">
   <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
 
     <div class="copy">
-      <h2 class="title title-3">A Newer Version of This Exists</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <h2 class="title title-3" id="notification-warning-title">A Newer Version of This Exists</h2>
+      <p class="message" id="notification-warning-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -425,13 +415,13 @@
 </div>
 
 <!-- notification: warning about editing something dangerous -->
-<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous">
+<div class="wrapper wrapper-notification wrapper-notification-warning" id="notification-dangerous" aria-hidden="true" role="dialog" aria-labelledby="notification-dangerous-title" aria-describedby="notification-dangerous-description">
   <div class="notification warning has-actions">
     <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
 
     <div class="copy">
-      <h2 class="title title-3">Are You Sure You Want to Edit That?</h2>
-      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <h2 class="title title-3" id="notification-dangerous-title">Are You Sure You Want to Edit That?</h2>
+      <p class="message" id="notification-dangerous-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -454,7 +444,7 @@
     <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
 
     <div class="copy">
-      <h2 class="title title-3">Saving &hellip;</h2>
+      <h2 class="title title-3" role="status">Saving &hellip;</h2>
     </div>
   </div>
 </div>
@@ -465,7 +455,7 @@
     <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
 
     <div class="copy">
-      <h2 class="title title-3"><a href="#">Your Section</a> Has Been Created</h2>
+      <h2 class="title title-3" role="status"><a href="#">Your Section</a> Has Been Created</h2>
     </div>
   </div>
 </div>
@@ -490,11 +480,11 @@
 
 <%block name="view_prompts">
 <!-- prompt - confirm deletion -->
-<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm">
+<div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm" aria-hidden="true" role="dialog" aria-labelledby="prompt-confirm-sectionDelete-title" aria-describedby="prompt-confirm-sectionDelete-description">
   <div class="prompt confirm">
     <div class="copy">
-      <h2 class="title title-3">Delete "Introduction &amp; Overview"?</h2>
-      <p class="message">Deleting a section cannot be undone and its contents cannot be recovered.</p>
+      <h2 class="title title-3" id="prompt-confirm-sectionDelete-title">Delete "Introduction &amp; Overview"?</h2>
+      <p class="message" id="prompt-confirm-sectionDelete-description">Deleting a section cannot be undone and its contents cannot be recovered.</p>
     </div>
 
     <nav class="nav-actions">
@@ -512,11 +502,11 @@
 </div>
 
 <!-- prompt - warning -->
-<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning">
+<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning" aria-hidden="true" role="dialog" aria-labelledby="prompt-warning-useAdvanced-title" aria-describedby="prompt-warning-useAdvanced-description">
   <div class="prompt warning">
     <div class="copy">
-      <h2 class="title title-3">Use Advanced Problem Editor?</h2>
-      <p class="message">If you proceed, you cannot edit this problem using the simple problem editor.</p>
+      <h2 class="title title-3" id="prompt-warning-useAdvanced-title">Use Advanced Problem Editor?</h2>
+      <p class="message" id="prompt-warning-useAdvanced-description">If you proceed, you cannot edit this problem using the simple problem editor.</p>
     </div>
 
     <nav class="nav-actions">
@@ -534,11 +524,11 @@
 </div>
 
 <!-- prompt - error -->
-<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error">
+<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error" aria-hidden="true" role="dialog" aria-labelledby="prompt-errorUser-title" aria-describedby="prompt-errorUser-description">
   <div class="prompt error">
     <div class="copy">
-      <h2 class="title title-3">There Were Errors in Your Submission</h2>
-      <p class="message">Please correct the errors noted on the page and try again.</p>
+      <h2 class="title title-3" id="prompt-errorUser-title">There Were Errors in Your Submission</h2>
+      <p class="message" id="prompt-errorUser-description">Please correct the errors noted on the page and try again.</p>
     </div>
 
     <nav class="nav-actions">