Options
All
  • Public
  • Public/Protected
  • All
Menu

oaf-angular-router

Build Status Known Vulnerabilities Greenkeeper badge npm

dependencies Status devDependencies Status peerDependencies Status

Oaf Angular Router

An accessible wrapper for Angular's router.

Features

  • Reset scroll and focus after page 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, with the caveat that Oaf Angular Router doesn't currently support focus and scroll restoration after POP navigation.

Usage

app.module.ts:

+ import { wrapRouter } from "oaf-angular-router";

export class AppModule {
  constructor(router: Router) {
+    wrapRouter(router);
  }
}

A note on focus outlines

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

Generated using TypeDoc