Linked to Issue: #129
When using keyboard navigation, following a link with a hash does not drive focus to that section of the page. This PR fixes this by driving focus to the element with the id attribute that matches the link hash.
Since heading tags are not normally tab-focusable, the Heading component has been updated to place the id attribute on the anchor tag instead.
Changes
Move the id attribute from the heading tag to the anchor tag in app/components/Heading/index.tsx
Drive focus to the element with an id attribute matching the hash link in app/hooks/useResetScroll.ts
Steps to QA
Pull down and switch to this branch
Verify in browser:
From the /documentation page, follow a hash link using keyboard navigation. Focus should jump to the linked section when a link is followed.
Add a hash-link to a section of /documentation (ex: /documentation#Project-Configurations) to the home page. Following this link should drive focus to that section upon navigation.
Description
Linked to Issue: #129 When using keyboard navigation, following a link with a hash does not drive focus to that section of the page. This PR fixes this by driving focus to the element with the
idattribute that matches the link hash.Since heading tags are not normally tab-focusable, the
Headingcomponent has been updated to place theidattribute on the anchor tag instead.Changes
idattribute from the heading tag to the anchor tag inapp/components/Heading/index.tsxidattribute matching the hash link inapp/hooks/useResetScroll.tsSteps to QA
/documentationpage, follow a hash link using keyboard navigation. Focus should jump to the linked section when a link is followed./documentation(ex:/documentation#Project-Configurations) to the home page. Following this link should drive focus to that section upon navigation.