Wondering what’s next for npm?Check out our public roadmap! »

    oaf-angular-router

    2.0.0 • Public • Published

    Build Status Known Vulnerabilities Greenkeeper badge npm

    dependencies Status devDependencies Status peerDependencies Status

    Oaf Angular Router

    An accessible wrapper for Angular's Router.

    Documentation at https://oaf-project.github.io/oaf-angular-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 (see issue #3).

    Installation

    # yarn 
    yarn add oaf-angular-router
     
    # npm 
    npm install oaf-angular-router

    Basic Usage

    app.module.ts:

    - import { Router } from '@angular/router';
    + import { Event, Router, NavigationEnd } from '@angular/router';
    + import { wrapRouter } from "oaf-angular-router";
     
    export class AppModule {
      constructor(router: Router) {
    +    // HACK instanceof doesn't work across require() boundary
    +    const isNavigationEndEvent = (event: Event) => event instanceof NavigationEnd;
    +    wrapRouter(router, isNavigationEndEvent);
      }
    }

    Advanced Usage

    const settings = {
      announcementsDivId: "announcements",
      primaryFocusTarget: "main h1, [role=main] h1",
      // This assumes you're setting the document title via some other means.
      // 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: Navigation) => document.title,
      // BYO localization
      navigationMessage: (title: string, location: Navigation): string => `Navigated to ${title}.`,
      shouldHandleAction: (previousLocation: Navigation, nextLocation: Navigation) => 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, isNavigationEndEvent, settings);

    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

    Keywords

    none

    Install

    npm i oaf-angular-router

    DownloadsWeekly Downloads

    22

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    340 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar