Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to how 'Components' pages navigate between pages #563

Closed
GCHQ-Developer-741 opened this issue Aug 4, 2023 · 1 comment
Closed
Assignees
Labels
spike This issue needs to be researched and explored before determining a course of action
Milestone

Comments

@GCHQ-Developer-741
Copy link
Contributor

Summary

Currently, the Page Header on all Components pages feature three navigation-items; 'Guidance', 'Code', 'Accessibility'. These function as nav items to three seperate pages, which enables having anchor links for subheadings which can be navigated to individually.

The original intention of ic-page-header involved using tabs rather than navs, since it would allow for the focus to be kept on the page whilst being able to quickly navigate between content. However, there have been issues in the past around the anchor links not working when this was implemented (#503)

💬 Description

The nav items should be made to function like tabs, in order to provide a better user experience when navigating between content. This includes:

  • Having one single URL for the three tabs (removing /code and /accessibility)
  • Changing the permalinks next to each subheading to copy the url to the clipboard, rather than jump to the subheading.
  • The anchor nav on the side of each page should jump to the heading when an option is clicked (like the current implementation)
  • When a copied URL for a permalink is entered and searched for, it should place the user at the top of the permalink's corrosponding tab, with focus on the tab, to allow the user to quickly access the anchor nav to reach their intended subheading.

💰 Use value

This will aid smoother navigation between pages and help the application function more like tabs which was originally intended.

Additional info

The PR linked above would need to be reverted, as the behaviour before this included the tab-like behaviour.

This makes #553 redundant. The issue will be closed.

@jd239
Copy link
Contributor

jd239 commented Sep 15, 2023

Things to try (in order):

  1. Take out left over tab concept from previous work. Use page load and when page has loaded, use JS to focus on clicked element
  2. Revert back to using the tab concept instead of switching between pages
  3. Move the links out of page header and use a separate tab component below

Result of testing is to also check focus as well as page navigation

@jd239 jd239 added the spike This issue needs to be researched and explored before determining a course of action label Sep 15, 2023
@GCHQ-Developer-741 GCHQ-Developer-741 self-assigned this Oct 3, 2023
@GCHQ-Developer-741 GCHQ-Developer-741 moved this from Ready for dev to Dev In Progress in Intelligence Community Design System Oct 3, 2023
@GCHQ-Developer-741 GCHQ-Developer-741 moved this from Dev In Progress to In Review in Intelligence Community Design System Oct 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
spike This issue needs to be researched and explored before determining a course of action
Projects
Development

No branches or pull requests

3 participants