feat: improved accessibility of notification tray

src/courseware/course/Course.jsx

@@ -76,7 +76,7 @@ const Course = ({
   const SidebarProviderComponent = isNewDiscussionSidebarViewEnabled ? NewSidebarProvider : SidebarProvider;
 
   return (
-    <SidebarProviderComponent courseId={courseId} unitId={unitId}>
+    <SidebarProviderComponent courseId={courseId} unitId={unitId} sectionId={section ? section.id : null}>
       <Helmet>
         <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
       </Helmet>

src/courseware/course/Course.test.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Factory } from 'rosie';
 
 import { breakpoints } from '@openedx/paragon';
@@ -11,6 +9,7 @@ import * as celebrationUtils from './celebration/utils';
 import { handleNextSectionCelebration } from './celebration';
 import Course from './Course';
 import setupDiscussionSidebar from './test-utils';
+import messages from './messages';
 
 jest.mock('@edx/frontend-platform/analytics');
 jest.mock('@edx/frontend-lib-special-exams/dist/data/thunks.js', () => ({
@@ -194,7 +193,9 @@ describe('Course', () => {
   it('handles click to open/close notification tray', async () => {
     await setupDiscussionSidebar();
     waitFor(() => {
-      const notificationShowButton = screen.findByRole('button', { name: /Show notification tray/i });
+      const notificationShowButton = screen.findByRole('button', {
+        name: messages.openNotificationTrigger.defaultMessage,
+      });
       expect(screen.queryByRole('region', { name: /notification tray/i })).not.toBeInTheDocument();
       fireEvent.click(notificationShowButton);
       expect(screen.queryByRole('region', { name: /notification tray/i })).toBeInTheDocument();

src/courseware/course/JumpNavMenuItem.test.jsx

@@ -11,6 +11,7 @@ const mockData = {
   sectionId: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
   sequenceId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
 
+  currentSequence: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
   title: 'Demo Menu Item',
   courseId: 'course-v1:edX+DemoX+Demo_Course',
   currentUnit: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',

src/courseware/course/messages.ts

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   openNotificationTrigger: {
     id: 'notification.open.button',
-    defaultMessage: 'Show notification tray',
+    defaultMessage: 'Notifications tray',
     description: 'Button to open the notification tray and show notifications',
   },
   closeNotificationTrigger: {

src/courseware/course/sidebar/SidebarContextProvider.jsx

@@ -15,6 +15,7 @@ import { SIDEBARS } from './sidebars';
 const SidebarProvider = ({
   courseId,
   unitId,
+  sectionId,
   children,
 }) => {
   const { verifiedMode } = useModel('courseHomeMeta', courseId);
@@ -72,8 +73,9 @@ const SidebarProvider = ({
     shouldDisplayFullScreen,
     courseId,
     unitId,
+    sectionId,
   }), [courseId, currentSidebar, notificationStatus, onNotificationSeen, shouldDisplayFullScreen,
-    shouldDisplaySidebarOpen, toggleSidebar, unitId, upgradeNotificationCurrentState]);
+    shouldDisplaySidebarOpen, toggleSidebar, unitId, upgradeNotificationCurrentState, sectionId]);
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -85,6 +87,7 @@ const SidebarProvider = ({
 SidebarProvider.propTypes = {
   courseId: PropTypes.string.isRequired,
   unitId: PropTypes.string.isRequired,
+  sectionId: PropTypes.string.isRequired,
   children: PropTypes.node,
 };
 

src/courseware/course/sidebar/common/SidebarBase.jsx

@@ -3,8 +3,12 @@ import { Icon, IconButton } from '@openedx/paragon';
 import { ArrowBackIos, Close } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { useCallback, useContext } from 'react';
+import {
+  useCallback, useContext, useEffect, useRef,
+} from 'react';
+
 import { useEventListener } from '@src/generic/hooks';
+import { setSessionStorage, getSessionStorage } from '@src/data/sessionStorage';
 import messages from '../../messages';
 import SidebarContext from '../SidebarContext';
 
@@ -19,21 +23,127 @@ const SidebarBase = ({
 }) => {
   const intl = useIntl();
   const {
+    courseId,
     toggleSidebar,
     shouldDisplayFullScreen,
     currentSidebar,
   } = useContext(SidebarContext);
 
+  const closeBtnRef = useRef(null);
+  const responsiveCloseNotificationTrayRef = useRef(null);
+  const isOpenNotificationTray = getSessionStorage(`notificationTrayStatus.${courseId}`) === 'open';
+  const isFocusedNotificationTray = getSessionStorage(`notificationTrayFocus.${courseId}`) === 'true';
+
+  useEffect(() => {
+    if (isOpenNotificationTray && isFocusedNotificationTray && closeBtnRef.current) {
+      closeBtnRef.current.focus();
+    }
+
+    if (shouldDisplayFullScreen) {
+      responsiveCloseNotificationTrayRef.current?.focus();
+    }
+  });
+
   const receiveMessage = useCallback(({ data }) => {
     const { type } = data;
     if (type === 'learning.events.sidebar.close') {
       toggleSidebar(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sidebarId, toggleSidebar]);
+  }, [toggleSidebar]);
 
   useEventListener('message', receiveMessage);
 
+  const focusSidebarTriggerBtn = () => {
+    const performFocus = () => {
+      const sidebarTriggerBtn = document.querySelector('.sidebar-trigger-btn');
+      if (sidebarTriggerBtn) {
+        sidebarTriggerBtn.focus();
+      }
+    };
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(performFocus);
+    });
+  };
+
+  const handleCloseNotificationTray = () => {
+    toggleSidebar(null);
+    setSessionStorage(`notificationTrayFocus.${courseId}`, 'true');
+    setSessionStorage(`notificationTrayStatus.${courseId}`, 'closed');
+    focusSidebarTriggerBtn();
+  };
+
+  const handleKeyDown = useCallback((event) => {
+    const { key, shiftKey, target } = event;
+
+    if (key !== 'Tab' || target !== closeBtnRef.current) {
+      return;
+    }
+
+    // Shift + Tab
+    if (shiftKey) {
+      event.preventDefault();
+      focusSidebarTriggerBtn();
+      return;
+    }
+
+    // Tab
+    const courseOutlineTrigger = document.querySelector('#courseOutlineTrigger');
+    if (courseOutlineTrigger) {
+      event.preventDefault();
+      courseOutlineTrigger.focus();
+      return;
+    }
+
+    const leftArrow = document.querySelector('.previous-button');
+    if (leftArrow && !leftArrow.disabled) {
+      event.preventDefault();
+      leftArrow.focus();
+      return;
+    }
+
+    const rightArrow = document.querySelector('.next-button');
+    if (rightArrow && !rightArrow.disabled) {
+      event.preventDefault();
+      rightArrow.focus();
+    }
+  }, [focusSidebarTriggerBtn, closeBtnRef]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  const handleKeyDownNotificationTray = (event) => {
+    const { key, shiftKey } = event;
+    const currentElement = event.target === responsiveCloseNotificationTrayRef.current;
+    const sidebarTriggerBtn = document.querySelector('.call-to-action-btn');
+
+    switch (key) {
+      case 'Enter':
+        if (currentElement) {
+          handleCloseNotificationTray();
+        }
+        break;
+
+      case 'Tab':
+        if (!shiftKey && sidebarTriggerBtn) {
+          event.preventDefault();
+          sidebarTriggerBtn.focus();
+        } else if (shiftKey) {
+          event.preventDefault();
+          responsiveCloseNotificationTrayRef.current?.focus();
+        }
+        break;
+
+      default:
+        break;
+    }
+  };
+
   return (
     <section
       className={classNames('ml-0 border border-light-400 rounded-sm h-auto align-top zindex-0', {
@@ -49,9 +159,10 @@ const SidebarBase = ({
       {shouldDisplayFullScreen ? (
         <div
           className="pt-2 pb-2.5 border-bottom border-light-400 d-flex align-items-center ml-2"
-          onClick={() => toggleSidebar(null)}
-          onKeyDown={() => toggleSidebar(null)}
+          onClick={handleCloseNotificationTray}
+          onKeyDown={handleKeyDownNotificationTray}
           role="button"
+          ref={responsiveCloseNotificationTrayRef}
           tabIndex="0"
         >
           <Icon src={ArrowBackIos} />
@@ -63,16 +174,20 @@ const SidebarBase = ({
       {showTitleBar && (
         <>
           <div className="d-flex align-items-center mb-2">
-            <strong className="p-2.5 d-inline-block course-sidebar-title">{title}</strong>
+            {/* TODO: view this title in UI and decide */}
+            {/* <strong className="p-2.5 d-inline-block course-sidebar-title">{title}</strong> */}
+            <h2 className="p-2.5 d-inline-block m-0 text-gray-700 h4">{title}</h2>
             {shouldDisplayFullScreen
               ? null
               : (
                 <div className="d-inline-flex mr-2 ml-auto">
                   <IconButton
+                    className="sidebar-close-btn"
                     src={Close}
                     size="sm"
+                    ref={closeBtnRef}
                     iconAs={Icon}
-                    onClick={() => toggleSidebar(null)}
+                    onClick={handleCloseNotificationTray}
                     variant="primary"
                     alt={intl.formatMessage(messages.closeNotificationTrigger)}
                   />

src/courseware/course/sidebar/common/TriggerBase.jsx

@@ -1,27 +1,37 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { forwardRef } from 'react';
 
-const SidebarTriggerBase = ({
+const SidebarTriggerBase = forwardRef(({
   onClick,
+  onKeyDown,
   ariaLabel,
   children,
-}) => (
+  isOpenNotificationStatusBar,
+  sectionId,
+}, ref) => (
   <button
-    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn"
+    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn sidebar-trigger-btn"
     type="button"
     onClick={onClick}
+    onKeyDown={onKeyDown}
     aria-label={ariaLabel}
+    aria-expanded={isOpenNotificationStatusBar}
+    aria-controls={sectionId}
+    ref={ref}
   >
     <div className="icon-container d-flex position-relative align-items-center">
       {children}
     </div>
   </button>
-);
+));
 
 SidebarTriggerBase.propTypes = {
   onClick: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
   ariaLabel: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,
+  isOpenNotificationStatusBar: PropTypes.bool.isRequired,
+  sectionId: PropTypes.string.isRequired,
 };
 
 export default SidebarTriggerBase;

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx

@@ -32,6 +32,7 @@ const CourseOutlineTrigger = ({ isMobileView }) => {
     >
       <IconButton
         alt={intl.formatMessage(messages.toggleCourseOutlineTrigger)}
+        id="courseOutlineTrigger"
         className="outline-sidebar-toggle-btn flex-shrink-0 text-dark bg-light-200 rounded-0"
         iconAs={MenuOpenIcon}
         onClick={handleToggleCollapse}

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx

@@ -19,6 +19,7 @@ const NotificationTray = () => {
     shouldDisplayFullScreen,
     upgradeNotificationCurrentState,
     setUpgradeNotificationCurrentState,
+    currentSidebar,
   } = useContext(SidebarContext);
   const course = useModel('coursewareMeta', courseId);
 
@@ -80,6 +81,7 @@ const NotificationTray = () => {
             courseId={courseId}
             notificationCurrentState={upgradeNotificationCurrentState}
             setNotificationCurrentState={setUpgradeNotificationCurrentState}
+            currentSidebar={currentSidebar}
           />
         ) : (
           <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.test.jsx

@@ -4,8 +4,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
 
 import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
 import { Factory } from 'rosie';
+import messages from '../../../messages';
 import {
   fireEvent, initializeMockApp, render, screen, waitFor,
 } from '../../../../../setupTest';
@@ -66,7 +66,9 @@ describe('NotificationTray', () => {
     );
     expect(screen.getByText('Notifications'))
       .toBeInTheDocument();
-    const notificationCloseIconButton = screen.getByRole('button', { name: /Close notification tray/i });
+    const notificationCloseIconButton = screen.getByRole('button', {
+      name: messages.closeNotificationTrigger.defaultMessage,
+    });
     expect(notificationCloseIconButton)
       .toBeInTheDocument();
     expect(notificationCloseIconButton)