From bc64c9e2788e04e63dc631971ee207afd2a4d6d7 Mon Sep 17 00:00:00 2001
From: Thomas Tracy <contact@tjtracy.com>
Date: Fri, 19 Aug 2022 10:31:30 -0400
Subject: [PATCH] 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            | 6 +++---
 .../bulk-email-task-manager/BulkEmailContentHistory.jsx     | 1 +
 .../bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx  | 1 +
 .../test/BulkEmailContentHistory.test.jsx                   | 2 ++
 src/components/page-container/PageContainer.jsx             | 4 +++-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx
index e4962b7..76d573f 100644
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/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 />
       ))}
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
index 75a0dab..90e1649 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
+++ b/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>
         ),
       },
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
index e75d8d7..3ceec47 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx
+++ b/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
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
index b01992a..09f27da 100644
--- a/src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailContentHistory.test.jsx
+++ b/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();
     });
   });
diff --git a/src/components/page-container/PageContainer.jsx b/src/components/page-container/PageContainer.jsx
index bb44656..21ed528 100644
--- a/src/components/page-container/PageContainer.jsx
+++ b/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>