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.
Steps to reproduce
⌘ + F5to start VoiceOver.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-closeButtonis before.OverlayStack-overlay. In React terms: just render the close button first.