Skip to content

Docusaurus: Set focus on main section when choosing a section in the tutorial navigation #91

@7mary4

Description

@7mary4

Expected Behavior

When a section is chosen in the tutorial navigation, focus is set in the main section. This triggers a screen reader to begin announcing contnent and keyboard users can begin navigating the tutorial content

Current Behavior

When selecting a section and hitting enter, the focus is lost and starts over from the top of the page. Keyboard users must hit the tab key many times before entering the main section. Screen reader users may not know the content has been updated.

Steps to reproduce

  1. Load the tutorial page
  2. Press tab key until you reach Section 2. Writing code. Hit enter, tab to 2.2 Headings. Press enter.
  3. Press the tab key.
    If you focus on the "skip to main content" link, the focus management is broken.
    skip to main content is the first link in the body

The first element to receive focus should be the "#" link that allows you to create a deep link on the Semantic Heading header.
Preferred focus location - semantic header

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions