Skip to content

E
edx-platform
Commit 3f22826e by Brian Talbot
Options

studio - alerts: adding some ARIA-centric accessibility information to example… 

studio - alerts: adding some ARIA-centric accessibility information to example prompts/notifications and advanced settings save notification
parent bcf47756
Showing with 36 additions and 46 deletions
cms/static/js/base.js
...@@ -545,7 +545,7 @@ function removeDateSetter(e) { ...@@ -545,7 +545,7 @@ function removeDateSetter(e) {
function hideNotification(e) { function hideNotification(e) {
(e).preventDefault(); (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) { function hideAlert(e) {
......
cms/static/js/views/settings/advanced_view.js
...@@ -104,10 +104,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({ ...@@ -104,10 +104,10 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
$(".wrapper-alert").removeClass("is-shown"); $(".wrapper-alert").removeClass("is-shown");
if (type) { if (type) {
if (type === this.error_saving) { 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) { else if (type === this.successful_changes) {
$(".wrapper-alert-confirmation").addClass("is-shown"); $(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
this.hideSaveCancelButtons(); this.hideSaveCancelButtons();
} }
} }
...@@ -119,13 +119,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({ ...@@ -119,13 +119,13 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
showSaveCancelButtons: function(event) { showSaveCancelButtons: function(event) {
if (!this.notificationBarShowing) { if (!this.notificationBarShowing) {
this.$el.find(".message-status").removeClass("is-shown"); 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; this.notificationBarShowing = true;
} }
}, },
hideSaveCancelButtons: function() { hideSaveCancelButtons: function() {
if (this.notificationBarShowing) { 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; this.notificationBarShowing = false;
} }
}, },
......
cms/templates/settings_advanced.html
...@@ -108,13 +108,13 @@ editor.render(); ...@@ -108,13 +108,13 @@ editor.render();
<%block name="view_notifications"> <%block name="view_notifications">
<!-- notification: change has been made and a save is needed --> <!-- 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"> <div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">You've Made Some Changes</h2> <h2 class="title title-3" id="notification-changesMade-title">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> <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> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -134,7 +134,7 @@ editor.render(); ...@@ -134,7 +134,7 @@ editor.render();
<%block name="view_alerts"> <%block name="view_alerts">
<!-- alert: save confirmed with close --> <!-- 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"> <div class="alert confirmation">
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
...@@ -151,7 +151,7 @@ editor.render(); ...@@ -151,7 +151,7 @@ editor.render();
</div> </div>
<!-- alert: error --> <!-- alert: error -->
<div class="wrapper wrapper-alert wrapper-alert-error"> <div class="wrapper wrapper-alert wrapper-alert-error" role="status">
<div class="alert error"> <div class="alert error">
<i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
......
cms/templates/ux-alerts.html
...@@ -24,42 +24,32 @@ ...@@ -24,42 +24,32 @@
$('.action-prompt').click(function(e){ $('.action-prompt').click(function(e){
(e).preventDefault(); (e).preventDefault();
$body.toggleClass('prompt-is-shown'); $body.toggleClass('prompt-is-shown');
$(this).closest('.wrapper-prompt').attr('aria-hidden','false');
}); });
// prompt close // prompt close
$('.prompt .action-cancel, .prompt .action-proceed').click(function(e) { $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
(e).preventDefault(); (e).preventDefault();
$body.removeClass('prompt-is-shown'); $body.removeClass('prompt-is-shown');
$(this).closest('.wrapper-prompt').attr('aria-hidden','true');
}); });
$('.hide-notification').click(function(e) { $('.hide-notification').click(function(e) {
(e).preventDefault(); (e).preventDefault();
$('.wrapper-notification').removeClass('is-hiding is-shown'); $('.wrapper-notification').removeClass('is-hiding is-shown').attr('aria-hidden','true');
$(this.hash).addClass('is-hiding'); $(this.hash).addClass('is-hiding').attr('aria-hidden','true');
}); });
$('.show-notification').click(function(e) { $('.show-notification').click(function(e) {
(e).preventDefault(); (e).preventDefault();
$('.wrapper-notification').removeClass('is-shown is-hiding'); $('.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) { $('.show-notification-fleeting').click(function(e) {
(e).preventDefault(); (e).preventDefault();
$('.wrapper-notification').removeClass('is-fleeting'); $('.wrapper-notification').removeClass('is-fleeting').attr('aria-hidden','true');
$(this.hash).addClass('is-fleeting'); $(this.hash).addClass('is-fleeting').attr('aria-hidden','false');
});
$('.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');
}); });
$('.hide-alert').click(function(e) { $('.hide-alert').click(function(e) {
...@@ -83,7 +73,7 @@ ...@@ -83,7 +73,7 @@
(e).preventDefault(); (e).preventDefault();
$body.toggleClass('prompt-is-shown'); $body.toggleClass('prompt-is-shown');
$('.wrapper-prompt').removeClass('is-shown'); $('.wrapper-prompt').removeClass('is-shown');
$(this.hash).addClass('is-shown'); $(this.hash).addClass('is-shown').attr('aria-hidden','false');
}); });
}); });
</script> </script>
...@@ -377,7 +367,7 @@ ...@@ -377,7 +367,7 @@
<%block name="view_notifications"> <%block name="view_notifications">
<!-- notification: change has been made and a save is needed --> <!-- 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"> <div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i> <i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
...@@ -401,13 +391,13 @@ ...@@ -401,13 +391,13 @@
</div> </div>
<!-- notification: newer version exists --> <!-- 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"> <div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">A Newer Version of This Exists</h2> <h2 class="title title-3" id="notification-warning-title">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> <p class="message" id="notification-warning-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -425,13 +415,13 @@ ...@@ -425,13 +415,13 @@
</div> </div>
<!-- notification: warning about editing something dangerous --> <!-- 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"> <div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i> <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Are You Sure You Want to Edit That?</h2> <h2 class="title title-3" id="notification-dangerous-title">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> <p class="message" id="notification-dangerous-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -454,7 +444,7 @@ ...@@ -454,7 +444,7 @@
<i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i> <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
<div class="copy"> <div class="copy">
<h2 class="title title-3">Saving &hellip;</h2> <h2 class="title title-3" role="status">Saving &hellip;</h2>
</div> </div>
</div> </div>
</div> </div>
...@@ -465,7 +455,7 @@ ...@@ -465,7 +455,7 @@
<i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i> <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
<div class="copy"> <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> </div>
</div> </div>
...@@ -490,11 +480,11 @@ ...@@ -490,11 +480,11 @@
<%block name="view_prompts"> <%block name="view_prompts">
<!-- prompt - confirm deletion --> <!-- 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="prompt confirm">
<div class="copy"> <div class="copy">
<h2 class="title title-3">Delete "Introduction &amp; Overview"?</h2> <h2 class="title title-3" id="prompt-confirm-sectionDelete-title">Delete "Introduction &amp; Overview"?</h2>
<p class="message">Deleting a section cannot be undone and its contents cannot be recovered.</p> <p class="message" id="prompt-confirm-sectionDelete-description">Deleting a section cannot be undone and its contents cannot be recovered.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -512,11 +502,11 @@ ...@@ -512,11 +502,11 @@
</div> </div>
<!-- prompt - warning --> <!-- 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="prompt warning">
<div class="copy"> <div class="copy">
<h2 class="title title-3">Use Advanced Problem Editor?</h2> <h2 class="title title-3" id="prompt-warning-useAdvanced-title">Use Advanced Problem Editor?</h2>
<p class="message">If you proceed, you cannot edit this problem using the simple problem editor.</p> <p class="message" id="prompt-warning-useAdvanced-description">If you proceed, you cannot edit this problem using the simple problem editor.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
...@@ -534,11 +524,11 @@ ...@@ -534,11 +524,11 @@
</div> </div>
<!-- prompt - error --> <!-- 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="prompt error">
<div class="copy"> <div class="copy">
<h2 class="title title-3">There Were Errors in Your Submission</h2> <h2 class="title title-3" id="prompt-errorUser-title">There Were Errors in Your Submission</h2>
<p class="message">Please correct the errors noted on the page and try again.</p> <p class="message" id="prompt-errorUser-description">Please correct the errors noted on the page and try again.</p>
</div> </div>
<nav class="nav-actions"> <nav class="nav-actions">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment