- The profile Liveview is subscribed to active_users topic
- user_joined and user_left events are sent
- Users are added and removed from presences assign
* 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.
From an accessibility perspective, having an empty `<h2/>` is confusing. Even though it lacks text, it remains visible to scree readers and is still navigable.
I'm not sure whether wrapping the entire `<div/>` in this check breaks the layout, or if the individual elements should have `aria-hidden` set if their values are empty.
* 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.
Note: not currently tested since I'm not sure how to force these states, but I did notice them happening from time to time so wanted to try addressing them..
The original icon fix assumed that the `<svg>` tag had an `alt` attribute, which it does not. Instead, SVG requires a child element to specify a description. A complete fix involves patching upstream to allow for setting this element, but since we don't seem to have actionable icons without associated textual controls, set `aria-hidden="true"` by default and require it to be overridden if needed.
