EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix dialog accessibility

pull/69/head
Frode Petterson 2019-10-17 15:01:22 +02:00
parent 0293d2cdfb
commit f08655cfb0
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/h5p.js
View File

@ -1030,7 +1030,7 @@ H5P.t = function (key, vars, ns) {
H5P.Dialog = function (name, title, content, $element) {
/** @alias H5P.Dialog# */
var self = this;
var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog">\
var $dialog = H5P.jQuery('<div class="h5p-popup-dialog h5p-' + name + '-dialog" role="dialog" tabindex="-1">\
<div class="h5p-inner">\
<h2>' + title + '</h2>\
<div class="h5p-scroll-content">' + content + '</div>\
@ -1053,6 +1053,12 @@ H5P.Dialog = function (name, title, content, $element) {
.click(function () {
self.close();
})
.keypress(function (e) {
if (e.which === 13 || e.which === 32) {
self.close();
return false;
}
})
.end()
.find('a')
.click(function (e) {
@ -1072,6 +1078,7 @@ H5P.Dialog = function (name, title, content, $element) {
$dialog.addClass('h5p-open'); // Fade in
// Triggering an event, in case something has to be done after dialog has been opened.
H5P.jQuery(self).trigger('dialog-opened', [$dialog]);
$dialog.focus();
}, 1);
};
@ -1083,6 +1090,8 @@ H5P.Dialog = function (name, title, content, $element) {
setTimeout(function () {
$dialog.remove();
H5P.jQuery(self).trigger('dialog-closed', [$dialog]);
$element.attr('tabindex', '-1');
$element.focus();
}, 200);
};
};
@ -1363,11 +1372,11 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance)
var $expander = H5P.jQuery(this);
var $content = $expander.next();
if ($content.is(':visible')) {
$expander.removeClass('h5p-open').text(H5P.t('showAdvanced'));
$expander.removeClass('h5p-open').text(H5P.t('showAdvanced')).attr('aria-expanded', 'true');
$content.hide();
}
else {
$expander.addClass('h5p-open').text(H5P.t('hideAdvanced'));
$expander.addClass('h5p-open').text(H5P.t('hideAdvanced')).attr('aria-expanded', 'false');
$content.show();
}
$dialog.find('.h5p-embed-code-container').each(function () {

9
styles/h5p.css
View File

@ -367,10 +367,6 @@ div.h5p-fullscreen {
}
.h5p-popup-dialog .h5p-close {
cursor: pointer;
}
.h5p-popup-dialog .h5p-close:after {
font-family: 'H5P';
content: "\e894";
font-size: 2em;
position: absolute;
right: 0;
@ -383,6 +379,10 @@ div.h5p-fullscreen {
text-indent: -0.065em;
z-index: 3
}
.h5p-popup-dialog .h5p-close:after {
font-family: 'H5P';
content: "\e894";
}
.h5p-popup-dialog .h5p-close:hover:after,
.h5p-popup-dialog .h5p-close:focus:after {
color: #454545;
@ -412,7 +412,6 @@ div.h5p-fullscreen {
.h5p-expander {
cursor: pointer;
font-size: 1.125em;
outline: none;
margin: 0.5em 0 0;
display: inline-block;
}