a11y fix for IE 11

Changes the outline-style to dotted to improve visibility.

Also, IE 11 doesn't support outline-offset, which is what we use to ensure that
the draggable item outline is visible against the background.

So we've used an inset drop-shadow for normal mode.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -183,8 +183,10 @@
 .xblock--drag-and-drop .drag-container .option[draggable='true']:hover,
 .xblock--drag-and-drop .drag-container .option[draggable='true'][aria-grabbed='true'] {
     outline-width: 2px;
-    outline-style: solid;
+    outline-style: dotted;
     outline-offset: -4px;
+    /* IE 11 doesn't support outline-offset, so we use a box-shadow instead. */
+    box-shadow: inset 0 0 0 2px;
 }
 
 .xblock--drag-and-drop .drag-container .option.grabbed-with-mouse {
@@ -266,7 +268,7 @@
 /* Focused zone */
 .xblock--drag-and-drop .item-bank:focus,
 .xblock--drag-and-drop .zone:focus {
-    outline: 2px solid #a5a5a5;
+    outline: 2px dotted #a5a5a5;
 }
 
 .xblock--drag-and-drop .drag-container .target .zone p {
@@ -423,7 +425,7 @@
 }
 
 .xblock--drag-and-drop .popup .close-feedback-popup-button:focus {
-    outline: 2px solid white;
+    outline: 2px dotted white;
 }
 
 /*** edX pattern library components ***/