Consider matching DOM order for Sky Nav elements when JS is disabled for better accessibility

[gerardo-rodriguez]

When JS is disabled:

• the "Menu" button is hidden
• the Sky Nav is open

Current implementation

The DOM order of the nav does not match the visual order in the current solution:

Current tab order count	Current tab order in action

Proposed solution

We should consider allowing the visual order to match the DOM order when JS is disabled. We might even consider centering the Cloud Four logo since the button is not shown:

Proposes tab order count	Proposed tab order in action

Other considerations

• The gradient no longer matches the original design in the proposed solution

Related

• https://web.dev/visual-order-follows-dom/

[gerardo-rodriguez]

@tylersticka I'm going to proceed with the following when JS is disabled:

• Change flex-direction: column-reverse to flex-direction: column
• Center the the Cloud Four logo (since the menu toggle button is not available)

Would you like me to explore shifting the CSS gradient around as well so that it transitions smoothly from the top (cloud four logo) to the bottom of the nav link list?

Thank you!

[tylersticka]

@gerardo-rodriguez Can you hold on this one for now until we have a mockup?