An accessible wrapper for Reach Router.
Documentation at https://oaf-project.github.io/oaf-reach-router/
- 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.
# yarn
yarn add oaf-reach-router
# npm
npm install oaf-reach-routerFirst, disable Reach Router's native focus management by setting primary to false:
# See https://reach.tech/router/api/Router
<Router primary={false}>
...
</Router>Then wrap the global history using Oaf Reach Router:
+ import { globalHistory } from "@reach/router";
+ import { wrapHistory } from "oaf-reach-router";
+ wrapHistory(globalHistory);
...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: (location: Location) => document.title,
// BYO localization
navigationMessage: (title: string, location: Location, action: Action): string => `Navigated to ${title}.`,
shouldHandleAction: (previousLocation: Location, nextLocation: Location, action: Action) => true,
disableAutoScrollRestoration: true,
announcePageNavigation: true,
setPageTitle: false,
handleHashFragment: true,
// Set this to false if you are using HashRouter or MemoryRouter.
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,
};
wrapHistory(globalHistory, settings);You may see focus outlines around your h1 elements (or elsewhere, per primaryFocusTarget) when using Oaf Reach Router.
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:
- 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.