The focus_wrap function component (and hook) can
be used to focus wrap any content.
The focus and focus_closest JS functions were added to
programmtaically focus an element on the client or
find the next element or previous element sibling when an
action is taken that requires moving focus to cloest item.
Co-authored-by: Nolan Darilek <nolan@thewordnerd.info>
Avoid fetching each user by passing in full pre-fetched
presences from Presence.fetch/2 callback.
Use temporary assigns in ProfileLive to avoid duping
presences in memeory.
Handle removes by a small hook event
* Use `HtmlElement.tabIndex` directly rather than going through attributes.
* Always restore `tabIndex` after focus.
* Remove `setTimeout` to simplify implementation.
This does have a disadvantage in that it leaves unnecessary `tabindex="1"` instances around. On the other hand, it does simplify the implementation and get the job done' so is probably a more clear example of how to do this correctly.
* Add handler for `phx:page-loading-stop` that focuses either the first `<h1>` child of `<main>`, or `<main>` directly if no child `<h1>` is present. Make this our focus target.
* Cache original `tabindex` of target, if any, and assign it a temporary `tabindex1 of -1.
* Focus the target.
* After a long timeout, either restore the target's original `tabindex` or remove the temporary -1 value. Short timeouts didn't seem to perform the focus step. Neither did nested `requestAnimationFrame` calls.
