add screen reader message for annotated document submission type

flag=none
closes EVAL-1576

Test Plan:
- Have course with a student enrolled
- create an assignment with 'annotated document' as a submission type
- when viewing the assignment as a student with screen reader on, a
message should be heard though the screenreader above the submission
type tabs that reads:"The student annotation tab includes the document
for the assignment. Tabs with additional submission types may also be
available."
- If the screen reader is not turned on then the message should not be
heard

Change-Id: I282ff8432b710e0443886c60a84a455d7094f7dc
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/262607
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Aaron Shafovaloff <ashafovaloff@instructure.com>
QA-Review: Kai Bjorkman <kbjorkman@instructure.com>
Product-Review: Syed Hussain <shussain@instructure.com>

app/views/assignments/_submit_assignment.html.erb

@@ -40,6 +40,9 @@
   })
 %>
 <div style="display: none;" id="submit_assignment" data-context_code="<%= @assignment.context_code %>" data-asset_string="<%= @assignment.asset_string %>">
+  <% if @assignment.submission_types && @assignment.annotated_document? %>
+      <div id="annotated-screenreader-alert"></div>
+  <% end %>
   <div class="content" id="submit_assignment_tabs">
     <ul>
       <% if @assignment.submission_types && @assignment.submission_types.match(/online_upload/) %>

ui/features/submit_assignment/jquery/index.js

@@ -27,11 +27,7 @@ import RCEKeyboardShortcuts from '@canvas/tinymce-keyboard-shortcuts' /* TinyMCE
 import iframeAllowances from '@canvas/external-apps/iframeAllowances'
 import RichContentEditor from '@canvas/rce/RichContentEditor'
 import {uploadFile} from '@canvas/upload-file'
-import {
-  submitContentItem,
-  recordEulaAgreement,
-  verifyPledgeIsChecked
-} from './helper'
+import {submitContentItem, recordEulaAgreement, verifyPledgeIsChecked} from './helper'
 import '@canvas/rails-flash-notifications'
 import '@canvas/jquery/jquery.ajaxJSON'
 import 'jquery-tree'
@@ -46,6 +42,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import FileBrowser from '@canvas/rce/FileBrowser'
 import {ProgressCircle} from '@instructure/ui-progress'
+import {Alert} from '@instructure/ui-alerts'
 import Attachment from '../react/Attachment'
 
 const SubmitAssignment = {
@@ -145,6 +142,21 @@ $(document).ready(function () {
     keyboardShortcutsView.render().$el.insertBefore($('.switch_text_entry_submission_views:first'))
   }
 
+  // Add screen reader message for student annotation assignments
+  const accessibilityAlert = I18n.t(
+    'The student annotation tab includes the document for the assignment. Tabs with additional submission types may also be available.'
+  )
+  const alertMount = () => document.getElementById('annotated-screenreader-alert')
+
+  if (alertMount()) {
+    ReactDOM.render(
+      <Alert screenReaderOnly liveRegion={alertMount} liveRegionPoliteness="assertive">
+        {accessibilityAlert}
+      </Alert>,
+      alertMount()
+    )
+  }
+
   // grow and shrink the comments box on focus/blur if the user
   // hasn't entered any content.
   submissionForm