From f950ccd921e7d092e25f90bbe0375373d8fceee5 Mon Sep 17 00:00:00 2001
From: Clint Furse <cfurse@instructure.com>
Date: Tue, 18 Jun 2019 11:31:01 -0600
Subject: [PATCH] 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 | 8 ++++++++
 app/views/lti/_lti_message.html.erb                | 4 ++--
 public/javascripts/tool_inline.js                  | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/stylesheets/components/_show_hide_opacity.scss b/app/stylesheets/components/_show_hide_opacity.scss
index d1458c7b4d6..e7a7be45c56 100644
--- a/app/stylesheets/components/_show_hide_opacity.scss
+++ b/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%);
+}
diff --git a/app/views/lti/_lti_message.html.erb b/app/views/lti/_lti_message.html.erb
index f45a9070903..b473f74c19a 100644
--- a/app/views/lti/_lti_message.html.erb
+++ b/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>
diff --git a/public/javascripts/tool_inline.js b/public/javascripts/tool_inline.js
index 02e290032cb..e1f23025b44 100644
--- a/public/javascripts/tool_inline.js
+++ b/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') ) {