Improving performance / API for directional navigation

[matthew-dean]

There are a few things that have made the Directional Navigation library unusable for our project, and I just thought I'd leave some notes in the hopes that maybe these could be addressed.

1. The library makes numerous calls to getBoundingClientRects on all elements, despite that being a known cause of layout thrashing - https://gist.github.com/paulirish/5d52fb081b3570c81e3a. It seems part of the reason is to handle scrolling, but then wouldn't a scroll handler better invalidate existing rects rather than re-measuring (causing thrashing) each time? As a side-note, the Edge team implementing ResizeObservers would make getting client rects much much more performant.
2. Focusable elements cannot be registered or de-registered directly (passing in DOM elements), and so make integration with systems like React poor. Instead, it seems the API only supports adding selectors to the default queryable items, and then runs querySelectorAll on all elements (?) and then filters by focusable ones. This just seems incredibly inefficient.
3. The library is automatic by default, which is less friendly to modern JS approaches. It should have a start method if automatic is to be enabled.
4. The API doesn't expose any of the XYFocus algorithm (AFAICT), so that an event listener can be added to do something based on which direction or directional attributes (or button presses) are triggered.

It looks like Directional Navigation hasn't been updated since 2016. Maybe it's time for an update?