Oaf Navi

An accessible wrapper for Navi.

Documentation at https://oaf-project.github.io/oaf-navi/

Features

Reset scroll and focus after PUSH and REPLACE navigation
Restore scroll and focus after POP navigation
Set the page title after navigation
Announce navigation to users of screen readers
Hash fragment support

In lieu of more details, see Oaf React Router for now. The features are basically the same.

Installation

# yarn
yarn add oaf-navi

# npm
npm install oaf-navi

Basic Usage

import register from "navi-scripts/register";
import routes from "./routes";
import { createBrowserNavigation } from "navi";
+ import { createBrowserHistory } from "history";
+ import { wrapNavigation } from "oaf-navi";

register({
  ...
  async main() {
-    const navigation = createBrowserNavigation({ routes });
+    const history = createBrowserHistory(); // or createHashHistory()
+    const navigation = createBrowserNavigation({ routes, history });
+    await wrapNavigation(history, navigation);
    ...
  }
});

Advanced Usage

const settings = {
  announcementsDivId: "announcements",
  primaryFocusTarget: "main h1, [role=main] h1",
  // This assumes you're setting the document title via some other means (e.g. React Helmet).
  // If you're not, you should return a unique and descriptive page title for each page
  // from this function and set `setPageTitle` to true.
  documentTitle: (route: Route) => new Promise(resolve => setTimeout(() => resolve(document.title))),
  // BYO localization
  navigationMessage: (title: string, route: Route, action: Action): string => `Navigated to ${title}.`,
  shouldHandleAction: (previousRoute: Route, nextRoute: Route, action: Action) => true,
  disableAutoScrollRestoration: true,
  announcePageNavigation: true,
  setPageTitle: false,
  handleHashFragment: true,
  // Set this to false if you are using createHashHistory or createMemoryHistory.
  restorePageStateOnPop: true,
  // Set this to true for smooth scrolling.
  // For browser compatibility you might want iamdustan's smoothscroll polyfill https://github.com/iamdustan/smoothscroll
  smoothScroll: false,
};

const history = createBrowserHistory();
const navigation = createBrowserNavigation({ routes, history });
await wrapNavigation(history, navigation);
...

A note on focus outlines

You may see focus outlines around your h1 elements (or elsewhere, per primaryFocusTarget) when using Oaf Navi.

You might be tempted to remove these focus outlines with something like the following:

[tabindex="-1"]:focus {
  outline: 0 !important;
}

Don't do this! Focus outlines are important for accessibility. See for example:

Note that Bootstrap 4 unfortunately removes these focus outlines. If you use Bootstrap, you can restore them with Oaf Bootstrap 4.