fix(arrowNavigation) - update way to listen for focus/blur events

[Antreesy]

☑️ Resolves

• Regression from fix(LeftSidebar) redo arrow navigation #9980
• Before composable add new eventListener each time (on navigation initialization => after each fetch). Thus some items could receive several event listeners from it. Now it keep listeners in memory to remove them later (on reset method => before fetch).
• Before if search text was changed, and first item was removed from the list, but navigation is not initialized yet, on Enter key code tries to click on removed element, which causes page reload - fixed with additional check

🖼️ Screenshots

No visual changes

🚧 Tasks

• Manual testing
• Code review

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not required
• 📘 API documentation in docs/ has been updated or is not required
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required
• 🔖 Capability is added or not needed

[Antreesy]

/backport to stable27

[DorraJaouad]

Nothing is blocking, except for a suggestion for a possible improvement.

[DorraJaouad]

It's better now but ..

[DorraJaouad]

Thanks, it seems ready now :

• Navigation including tabbing and keys works correctly.
• Mouse focuses are processed in the same way whether they are outside or on SearchBox.
• No more extra listeners reassignments to conversations.

Tested on both lists and it functions as expected 🦅

[ShGKme]

Is it really required to be id here and anchor in the LeftSidebar?

ID must be unique on a whole page, and I'm really not sure that IDs like user_${item.id} are guaranteed to be unique across all applications on the page.

If it is actually only used as additional Node data to get item id from event.target?.id can we use some custom attr here? For example, data-arrow-navigation-id or at least data-id?

P.S. duplicated IDs is one of the most large a11y issue we currently have in Nextcloud...

[Antreesy]

For the LeftSidebar they are used by RouterLink in <Conversation/> components, but not for the <NcListItem/> and <Participant/>
So I think, we could find a way to avoid it

[ShGKme]

For the LeftSidebar they are used by RouterLink in <Conversation/>

But they were not used in Talk, right?

[Antreesy]

Router works without them, and I couldn't find anythig related or based on DOM anchor element id

They have an empty id attribute, but that's an upstream regression of NcListItem

[ShGKme]

Fine by me with change id to data-nav-id.

But I'm still not a fun of mixing vanilla DOM manipulation with Vue.

Not tested.