Add table of contents to support page

[didoesdigital]

Overview

The support page is long, making it difficult to understand at a glance or navigate efficiently.

Approach

1. Add a "table of contents" to the support page component, src/pages/support/Support.tsx.
2. Test the page using a screen reader, such as VoiceOver on macOS in Safari or NVDA on Windows. Specifically check:
   • The order of content should read the table of contents before the main page content. Using VoiceOver, you would press VO + A to read the page.
   • Navigating via "navigation landmarks" should say something like "On this page navigation". Using VoiceOver, you would press VO + U to open the rotor menu and the right arrow key to tab through the menus to the Landmarks menu then the down arrow to find "On this page navigation".
   • Every link in the table of contents can be reached and activating the link will move to the linked heading and announce it. Using VoiceOver, you would press VO + arrow keys to navigate through the links and then VO + Space to activate a link.
3. Check against the design for accuracy.
4. Check how it looks on small screens.
5. Check the browser console for errors.
6. Check the terminal for errors and warnings.
7. Check that the tests all pass using yarn test.

Design

Code

This is the code assembled from designing it in the browser. The existing page content is truncated for readability here.

For src/pages/support/Support.jsx:

<div className="p3 mx-auto mw-1024 type-face--sans-serif">
  <div className="flex flex-wrap justify-between">
    <div className="mt3 mw-336 flex-grow table-of-contents-column">
      <div role="navigation" aria-labelledby="contents-label">
        <p id="contents-label" className="mb0">On this page:</p>
        <ol className="unstyled-list lh-double">
          <li className="unstyled-list-item">
            <a href="#about-stenography">Stenography</a>
            <ol className="unstyled-list mb0">
              <li><a href="#steno-terms">Steno terms</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item">
            <a href="#typey-type-notes">Typey Type notes</a>
            <ol className="unstyled-list mb0">
              <li><a href="#typey-type-progress-tracking">Typey Type progress tracking</a></li>
              <li><a href="#typey-type-dictionary">Typey Type dictionary</a></li>
              <li><a href="#typey-type-hints">Typey Type hints</a></li>
              <li><a href="#flashcards">Flashcards</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item">
            <a href="#learn-steno">Learning steno</a>
            <ol className="unstyled-list mb0">
              <li><a href="#try-steno">How can you try out steno?</a></li>
              <li><a href="#requirements-for-steno">What do you need to learn steno?</a></li>
              <li><a href="#time-to-learn">How long does it take to learn steno?</a></li>
              <li><a href="#discovery">How many new briefs should you learn each day?</a></li>
              <li><a href="#revision">How many briefs should you revise each day?</a></li>
              <li><a href="#palantype">What’s a “palantype”?</a></li>
            </ol>
          </li>
          <li className="unstyled-list-item"><a href="#progress">Progress</a></li>
          <li className="unstyled-list-item"><a href="#contribute">Want to contribute?</a></li>
          <li className="unstyled-list-item"><a href="#news">Want news?</a></li>
          <li className="unstyled-list-item"><a href="#credits">Credits</a></li>
          <li className="unstyled-list-item"><a href="#support">Support</a></li>
          <li className="unstyled-list-item"><a href="#privacy">Privacy</a></li>
        </ol>
      </div>
    </div>
    <div className="mw-568">
      <p className="mt3">Typey&nbsp;Type is a typing app designed to …</p>
      ⋮
    </div>
  </div>
</div>

For src/index.scss:

.table-of-contents-column {
  @media (min-width: 952px) {
    order: 1;
  }
}

Animation

Optional extra! This issue could be closed without including any animation.

Using the scrollToAnchor() function that's currently inside componentDidMount(), animate the scroll to the on-page heading. This would likely need:

• Moving the scrollToAnchor() function somewhere accessible.
• Adding tabIndex="-1" to the linked headings (see Privacy heading for an example).
• onClick handlers for each table of contents link to call the scroll animation function.

[didoesdigital]

TODO: check for additional Table of Contents items, such as the new Metronome section for frequently anticipate questions

[didoesdigital]

Note: this page is under active development so the requirements of this issue may change: https://github.com/didoesdigital/typey-type/pull/146/ — merged!