fix(NcListItem) - define a single place for NcActions to render

[Antreesy]

☑️ Resolves

• Fix NcListItem: Can not access actions using keyboard navigation #3889
• I've noticed, that we may render two NcActions component in one NcListItem, but hide one of them with display: none
• Because of that, and because of behaviour of handleTab() method in NcListItem, we couldn't focus one of the two available action menus
• Not sure, that behaviour now is align with a11y requirements, but at least actions are accessible

🖼️ Screenshots

🏚️ Before

list-item-before.mp4

🏡 After

list-item-after.mp4

🚧 Tasks

• Code review
• Manual testing

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[szaimen]

@Antreesy did you try starting from the bottom and using shift + tab? This does not seem to work as expected...

[Antreesy]

This does not seem to work as expected...

That's because of mentioned method, it considers only forward order:
https://github.com/nextcloud/nextcloud-vue/blob/ff4baa4b5e9cc2291d368b019638516d64a9d4df/src/components/NcListItem/NcListItem.vue#L563-L572

[ShGKme]

Looks good, works fine.
And I'd expect around 29% performance increase ⚡️ in Talk with this change.

Let's backport it

[Antreesy]

@szaimen tabbing behaviour seems to be a different issue from the current PR. How about we merge it and solve Shift+Tab in a follow-up?

P.S. Also to not forget include in the follow-up:

• If NcActions is not presented, we get a warning from handleTab() method: "TypeError: Cannot read properties of undefined (reading '$el')

[szaimen]

@szaimen tabbing behaviour seems to be a different issue from the current PR. How about we merge it and solve Shift+Tab in a follow-up?

sounds okay to me

[szaimen]

Fine by me then

[Antreesy]

/backport to stable7