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

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ToMESSKa
Copy link
Contributor

@ToMESSKa ToMESSKa commented Dec 20, 2024

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:

  • go through the documentation's main page with a screenreader with Tab
  • the first focusable element on the 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 container containing the 'Components everyone can count on' text
  • 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)

@ToMESSKa ToMESSKa self-assigned this Dec 20, 2024
Copy link

github-actions bot commented Dec 20, 2024

PR Preview Action v1.4.8
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1837/
on branch gh-pages at 2025-01-08 14:56 UTC

@ToMESSKa ToMESSKa force-pushed the INSTUI-4240_docs_add_skip_to_main_content_button branch from 7ba47f3 to ec9fd33 Compare December 20, 2024 10:33
@ToMESSKa ToMESSKa requested review from matyasf and HerrTopi December 20, 2024 10:53
Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ToMESSKa force-pushed the INSTUI-4240_docs_add_skip_to_main_content_button branch from ec9fd33 to a7e2315 Compare January 8, 2025 14:50
@ToMESSKa
Copy link
Contributor Author

ToMESSKa commented Jan 8, 2025

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

@ToMESSKa ToMESSKa requested a review from matyasf January 8, 2025 15:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants