fix: [AA-1044] add missing h2 for screenreaders (#720)

* fix: [AA-1044] add missing h2 for screenreaders

- Add placeholder h2 tag with message indicating reserve for future use
- internationalize placeholder text

src/courseware/course/sequence/Unit.jsx

@@ -17,7 +17,7 @@ import BookmarkButton from '../bookmark/BookmarkButton';
 import { useModel } from '../../../generic/model-store';
 import PageLoading from '../../../generic/PageLoading';
 import { processEvent } from '../../../course-home/data/thunks';
-import { fetchCourse } from '../../data/thunks';
+import { fetchCourse } from '../../data';
 /** [MM-P2P] Experiment */
 import { MMP2PLockPaywall } from '../../../experiments/mm-p2p';
 
@@ -159,6 +159,7 @@ function Unit({
   return (
     <div className="unit">
       <h1 className="mb-0 h3">{unit.title}</h1>
+      <h2 className="sr-only">{intl.formatMessage(messages['learn.header.h2.placeholder'])}</h2>
       <BookmarkButton
         unitId={unit.id}
         isBookmarked={unit.bookmarked}

src/courseware/course/sequence/messages.js

@@ -26,6 +26,12 @@ const messages = defineMessages({
     defaultMessage: 'There is no content here.',
     description: 'Message shown when there is no content to show a user inside a learning sequence.',
   },
+  'learn.header.h2.placeholder': {
+    id: 'learn.header.h2.placeholder',
+    defaultMessage: 'Level 2 headings may be created by course providers in the future.',
+    description: 'Message spoken by a screenreader indicating that the h2 tag is a placeholder.',
+
+  },
 });
 
 export default messages;