fix: accessibility issues on outline and unit pages (#1580)

This PR fixes the following accessibility issues:

1. Header used for screenreader only text
2. Element focus when expanding and dismissing welcome message
3. Bookmark button using wrong ARIA attributing while processing bookmark status

src/courseware/course/sequence/Unit/__snapshots__/index.test.jsx.snap

@@ -34,11 +34,11 @@ exports[`Unit component output snapshot: not bookmarked, do not show content 1`]
       unitTitle="unit-title"
     />
   </div>
-  <h2
+  <p
     className="sr-only"
   >
     Level 2 headings may be created by course providers in the future.
-  </h2>
+  </p>
   <BookmarkButton
     isBookmarked={false}
     isProcessing={false}

src/courseware/course/sequence/Unit/index.jsx

@@ -52,7 +52,7 @@ const Unit = ({
         <h3 className="h3">{unit.title}</h3>
         <UnitTitleSlot courseId={courseId} unitId={id} unitTitle={unit.title} />
       </div>
-      <h2 className="sr-only">{formatMessage(messages.headerPlaceholder)}</h2>
+      <p className="sr-only">{formatMessage(messages.headerPlaceholder)}</p>
       <BookmarkButton
         unitId={unit.id}
         isBookmarked={unit.bookmarked}

src/courseware/course/sequence/sequence-navigation/UnitButton.jsx

@@ -1,13 +1,13 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect, useSelector } from 'react-redux';
 import classNames from 'classnames';
-import { Button } from '@openedx/paragon';
+import { Button, Icon } from '@openedx/paragon';
+import { Bookmark } from '@openedx/paragon/icons';
 
 import UnitIcon from './UnitIcon';
 import CompleteIcon from './CompleteIcon';
-import BookmarkFilledIcon from '../../bookmark/BookmarkFilledIcon';
 
 const UnitButton = ({
   onClick,
@@ -46,7 +46,9 @@ const UnitButton = ({
       {showTitle && <span className="unit-title">{title}</span>}
       {showCompletion && complete ? <CompleteIcon size="sm" className="text-success ml-2" /> : null}
       {bookmarked ? (
-        <BookmarkFilledIcon
+        <Icon
+          data-testid="bookmark-icon"
+          src={Bookmark}
           className="text-primary small position-absolute"
           style={{ top: '-3px', right: '5px' }}
         />

src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx

@@ -63,17 +63,17 @@ describe('Unit Button', () => {
   });
 
   it('does not show bookmark', () => {
-    const { container } = render(<UnitButton {...mockData} />);
-    container.querySelectorAll('svg').forEach(icon => {
-      expect(icon).not.toHaveClass('fa-bookmark');
-    });
+    const { queryByTestId } = render(<UnitButton {...mockData} />);
+    expect(queryByTestId('bookmark-icon')).toBeNull();
   });
 
   it('shows bookmark', () => {
     const { container } = render(<UnitButton {...mockData} unitId={bookmarkedUnit.id} />, { wrapWithRouter: true });
     const buttonIcons = container.querySelectorAll('svg');
     expect(buttonIcons).toHaveLength(3);
-    expect(buttonIcons[2]).toHaveClass('fa-bookmark');
+
+    const bookmarkIcon = buttonIcons[2].closest('span');
+    expect(bookmarkIcon.getAttribute('data-testid')).toBe('bookmark-icon');
   });
 
   it('handles the click', () => {