Skip to content
Snippets Groups Projects
Commit e19090cf authored by Douglas Hall's avatar Douglas Hall
Browse files

Merge pull request #3 from edx/douglashall/PHX-207/accessibility_improvements

PHX-207 Accessibility Improvements
parents 5e0d151d 90cf179e
No related branches found
No related tags found
No related merge requests found
.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{top:80px !important}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}
.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{top:80px !important}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}.lean-overlay{background:transparent;background-image:radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}
......@@ -7,15 +7,16 @@ function LtiConsumerXBlock(runtime, element) {
$.fn.extend({
iframeModal: function (options) {
var $trigger = $(this);
var modal_id = $trigger.data("target");
var defaults = {top: 100, overlay: 0.5, closeButton: null};
var overlay = $("<div id='lean_overlay'></div>");
var overlay_id = (modal_id + '_lean-overlay').replace('#', '');
var overlay = $("<div id='" + overlay_id + "' class='lean-overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function () {
var o = options;
$(this).click(function (e) {
var modal_id = $(this).data("target");
$("#lean_overlay").click(function () {
$("#" + overlay_id).click(function () {
close_modal(modal_id)
});
$(o.closeButton).click(function () {
......@@ -23,8 +24,8 @@ function LtiConsumerXBlock(runtime, element) {
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({"display": "block", opacity: 0});
$("#lean_overlay").fadeTo(200, o.overlay);
$("#" + overlay_id).css({"display": "block", opacity: 0});
$("#" + overlay_id).fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
......@@ -35,11 +36,11 @@ function LtiConsumerXBlock(runtime, element) {
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
$(modal_id).attr('aria-hidden', false);
e.preventDefault();
/* Manage focus for modal dialog */
var iframe = $(modal_id).find('iframe')[0].contentWindow;
/* Set focus on close button */
$(o.closeButton).focus();
......@@ -61,8 +62,9 @@ function LtiConsumerXBlock(runtime, element) {
});
function close_modal(modal_id) {
$('select, input, textarea, button, a').off('focus');
$("#lean_overlay").fadeOut(200);
$(modal_id).css({"display": "none"})
$("#" + overlay_id).fadeOut(200);
$(modal_id).css({"display": "none"});
$(modal_id).attr('aria-hidden', true);
$trigger.focus();
}
}
......
......@@ -62,3 +62,15 @@
}
}
}
.lean-overlay {
background: transparent;
background-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
<iframe
title="External Tool Content"
title="${display_name}"
class="ltiLaunchFrame"
name="ltiFrame-${element_id}"
src="${form_url}"
......
......@@ -52,8 +52,8 @@
aria-hidden="true"
style="width:${modal_width}px; height:${modal_height}px;"
>
<div class="inner-wrapper" role="dialog" aria-labelledby="lti-modal-title">
<button class="close-modal" tabindex="1">
<div class="inner-wrapper" role="dialog">
<button class="close-modal">
<i class="icon fa fa-remove"></i>
<span class="sr">Close</span>
</button>
......
......@@ -22,7 +22,7 @@ def package_data(pkg, roots):
setup(
name='lti_consumer-xblock',
version='v1.0.0',
version='1.0.1',
description='This XBlock implements the consumer side of the LTI specification.',
packages=[
'lti_consumer',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment