Skip to content

Documentation template tab order should match visual order #4594

@aduth

Description

@aduth

Is your feature request related to a problem? Please describe.

As a developer

Who uses USWDS in my project, I expect that my generated stylesheets only includes styles relevant for my site, so that I'm not shipping unnecessary code to my users, prolonging their load times.

As a user

As a user who navigates a site using USWDS, I expect that load times are reasonable, so that I can access the content I need in a timely manner.

As a user, I expect that I can tab through content in a logical order, so that there is not a disconnect between the visual and mechanical presentation of the content.

Describe the solution you'd like

Remove the file src/stylesheets/components/_layout.scss, or more specifically the .usa-layout-docs__sidenav and .usa-layout-docs__main style selectors.

Adjust components/layouts/docs-inner.njk such that either (a) the placement of the side navigation is consistently before or after the main content, regardless of device size, or (b) the markup is duplicated and shown/hidden at the appropriate viewport size, but in such a way that ensures the DOM order is always consistent with the visual order.

Describe alternatives you've considered

If USWDS needs styling for its own documentation, this should be compiled separate from what's included in USWDS.

Additional context

Related issue on order concerns: #4424

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions