Hiding focus outline on programmatically focusable els

cms/static/sass/_base.scss

@@ -36,8 +36,8 @@ body, input, button {
   font-family: 'Open Sans', sans-serif;
 }
 
-// we want to hide the outline on the focusable <main> element
-main {
+// removing the outline on any element that we make programmatically focusable
+[tabindex="-1"] {
     outline: none;
 }
 

lms/static/sass/base/_base.scss

@@ -20,6 +20,11 @@ body {
   background: $body-bg;
 }
 
+// removing the outline on any element that we make programmatically focusable
+[tabindex="-1"] {
+    outline: none;
+}
+
 h1, h2, h3, h4, h5, h6 {
   color: $base-font-color;
   font: normal 1.2em/1.2em $serif;

lms/static/sass/shared-v2/_base.scss

 // LMS base styles
 
+// removing the outline on any element that we make programmatically focusable
+[tabindex="-1"] {
+    outline: none;
+}
+
 .window-wrap {
     background-color: $lms-background-color;
 }