Issue Summary

On "Source" page, the "Repositories labeled rare" and "Repositories labeled abc" modals are not accessible for keyboard and screen reader users. 

Steps to Reproduce

1. Activate project in header.
2. Activate "Repository" option. 
3. Activate "Source" link. 
4. Navigate through page using keyboard and screen reader. 
5. Observe that the "Label" combobox appears and add labels in that.
6. Activate "rare" and "abc" labels. 
7. Observe that the modals appear. 
8. Observe that these modals are not accessible using screen reader and keyboard and screen reader.

Screen Recording

Screen Recording 2024-02-21 at 1.59.47 PM.mov

Actual Results

On the "Source" page, the "Repositories labeled rare" and "Repositories labeled abc" modals appear on activating "rare" and "abc" labels respectively. These modals have following issues. 

1. Background content receives keyboard and screen reader focus.
2. Focus is not set on modals. 
3. Modals do not have accessible names.

As a result, keyboard and screen reader users might feel disoriented. 

Expected Results

Make sure that the modals dialogs are accessible for keyboard and screen reader users. 

Apply following changes. 

1. Provide aria-hidden="true" and tabindex="-1" for background content to make sure that they do not receive screen reader and keyboard focus. Make sure that these attributes are removed from background content when modal dialogs are dismissed. 
2. Provide tabindex="-1" for headings on modal and use focus() method to set the focus on first element on modal. 
3. Provide aria-modal="true" on <div role="dialog" .....> element.
4. Specify 'id' attribute with unique value to the <div> tag containing the "Repositories labeled rare" and "Repositories labeled abc" headings and reference it via 'aria-labelledby' attribute (on <div role="dialog" ...> element).

<div role="dialog" aria-modal="true" aria-labelledby="a1" ...>
<h2 id="a1" tabindex="-1">Repositories labeled rare</h2>
....
</div>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOS Sonoma Version 14.1
Chrome - Version 119.0.6045.159 (Official Build) (arm64)
Firefox- Version 93.0 (32-bit)
Safari- Version 17.1 (19616.2.9.11.7)
JAWS- Version 2023
NVDA- Version 2020.3
Voiceover - Version Latest