[UIEH-440] More Accessible Routing

[wwilsman]

Purpose

[UIEH-440]

This initially started as a spike to see how accessible routing looked in eholdings. This cleans up that POC and adds tests.

Approach

As it turned out, this POC has little to do with the actual routing or routes.

• Focus the pane title when a new search is conducted

  This was done in the SearchPaneset component. When the component updates with a new search within the same search type, the results pane title will receive focus. Similarly, when navigating directly to an existing search (via external link), the results pane title is also focused on mount (as long as the details view is not also visible).

• Focus the search results list item when a details pane is closed

  The search route knows which element is currently, and was previously active, so the active item logic was moved into the getResults() method of that route. Since this route also knows the previous active item, when the details view is closed the previously active item will receive focus.

  This is done via a shouldFocusItem prop which reflects the previous item ID that will be sent to all list items. When the list item ID matches, it is made focused via an HOC designed specifically to focus elements on mount and update. This was made into an HOC in case this pattern is needed again in the future.

• Focus the details pane heading when it becomes active

  For this, the details view is one of the deepest navigation points in our app. So whenever that component is mounted, it should receive focus. Since the heading sometimes is not visible while loading, on update after it is finished loading it will focus the heading.

TODOs

• This only covers three primary areas of eholdings. Still to be done is search form focus management in all places where we can conduct searches, and most likely some other areas as well.

Screenshots

Not sure why this gif looks weird but ¯_(ツ)_/¯

[cherewaty]

🥇