[feat]: <rh-jump-links> ready to migrate

[markcaron]

Tag Name

pfe-jump-links

RHDS Only

• The component will be RHDS only, delete the PFE component once published

Additional Info

• Build/migrate <rh-jump-links> from <pfe-jump-links>.
• Contact Cheryl Little about use case in article templates.

Current design specs
2022 study about jump links on redhat.com

To do

• Design done
• Development done
• Docs updated (@marionnegp )
• Figma library updated (@marionnegp )

[markcaron]

@bennypowers I believe you had an idea on implementation on this, so we'll need your advisement.

[marionnegp]

@coreyvickery and I will have to update the docs too.

[markcaron]

While discussing Jump Links with @Nouveau today, we realized that we're likely going to run into an issue with Jump Links and color-palette / color-context as it remains sticky and slides over different colored "bands" (i.e. dark and light). This may mean that Jump Links must have a background color, otherwise the context switching as the user scrolls will never work well (or be 100% accessible).

CC: @marionnegp @coreyvickery @nikkimk @jvanpelt

[marionnegp]

On my smaller laptop screen, jump links with many items end up getting cut off. The jump links on the All products page just barely fits if I make my window fullscreen.

Dan suggested potentially decreasing the padding for each item.

[markcaron]

After our <rh-jump-links> discovery meeting last week...

We discussed the following problems:

1. Sticky scroll over top of inverted color-palettes / themes (e.g., bands) causes accessibility / contrast issues
2. Long lists of links can get cut-off
3. Orientation back to the menu. Sighted keyboard users will have a difficult time navigation back "up" to the nav. Screen reader users should be able to get to the nav via its landmark.
4. Layout issues across media and container queries with handling the switch from vertical to horizontal, since the layout exists outside of the component itself.

And we came to the following decisions:

1. Jump Links won't solve page layout issues. If using the vertical variant, it will remain vertical across all media and container queries. Same for horizontal, though we can provide an overflow/scroll somewhat similar to Subnav and Tabs.
2. Sticky positioning and scrollspy features will be pattern-based add-ons.
3. Jump Links will use the <nav> role internally as a built-in landmark.
4. Documentation guidelines will strongly advise that implementers add "back to nav" type links to each section referenced in the Jump Links nav. These have to be manually added (at least for now).
5. Documentation will suggest limiting the nav to a certain numbers of items (TBD, but likely 7) to keep the menu easy to understand and less likely to cause overflow issues.
6. Documentation will suggest that you implement horizontal Jump Links when you have "bands" of content or alternating themed sections on pages AND when you're making them "sticky".
7. Design will update the Jump Links component design to include a background color behind the links with a drop shadow (on light) and border (on dark) when "sticky".

[markcaron]

Waiting on design updates (#7 above)

CC: @marionnegp @coreyvickery

[coreyvickery]

@markcaron Marionne will be taking on this work.

[marionnegp]

@coreyvickery, here's the mock up of jump links. Not much has changed because most of the accessibility improvements are in guidelines that are specced out in this file as well. The table of contents variation has also been removed as we discussed.

For point #7, I added a border only for both light and dark theme to make the design a little easier to theme.

[bennypowers]

Resolved at office hours today:

• disclosure at mobile / small container is a pattern, not built in to the shadow root. In other words - jump links is only a nav list of links.

  <rh-disclosure>
    <h3 id="jump-links-title" slot="summary">Title</h3>
    <rh-jump-links role="nav" aria-labelledby="jump-links-title">...</rh-jump-links>
  </rh-disclosure>

• heading, even horizontal at full width is a pattern, we provide fallback aria-label, after checking whether or not there is a labelledby element
  We will need to carefully document mobile and accessibility patterns

[marionnegp]

@coreyvickery, here are updated to the mockups for jump links. This round includes a vertical sticky jump link.

[coreyvickery]

@marionnegp All looks good to me. Would you be able to tackle the docs?

[marionnegp]

@coreyvickery, yep, I can do docs.