search

oaf-project / oaf-next.js-router

An accessible wrapper for Next.js's router.
https://oaf-project.github.io/oaf-next.js-router/
MIT License
5 stars 0 forks source link
accessibility nextjs react typescript

readme

Build Status Known Vulnerabilities npm

dependencies Status devDependencies Status peerDependencies Status

Oaf Next.js Router

An accessible wrapper for Next.js's router.

Documentation at https://oaf-project.github.io/oaf-next.js-router/

Features

In lieu of more details, see Oaf React Router for now. The features are basically the same, with the caveat that Oaf Next.js Router doesn't currently support focus and scroll restoration after POP navigation (see issue #1).

Installation

# yarn
yarn add oaf-next.js-router

# npm
npm install oaf-next.js-router

Basic Usage

_app.tsx:

import App from "next/app";
+ import { wrapRouter } from "oaf-next.js-router";
import Router from "next/router";

export default class MyApp extends App {
  componentDidMount() {
    ...
+    // We only want to do this on the client, not the server.
+    wrapRouter(Router);
    ...
  }
}

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: (location: string) => new Promise(resolve => setTimeout(() => resolve(document.title))),
  // BYO localization
  navigationMessage: (title: string, location: string): string => `Navigated to ${title}.`,
  shouldHandleAction: (previousLocation: string, nextLocation: string) => true,
  announcePageNavigation: true,
  setPageTitle: false,
  // Set this to true for smooth scrolling.
  // For browser compatibility you might want iamdustan's smoothscroll polyfill https://github.com/iamdustan/smoothscroll
  smoothScroll: false,
};

wrapRouter(Router, settings);

A note on focus outlines

You may see focus outlines around your h1 elements (or elsewhere, per primaryFocusTarget) when using Oaf Next.js 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:

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.

See also