KP-C

Kevin Powell - Community•2y ago•

7 replies

Rowe2ry

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

• Flex order https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items#the_order_property but then the HTML looks funny against the UI without the developer leaving the markup and inspecting the CSS

• Flex direction: Set the row of buttons as reversed and leave a code comment, this is the best so far but just wanted to check

What I was really hoping was that there was something like the stacking context css rule

isolation: isolate;

isolation: isolate;

I could add to the parent element to give its children a "scoped" tab index. But it would appear none such thing exists

MDN Web Docs

Ordering flex items - CSS: Cascading Style Sheets | MDN

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.