Does Jeet's responsive order mixin maintain correct keyboard focus order when columns reorder?

Jeet's order mixin does not maintain correct keyboard focus order when columns reorder

Likely explanation

The mixin only applies CSS `order` to change visual placement; it leaves the DOM unchanged. Keyboard navigation follows DOM order, so the visual reorder can decouple the logical tab order, especially across breakpoints.

Confirmed facts from the research

• Jeet’s `order` mixin sets the CSS `order` property and does not alter DOM structure or add `tabindex` attributes.
• Because focus order follows DOM order, visual reordering with the mixin can break the expected tab sequence.
• Jeet provides no built‑in mixin or utility that automatically synchronizes focus order with visual order.
• To keep tab order consistent, developers must either reorder the markup to match the desired visual sequence at each breakpoint or manually assign `tabindex` values that reflect the visual layout.

Steps to verify and fix

1. Inspect the rendered HTML: confirm that grid items remain in their original DOM order while the `order` property changes their visual placement.
2. Navigate with the Tab key (or use a screen‑reader) and record the focus sequence; compare it to the visual left‑to‑right, top‑to‑bottom order at each breakpoint.
3. If the sequences differ, adjust the HTML source order to match the visual layout for that breakpoint, or add appropriate `tabindex` values that follow the visual order.
4. Retest the tab navigation until the focus order matches the visual order across all breakpoints.