VoiceOver focus order for external tool in assignment

fixes PLAT-4490

Test Plan:
- Setup an Deep Linking LTI tool for submission on an assignment
- Move VO focus to the "partner provided" notice
- ctrl-option-right arrow should now go down to the
  iframe instead of the h1

Change-Id: I1254f9bbf1ea6354901412c21f1b08522fcad638
Reviewed-on: https://gerrit.instructure.com/198092
Reviewed-by: Marc Phillips <mphillips@instructure.com>
Tested-by: Jenkins
QA-Review: Tucker Mcknight <tmcknight@instructure.com>
Product-Review: Tucker Mcknight <tmcknight@instructure.com>

app/stylesheets/components/_show_hide_opacity.scss

@@ -67,3 +67,11 @@ $dimmedOpacity: 0.6;
   width: 1px;
   transform: translatez(0);
 }
+
+// Completely hide, but make available to screenreader so it can read it.  Used for external tools
+.screenreader-only-tool {
+  @extend .screenreader-only;
+  position: relative;
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+}

app/views/lti/_lti_message.html.erb

@@ -62,7 +62,7 @@
     </div>
   </form>
 
-  <div class="before_external_content_info_alert screenreader-only" tabindex="0">
+  <div class="before_external_content_info_alert screenreader-only-tool" tabindex="0">
     <div class="ic-flash-info">
       <div class="ic-flash__icon" aria-hidden="true">
         <i class="icon-info"></i>
@@ -85,7 +85,7 @@
     allow: Lti::Launch.iframe_allowances(request.user_agent).join('; ')
   ) %>
 
-  <div class="after_external_content_info_alert screenreader-only" tabindex="0">
+  <div class="after_external_content_info_alert screenreader-only-tool" tabindex="0">
     <div class="ic-flash-info">
       <div class="ic-flash__icon" aria-hidden="true">
         <i class="icon-info"></i>

public/javascripts/tool_inline.js

@@ -103,12 +103,12 @@ $(function() {
 
   $external_content_info_alerts.on('focus', function(e) {
     $tool_content_wrapper.find('iframe').css('border', '2px solid #008EE2');
-    $(this).removeClass('screenreader-only');
+    $(this).removeClass('screenreader-only-tool');
   })
 
   $external_content_info_alerts.on('blur', function(e) {
     $tool_content_wrapper.find('iframe').css('border', 'none');
-    $(this).addClass('screenreader-only');
+    $(this).addClass('screenreader-only-tool');
   })
 
   if ( !$('body').hasClass('ic-full-screen-lti-tool') ) {