Title and Focus Management with Angular and React

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/

   
   .offscreenText {
   position: absolute;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   padding: 0;
   border: 0;
   height: 1px; 
   width: 1px; 
   overflow: hidden;
   white-space: nowrap;
   }
   
   

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

https://github.com/nfl/react-helmet

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