chore: add 'Skip to main content' button to the main page

[ToMESSKa]

Closes: INSTUI-4240

ISUUE: main page does not have a a 'Skip to main content' button to avoid going through repetitive content. This current implementation is based on this recommendation: https://www.a11y-collective.com/blog/skip-to-main-content/

TEST PLAN:
test skipt to main button:

• go through the different types of docs page with screenreader with Tab
  1. main page
  2. document like /#Alert or /#focus-management
  3. changelog page /#CHANGELOG
  4. theme page like /#canvas-high-contrast
  5. icons page: /#icons
  6. error page /#iconsss

• the first focusable element on each page should be a 'Skip to main content' button

• the button should not be visible when not focused

• when the button is clicked, it should bring the focus to the main content

• the 'Skip to main content' button also should work when the side navigation is open

test skip to main button focus after page load:

• click a link from the navigation bar like Alert, Icons, canvas-high-contrast, Focus Management etc
• after page loads, nothing should be focused and the first tabbable element should be the 'Skip to main content' button

test clicking the hamburger Icon:

• click the hamburger icon
• the focus should be jumped to the search bar inside of the navigation

[github-actions]

PR Preview Action v1.6.0
🚀 View preview at https://instructure.github.io/instructure-ui/pr-preview/pr-1837/
Built to branch gh-pages at 2025-01-28 08:44 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[matyasf]

While it works good on the main page, it breaks on other pages. I think the good solution is to focus on the content container, it does not have to be an interactive element.
This is done by e.g. wikipedia.com or github.com

[ToMESSKa]

While it works good on the main page, it breaks on other pages. I think the good solution is to focus on the content container, it does not have to be an interactive element. This is done by e.g. wikipedia.com or github.com

I fixed the above issues:

• now the focus should go to the container containing the main content
• the skip to Main button should also work the same way on the doc type pages (like Alert or API Guidelines) but was not implemented on the rest (like Icons or Changelog), I think it had no point to use this button on those pages

[matyasf]

still not perfect, I could not trigger it when the side nav is open. Also AFAIK it should work for ALL pages, the main purpose of this feature is that if I send you a link like https://instructure.design/pr-preview/pr-1837/#CHANGELOG and you are a keyboard only SR user you dont have to tab trough our whole menu. Also its not nice to have a button that does nothing in this case. Cant you just move the focus to the content container?

[ToMESSKa]

still not perfect, I could not trigger it when the side nav is open. Also AFAIK it should work for ALL pages, the main purpose of this feature is that if I send you a link like https://instructure.design/pr-preview/pr-1837/#CHANGELOG and you are a keyboard only SR user you dont have to tab trough our whole menu. Also its not nice to have a button that does nothing in this case. Cant you just move the focus to the content container?

@matyasf I addressed this issue. Now the 'Skip to main button' should work on every page and also when the nav bar is open. Also added focus to Search bar inside of the navigation when open. Please check the revised test plan.

[matyasf]

nice work, works perfectly now :)

PS: The preview link is not up to date, I guess because of the merge conflict?

[ToMESSKa]

nice work, works perfectly now :)

PS: The preview link is not up to date, I guess because of the merge conflict?

@matyasf I resolved the merge conflict, the preview link seems up-to-date to me now.