L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-61388 boost: accessibility

Browse Source 
Dynamically show and focus on an alert that was written on page load. This ensures JAWS will read it
as soon as the page is ready, otherwise JAWS would choose to ignore it as per

https://www.w3.org/TR/wai-aria-practices/#alert.
This commit is contained in:
Damyon Wiese
2018-10-22 10:53:31 +08:00
parent a986cb4ba1
commit addb26acbb
8 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/amd/build/aria.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
define(["jquery"],function(a){return{init:function(){var b=!1,c=function(){b=!0},d=function(){var a=b;return b=!1,a};a('[data-toggle="dropdown"]').keydown(function(b){var d,e=b.which||b.keyCode;38==e&&c(),27==e&&(d=a(b.target).attr("aria-expanded"),b.preventDefault(),"false"==d&&a(b.target).click()),32!=e&&13!=e||(b.preventDefault(),a(b.target).click())});var e=function(b){var c=function(){a(this).focus()}.bind(b);setTimeout(c,50)};a(".dropdown").on("shown.bs.dropdown",function(b){var c=a(b.target).find('[role="menu"]'),f=!1,g=!1;c&&(f=a(c).find('[role="menuitem"]')),f&&f.length>0&&(g=d()?f[f.length-1]:f[0]),g&&e(g)}),a('.dropdown [role="menu"] [role="menuitem"]').keypress(function(b){var c,d,f=String.fromCharCode(b.which||b.keyCode),g=a(b.target).closest('[role="menu"]'),h=0,i=!1;if(g&&(i=a(g).find('[role="menuitem"]')))for(f=f.toLowerCase(),h=0;h<i.length;h++)if(c=a(i[h]),d=c.text().trim().toLowerCase(),0==d.indexOf(f)){e(c);break}}),a('.dropdown [role="menu"] [role="menuitem"]').keydown(function(b){var c=b.which||b.keyCode,d=!1,f=a(b.target).closest('[role="menu"]'),g=0,h=!1;if(f&&(h=a(f).find('[role="menuitem"]'))){if(40==c){for(g=0;g<h.length-1;g++)if(h[g]==b.target){d=h[g+1];break}d||(d=h[0])}else if(38==c){for(g=1;g<h.length;g++)if(h[g]==b.target){d=h[g-1];break}d||(d=h[h.length-1])}else 36==c?d=h[0]:35==c&&(d=h[h.length-1]);d&&(b.preventDefault(),e(d))}}),a(".dropdown").on("hidden.bs.dropdown",function(b){var c=a(b.target).find('[data-toggle="dropdown"]');c&&e(c)})}}});
define(["jquery"],function(a){return{init:function(){var b=!1,c=function(){b=!0},d=function(){var a=b;return b=!1,a};a('[data-toggle="dropdown"]').keydown(function(b){var d,e=b.which||b.keyCode;38==e&&c(),27==e&&(d=a(b.target).attr("aria-expanded"),b.preventDefault(),"false"==d&&a(b.target).click()),32!=e&&13!=e||(b.preventDefault(),a(b.target).click())});var e=function(b){var c=function(){a(this).focus()}.bind(b);setTimeout(c,50)};a(".dropdown").on("shown.bs.dropdown",function(b){var c=a(b.target).find('[role="menu"]'),f=!1,g=!1;c&&(f=a(c).find('[role="menuitem"]')),f&&f.length>0&&(g=d()?f[f.length-1]:f[0]),g&&e(g)}),a('.dropdown [role="menu"] [role="menuitem"]').keypress(function(b){var c,d,f=String.fromCharCode(b.which||b.keyCode),g=a(b.target).closest('[role="menu"]'),h=0,i=!1;if(g&&(i=a(g).find('[role="menuitem"]')))for(f=f.toLowerCase(),h=0;h<i.length;h++)if(c=a(i[h]),d=c.text().trim().toLowerCase(),0==d.indexOf(f)){e(c);break}}),a('.dropdown [role="menu"] [role="menuitem"]').keydown(function(b){var c=b.which||b.keyCode,d=!1,f=a(b.target).closest('[role="menu"]'),g=0,h=!1;if(f&&(h=a(f).find('[role="menuitem"]'))){if(40==c){for(g=0;g<h.length-1;g++)if(h[g]==b.target){d=h[g+1];break}d||(d=h[0])}else if(38==c){for(g=1;g<h.length;g++)if(h[g]==b.target){d=h[g-1];break}d||(d=h[h.length-1])}else 36==c?d=h[0]:35==c&&(d=h[h.length-1]);d&&(b.preventDefault(),e(d))}}),a(".dropdown").on("hidden.bs.dropdown",function(b){var c=a(b.target).find('[data-toggle="dropdown"]');c&&e(c)}),a(function(){window.setTimeout(function(){var b=a('[role="alert"][data-aria-autofocus="true"]');b.length>0&&(a(b[0]).attr("tabindex","0"),a(b[0]).focus())},300)})}}});
theme/boost/amd/src/aria.js
+11
View File
@@ -183,6 +183,17 @@ define(['jquery'], function($) {
shiftFocus(trigger);
}
});
// After page load, focus on any element with special autofocus attribute.
$(function() {
window.setTimeout(function() {
var alerts = $('[role="alert"][data-aria-autofocus="true"]');
if (alerts.length > 0) {
$(alerts[0]).attr('tabindex', '0');
$(alerts[0]).focus();
}
}, 300);
});
}
};
});
theme/boost/templates/core/auth_verify_age_location_page.mustache
+1 -1
View File
@@ -40,7 +40,7 @@
<hr>
</div>
{{#error}}
<div class="alert alert-danger" role="alert">
<div class="alert alert-danger" role="alert" data-aria-autofocus="true">
{{{error}}}
</div>
{{/error}}
theme/boost/templates/core/loginform.mustache
+1 -1
View File
@@ -112,7 +112,7 @@
{{#error}}
<div class="loginerrors mt-3">
<a href="#" id="loginerrormessage" class="accesshide">{{error}}</a>
<div class="alert alert-danger" role="alert">{{error}}</div>
<div class="alert alert-danger" role="alert" data-aria-autofocus="true">{{error}}</div>
</div>
{{/error}}
theme/boost/templates/core/notification_error.mustache
+1 -1
View File
@@ -37,7 +37,7 @@
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
}}
<div class="alert alert-danger alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert"{{/ announce }}{{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
theme/boost/templates/core/notification_info.mustache
+1 -1
View File
@@ -37,7 +37,7 @@
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
}}
<div class="alert alert-info alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert"{{/ announce }}{{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
theme/boost/templates/core/notification_success.mustache
+1 -1
View File
@@ -37,7 +37,7 @@
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
}}
<div class="alert alert-success alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert"{{/ announce }}{{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
theme/boost/templates/core/notification_warning.mustache
+2 -2
View File
@@ -37,8 +37,8 @@
{ "message": "Your pants are on fire!", "closebutton": 1, "announce": 1, "extraclasses": "foo bar"}
}}
<div class="alert alert-warning alert-block fade in {{ extraclasses }}" {{!
}}{{# announce }} role="alert"{{/ announce }}{{!
}}{{# announce }} role="alert" data-aria-autofocus="true"{{/ announce }}{{!
}}>
{{# closebutton }}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/ closebutton }}
{{{ message }}}
</div>
</div>