Call log modal focus order differs from visual order

[henrycatalinismith]

Steps to reproduce

1. Open an assignment.
2. Click the log button.
3. Press ⌘ + F5 to start VoiceOver.
4. Focus the close button.

Expected outcome

The close button is visually first so it should be first in the focus order. See C27: Making the DOM order match the visual order for details of the success criteria this addresses and the assistive technology use cases it supports.

Actual outcome

The close button is at the end of the focus order despite being at the top left of the screen.

Severity

The success criterion covering this issue is WCAG level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. In this particular case this issue seems unlikely to seriously hamper anybody's work but as it's level A it's still moderately severe.

Recommendation

Rearrange the DOM order so that .OverlayStack-closeButton is before .OverlayStack-overlay. In React terms: just render the close button first.