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"
openedx · Aug 19, 2022 · bc64c9e · bc64c9e
1 parent 64d532a
commit bc64c9e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -65,7 +65,9 @@ export default function PageContainer(props) {
             courseNumber={courseMetadata.number}
             courseTitle={courseMetadata.title}
           />
-          {children}
+          <main>
+            {children}
+          </main>
           <Footer />
         </>
       </CourseMetadataContext.Provider>