CSUN 2019 notes

I’ve come to the conclusion that there is only one strategy for focus management when routing in a single page application. Focus must be set to an element that meets the following requirements:

  1. The element is visible or hidden with offscreen text from http://whatsock.com/
  2. The element precedes the new content introduced by routing in the DOM order
  3. The element contains text that explains the new content introduced by routing

Title Management

React

React title management

Test Results

Angular

Angular title management

Focus Management

Angular

  1. Basic routing with no title or focus management

    See this in stackblitz at
    https://stackblitz.com/github/clane/ng-routing-basic/tree/master/example

  2. Updating the title and moving focus to the newly loaded component after routing

    See this in stackblitz at

    https://stackblitz.com/github/clane/ng-routing-focus-when-components-load/tree/master/example

  3. Updating the title and moving focus to the top after routing.

    See this in stackblitz at
    https://stackblitz.com/github/clane/ng-routing-focus-top/tree/master/example

    See the test results.

    One reason to do this would be to address a change in the global navigation

  4. Angular – Moving focus to offscreen text at the top after routing

    See this in stackblitz at
    https://stackblitz.com/github/clane/ng-routing-focus-top-offscreen-text/tree/master/example

React

  1. Basic routing with no title or focus management
  2. Updating the title and moving focus to the newly loaded component after routing and Test Results
  3. Updating the title and moving focus to the top after routing and Test Results. One reason to do this would be to address a change in the global navigation
  4. Moving focus to offscreen text at the top when routing
  5. Moving focus to the body when routing

React Fragments

React Fragments example