a11y: manage focus appropriately for modals with iframes in IE (LMS-1539)

common/static/js/src/accessibility_tools.js

@@ -95,7 +95,7 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) {
     $("#lean_overlay, " + closeButtonId).click(function(){
       $(mainPageId).attr("aria-hidden", "false");
       $(modalId).attr("aria-hidden", "true");
-      focusedElementBeforeModal.focus()
+      focusedElementBeforeModal.focus();
     });
 
     // get modal to exit on escape key
@@ -107,6 +107,18 @@ var accessible_modal = function(trigger, closeButtonId, modalId, mainPageId) {
           $(closeButtonId).click();
       }
     });
+
+    // In IE, focus shifts to iframes when they load.
+    // These lines ensure that focus is shifted back to the close button
+    // in the case that a modal that contains an iframe is opened in IE.
+    // see http://stackoverflow.com/questions/15792620/how-to-get-focus-back-for-parent-window-from-an-iframe-programmatically-in-javas
+    var initialFocus = true
+    $(modalId).find("iframe").on("focus", function() {
+      if (initialFocus) {
+        $(closeButtonId).focus();
+        initialFocus = false;
+      };
+    });
   });
 };
 

lms/templates/wiki/history.html

@@ -72,21 +72,21 @@
   tr.equal td {
     background-color: #F2F2F2;
   }
-  
+
   .diff-container td {
     white-space: pre; font-family: monospace;
   }
   .diff-container td,
   .diff-container th {
     padding: 2px 7px;
-    border-right: 1px solid #DDD;    
+    border-right: 1px solid #DDD;
   }
   .diff-container td:last-child,
   .diff-container th:last-child {
     border-right: none;
   }
   .diff-container table {
-    border-top: 1px solid #DDD;    
+    border-top: 1px solid #DDD;
   }
 </style>
 {% endaddtoblock %}