🟡 As a visitor, I can recognize where I am in relation to the whole page

18F / guides

18F’s guides equip 18F teams, our partners, other practitioners, lawmakers, and the public with tools and practices to improve public services. They affirm experiences, build confidence, and empower exceptional digital experiences.

https://guides.18f.gov

Other

31 stars 13 forks source link

🟡 As a visitor, I can recognize where I am in relation to the whole page #282

Closed jstrothman closed 2 months ago

jstrothman commented 3 years ago

Background The USDS Discovery Sprint Guide, which also uses the Federalist template with sidenav, highlights the active sidenav section as you scroll. This would help our readers, particularly on our very long pages. Should we do something a bit more visible than the default darker gray/bold treatment for the active link? Screen Shot 2021-01-04 at 4 44 27 PM

Acceptance criteria

[ ] As you scroll the Research > Plan or Do page (examples of long pages), the side navigation highlights as you scroll
[ ] On small screens, the new highlighting functionality may still work, but does not impact the links present at page top

Tasks

[ ] Design treatment
[ ] Implement

Definition of done

[ ] One of the POs has approved the change

juliaklindpaintner commented 6 months ago

If this enhancement is done, it should be implemented across all guides.

bpdesigns commented 2 months ago

@cantsin how large of a task is this? Low priority but if low effort then perhaps we pick it up

cantsin commented 2 months ago

Ooh if we do this, https://guides.18f.gov/engineering/tools/project-setup/ might be a good test page. it looks like USWDS uses javascript to add usa-current class attributes to the sidenav. That code might be here: https://github.com/uswds/uswds/blob/develop/packages/usa-in-page-navigation/src/index.js -- assuming that our guides are up to date wrt USWDS versions (and we seem to be on 3.8.0 compared to the latest version 3.8.1) I think this could be potentially a minor lift. But. I'm not sure why this isn't enabled by default.

Maybe we can have an engineer pair with a designer on this one?

bpdesigns commented 2 months ago

That would be great to have a pairing ticket :) - moving this to candidate for prioritization

bpdesigns commented 2 months ago

If we discover a bug - consider an upstream bug fix :)

a-chappelear commented 2 months ago

I would stick with the bold active link style used in the example/screenshot above. I'm hesitant to suggest a new link style not already in the design system, in response to the issue's comment "Should we do something a bit more visible than the default darker gray/bold treatment for the active link" @caleywoods @bpdesigns (thoughts?)

bpdesigns commented 2 months ago

I agree unless there is a reason existing styles won't work

caleywoods commented 2 months ago

@a-chappelear @bpdesigns @cantsin

James, the USWDS GitHub link you listed is for the in-page navigation component which differs from the sidenav component. I dug into the USDS site and they have a setCurrentLink within app.js. It seems reasonable that we could duplicate this code in our own JavaScript and get it to work with some tweaking.

https://sprint.usds.gov/assets/js/app.js - The odd bit here is I don't see this in their codebase (the file or the code) after spending a few minutes looking.

Edit: Here's the code in app.js I was looking for, different repo: https://github.com/usds/discovery-sprint-guide/blob/main/assets/js/app.js#L10

caleywoods commented 2 months ago

If we discover a bug - consider an upstream bug fix :)

No upstream bugfix here, the out of the box navigation highlight code works for the in page navigation component but the navigation component being used for the guides site (and most 11ty sites based on the original template used) is the side navigation component which doesn't support the highlighting out of the box.