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) { H5P.Dialog = function (name, title, content, $element) {
/** @alias H5P.Dialog# */ /** @alias H5P.Dialog# */
var self = this; 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">\ <div class="h5p-inner">\
<h2>' + title + '</h2>\ <h2>' + title + '</h2>\
<div class="h5p-scroll-content">' + content + '</div>\ <div class="h5p-scroll-content">' + content + '</div>\
@ -1053,6 +1053,12 @@ H5P.Dialog = function (name, title, content, $element) {
.click(function () { .click(function () {
self.close(); self.close();
}) })
.keypress(function (e) {
if (e.which === 13 || e.which === 32) {
self.close();
return false;
}
})
.end() .end()
.find('a') .find('a')
.click(function (e) { .click(function (e) {
@ -1072,6 +1078,7 @@ H5P.Dialog = function (name, title, content, $element) {
$dialog.addClass('h5p-open'); // Fade in $dialog.addClass('h5p-open'); // Fade in
// Triggering an event, in case something has to be done after dialog has been opened. // Triggering an event, in case something has to be done after dialog has been opened.
H5P.jQuery(self).trigger('dialog-opened', [$dialog]); H5P.jQuery(self).trigger('dialog-opened', [$dialog]);
$dialog.focus();
}, 1); }, 1);
}; };
@ -1083,6 +1090,8 @@ H5P.Dialog = function (name, title, content, $element) {
setTimeout(function () { setTimeout(function () {
$dialog.remove(); $dialog.remove();
H5P.jQuery(self).trigger('dialog-closed', [$dialog]); H5P.jQuery(self).trigger('dialog-closed', [$dialog]);
$element.attr('tabindex', '-1');
$element.focus();
}, 200); }, 200);
}; };
}; };
@ -1363,11 +1372,11 @@ H5P.openEmbedDialog = function ($element, embedCode, resizeCode, size, instance)
var $expander = H5P.jQuery(this); var $expander = H5P.jQuery(this);
var $content = $expander.next(); var $content = $expander.next();
if ($content.is(':visible')) { 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(); $content.hide();
} }
else { else {
$expander.addClass('h5p-open').text(H5P.t('hideAdvanced')); $expander.addClass('h5p-open').text(H5P.t('hideAdvanced')).attr('aria-expanded', 'false');
$content.show(); $content.show();
} }
$dialog.find('.h5p-embed-code-container').each(function () { $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 { .h5p-popup-dialog .h5p-close {
cursor: pointer; cursor: pointer;
}
.h5p-popup-dialog .h5p-close:after {
font-family: 'H5P';
content: "\e894";
font-size: 2em; font-size: 2em;
position: absolute; position: absolute;
right: 0; right: 0;
@ -383,6 +379,10 @@ div.h5p-fullscreen {
text-indent: -0.065em; text-indent: -0.065em;
z-index: 3 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:hover:after,
.h5p-popup-dialog .h5p-close:focus:after { .h5p-popup-dialog .h5p-close:focus:after {
color: #454545; color: #454545;
@ -412,7 +412,6 @@ div.h5p-fullscreen {
.h5p-expander { .h5p-expander {
cursor: pointer; cursor: pointer;
font-size: 1.125em; font-size: 1.125em;
outline: none;
margin: 0.5em 0 0; margin: 0.5em 0 0;
display: inline-block; display: inline-block;
} }