fix: accessibility issues on outline and unit pages

[KristinAoki]

Description

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

Supporting Information

JIRA Tickets: AU-2368 🔒, AU-2369 🔒, and AU-2370 🔒

AU-2368

The visually hidden heading "Level 2 headings may be created by course providers in the future." acts as a
hint and does not qualify as a heading.

Text that does not have the purpose of a heading either visually or structurally must not use heading markup, otherwise this will create a confusing heading structure for screen reader users. This is a failure of WCAG 1.3.1 Info and Relationships.

AU-2369

In course updates, the “Show More” and “Dismiss” buttons dynamically add or remove content from the course home. Dynamically-added content needs to be added to the focus order directly after the element that exposed the content, or keyboard focus needs to be moved to the new content.

When keyboard users select the “Show More” button, the keyboard focus moves to the "Show Less" control instead of moving to the newly added content. Please move the keyboard focus to the newly added content on activating "Show More" control.

When the “Dismiss” button is pressed, the keyboard focus returns to the body/top of the page, which is not a logical order. This can make the user interface difficult to navigate and understand. Ensure that the order in which elements receive keyboard focus follows a meaningful and logical sequence. For example, if the “Dismiss” button removes content, the keyboard focus could move to the previous interactive element.

AU-2370

The “Bookmark this page” button toggles the aria-disabled attribute very quickly, which can be confusing to screen reader users if they are given delayed information about the button’s availability. Please remove the aria-disabled attribute and use an aria-busy attribute when the button is updating to avoid confusion for the screen reader users.

Testing

AU-2369

1. Navigate to a course outline that has a welcome message
2. Using a keyboard, click on the "Show more" button
3. Press the tab button on the keyboard, confirm that the focus is not on the "Show less" button
4. Confirm that if there is a interactive element in the welcome message, it received the focus
5. Click the "Show less" button
6. Confirm that the focus remains on the button
7. Click on the "Dismiss" button and confirm that the focus moved to the "Expand all" button

AU-2370

1. Open the first unit in course
2. Confirm that the bookmark is outlined
3. Open browser dev tools
4. Confirm that aria-busy=false for the bookmark button
5. Click on the bookmark
6. Confirm that aria-busy was updated quickly
7. Confirm that the bookmark is filled

[codecov]

Codecov Report

Attention: Patch coverage is 70.58824% with 5 lines in your changes missing coverage. Please review.

Project coverage is 84.60%. Comparing base (8823cfa) to head (b134f5c).
Report is 3 commits behind head on master.

Files with missing lines	Patch %	Lines
...course-home/outline-tab/widgets/WelcomeMessage.jsx	63.63%	4 Missing ⚠️
src/course-home/outline-tab/OutlineTab.jsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1580      +/-   ##
==========================================
- Coverage   89.93%   84.60%   -5.34%     
==========================================
  Files         333      331       -2     
  Lines        5654     5656       +2     
  Branches     1399     1357      -42     
==========================================
- Hits         5085     4785     -300     
- Misses        554      854     +300     
- Partials       15       17       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BrandonHBodine]

lgtm!