fix: [APER-1936] Changes for a11y review (#71)

* fix: [APER-1936] Changes for a11y review

- Fixes skip nav link to work properly
- inline styles pending tasks link
- adds <main>
- adds sr-only span to "view message" links in task history table
- header/footer updated in seperate PR

* chore: add sr-only span to unit test

* fix: fix space before sr-only span"

src/components/bulk-email-tool/BulkEmailTool.jsx

@@ -18,13 +18,13 @@ export default function BulkEmailTool() {
   return (
     <CourseMetadataContext.Consumer>
       {(courseMetadata) => (courseMetadata.originalUserIsStaff ? (
-        <div>
+        <>
           <NavigationTabs courseId={courseId} tabData={courseMetadata.tabs} />
           <BulkEmailProvider>
             <Container size="md">
               <BackToInstructor />
               <div className="row pb-4.5">
-                <h1 className="text-primary-500">
+                <h1 className="text-primary-500" id="main-content">
                   <FormattedMessage
                     id="bulk.email.send.email.header"
                     defaultMessage="Send an email"
@@ -40,7 +40,7 @@ export default function BulkEmailTool() {
               </div>
             </Container>
           </BulkEmailProvider>
-        </div>
+        </>
       ) : (
         <ErrorPage />
       ))}

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx

@@ -109,6 +109,7 @@ function BulkEmailContentHistory({ intl }) {
         Cell: ({ row }) => (
           <Button variant="link" className="px-1" onClick={() => onViewMessageClick(tableData[row.index])}>
             {intl.formatMessage(messages.buttonViewMessage)}
+            <span className="sr-only">&nbsp;{row.index}</span>
           </Button>
         ),
       },

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx

@@ -16,6 +16,7 @@ export default function BulkEmailPendingTasksAlert() {
         <Hyperlink
           destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
           target="_blank"
+          isInline
           showLaunchIcon={false}
         >
           <FormattedMessage

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx

@@ -71,6 +71,8 @@ describe('BulkEmailContentHistory component', () => {
       expect(await screen.findByText(email.requester)).toBeTruthy();
       expect(await screen.findByText(email.sent_to.join(', '))).toBeTruthy();
       expect(await screen.findByText(email.email.subject)).toBeTruthy();
+      // verify screen reader only <span />
+      expect(await screen.findByText('0')).toHaveClass('sr-only');
       expect(await screen.findAllByText('View Message')).toBeTruthy();
     });
   });

src/components/page-container/PageContainer.jsx

@@ -65,7 +65,9 @@ export default function PageContainer(props) {
             courseNumber={courseMetadata.number}
             courseTitle={courseMetadata.title}
           />
-          {children}
+          <main>
+            {children}
+          </main>
           <Footer />
         </>
       </CourseMetadataContext.Provider>