Best way to control keyboard navigability within an element (scope to parent)
I'm trying to find the best way to guide users through some of these modals we have in the UI (example pictured)
I've tried several things.
• Tabindex was my first thought but its a nightmare. All default elements throughout the entire application are tabindex 0 or -1 if we don't want them to be focusable, but Giving this CTA button atab index of 1 and the cancel button a tab index of 2 is no good. The tabindex 0s in the page BEHIND the modal take precedence over anything with a positive integer attribute value so I would have to explicitly give EVERYTHING in the modal form a tab index of 1
Layout methods such as flexbox and grid enable controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using flexbox. We will also consider how reordering items impacts accessibility.