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
; ;;await wrapNavigationhistory, 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:
[
Don't do this! Focus outlines are important for accessibility. See for example:
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
- https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F78
- http://www.outlinenone.com/
Note that Bootstrap 4 unfortunately removes these focus outlines. If you use Bootstrap, you can restore them with Oaf Bootstrap 4.
All that said, if you absolutely must remove focus outlines (stubborn client, stubborn boss, stubborn designer, whatever), consider using the :focus-visible
polyfill so focus outlines are only hidden from mouse users, not keyboard users.