Accessibility issue: backwards tabbing required to access language settings

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

settings menu inside image viewer

Issue description

When opening the settings menu, the first item accessed in the box is "reduce motion". This is not the first item in the box though, it is preceded by the language settings. These should be accessed first.

Note that this is much exacerbated by the fact that in some screen resolutions, the options window is too small to show all options at the same time so when the user opens the menu, the language option is pushed off-screen and only moves into view when focused on. Those users will never even know these options exist. Same for screenreader users who do not have the benefit of seeing the other options above.

Steps to reproduce

1. open this manifest
2. Use keyboard navigation to open the settings modal
3. Continue tabbing and observe that the language dropdown is never accessed

Expected behaviour

Tabbing order matches what is on the screen and no items are skipped.

This would be mitigated somewhat if focus was trapped inside the modal (issue raised separately). However, proper and logical tabbing order still requires the item on top to be accessed first.

WCAG criterion

2.4.3 Focus Order (Level A)

Related code

<select id="locale"><option value="en-GB">English (GB)</option><option value="cy-GB">Cymraeg</option><option value="fr-FR">Français (FR)</option><option value="pl-PL">Polski</option><option value="sv-SE">Svenska</option></select>