Not enough space between the links in the "on this page" navigation

[gabalafou]

No description provided.

[gabalafou]

I don't need a Figma to implement this, but I think it would be great if somebody in design could tell me by exactly how much I should increase the space between the links, and then I'll implement it.

[isabela-pf]

Too long; didn't read: I would recommend we implement an additional 15 CSS pixels between the “On this page” navigation links. My rationale is in the paragraphs below the divider.

---

For context, my rationale overlaps with what I’ve already explained in #81. To summarize

• I'm not aware of any WCAG 2.2 standards about spacing between buttons or another recommendation for spacing.
• I am referencing is WCAG 2.5.8 Target Size as the nearest tested and trustworthy information.
• I am extending WCAG 2.5.8 Target Size’s specifics to create criteria deciding what “enough space” between buttons will mean to us: when rounding the target size from corner to corner, this ellipse cannot overlap with the ellipse of any surrounding target size ellipse.

The main concern I have with the “On this page” navigation links is actually that I can’t find any space between clickable targets between the navigation list items (unlike the navbar buttons in #81 where there was still some non-clickable space between to start). When I move my cursor vertically, I cannot rest it anywhere between the list items and not have something hovered.

Target sizes this tightly packed require a lot of motor skill precision to work as expected and make it very easy to misclick.

When testing the overlap, I see about an equal number of pixels to the height of the target size overlapping, or about 27 CSS px. This makes sense to me considering the list items are almost back to back without spacing.

Because I’m already extending a guideline beyond its original scope, the length of the buttons with the short height require tall ellipses, and I am aware of many buttons with less than their own height between them that are considered to have good spacing, I am fine adding a fraction of this overlap. I think adding ~15 CSS px spacing between “On this page” list items adds spacing and leaves about a default cursor height’s space to rest.

[gabalafou]

Thanks @isabela-pf, I'm going to take over from here and move this from design to dev

[gabalafou]

@isabela-pf, your suggestion for the on-this-page navigation makes sense to me, but when I implement what I think you're asking, the result makes the right sidebar table of contents no longer look in harmony with the left sidebar table of contents. Did I implement this incorrectly or do we need to think about adjusting the spacing for other navigation areas?

[isabela-pf]

Good question! We talked about it in the #117 today and I'll be summarizing what we discussed here:

• I didn't actually compare it to the left sidebar when I was examining it, so I didn't know whether it would match or not. This was on me.
• When we checked again, the left sidebar actually has the same experience of no non-clickable space between navigation.
• We agreed the wisest decision moving forward would be to make the spacing on the both of these match even if it is tight. Having a common experience—and, if needed in the future, changing them both to have more space—seems higher priority and better for having to solve less unique problems. @gabalafou is carrying on with this for now.

[gabalafou]

Closing because pydata/pydata-sphinx-theme#1980 was merged.