ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Clint Furse 2019-06-18 11:31:01 -06:00 committed by Tucker Mcknight
parent 9cb9518183
commit f950ccd921
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/stylesheets/components/_show_hide_opacity.scss
View File

@ -67,3 +67,11 @@ $dimmedOpacity: 0.6;
width: 1px; width: 1px;
transform: translatez(0); 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%);
}

4
app/views/lti/_lti_message.html.erb
View File

@ -62,7 +62,7 @@
</div> </div>
</form> </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-info">
<div class="ic-flash__icon" aria-hidden="true"> <div class="ic-flash__icon" aria-hidden="true">
<i class="icon-info"></i> <i class="icon-info"></i>
@ -85,7 +85,7 @@
allow: Lti::Launch.iframe_allowances(request.user_agent).join('; ') 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-info">
<div class="ic-flash__icon" aria-hidden="true"> <div class="ic-flash__icon" aria-hidden="true">
<i class="icon-info"></i> <i class="icon-info"></i>

4
public/javascripts/tool_inline.js
View File

@ -103,12 +103,12 @@ $(function() {
$external_content_info_alerts.on('focus', function(e) { $external_content_info_alerts.on('focus', function(e) {
$tool_content_wrapper.find('iframe').css('border', '2px solid #008EE2'); $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) { $external_content_info_alerts.on('blur', function(e) {
$tool_content_wrapper.find('iframe').css('border', 'none'); $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') ) { if ( !$('body').hasClass('ic-full-screen-lti-tool') ) {