feat(NcActions): focus the first action again if no action have a focus after render

[skjnldsv]

From nextcloud/server#41010 (review)

Testing in preview ⬈

<template>
	<NcActions>
		<template v-if="!showMenu">
			<NcActionButton @click="showMessage('Edit')">Edit</NcActionButton>
			<NcActionButton :is-menu="true" @click="showMenu = true">Show menu</NcActionButton>
		</template>
		<template v-else>
			<NcActionButton key="menu-1" @click="showMenu = false">< Back</NcActionButton>
			<NcActionButton key="menu-2" @click="showMessage('Edit')">Second entries</NcActionButton>
			<NcActionButton key="menu-3" @click="showMessage('Delete')">Second entries</NcActionButton>
		</template>
	</NcActions>
</template>
<script>
export default {
	data() {
		return {
			showMenu: false,
		}
	},
	methods: {
		showMessage(msg) {
			alert(msg)
		},
	},
}
</script>

[susnux]

Works here, but for the files app you need to make sure that the focus after clicking "back" is set to the "set reminder" entry and not the first one. (So that after clicking back your focus in on the entry you clicked to open then menu).

vokoscreenNG-2023-11-08_10-04-40.mp4

Meaning in this example, after pressing "back" "show menu" should be focused not "edit".

[skjnldsv]

Works here, but for the files app you need to make sure that the focus after clicking "back" is set to the "set reminder" entry and not the first one. (So that after clicking back your focus in on the entry you clicked to open then menu).

This is a different topic then
I can see two different approaches:

1. We really push the concept of "submenu" here and add dedicated logic
2. We let the dev handle this and use something like aria-selected https://github.com/nextcloud/nextcloud-vue/blob/a4326162d29a04ee6d4d8d142ca960323ff816d3/src/components/NcActions/NcActions.vue#L935

I personally vote for 2. The dedicated logic here would be to force and store the action menu ID somewhere, detect that the entire children changed somehow, then focus back the previous ID? Considering the VNodes are different, same as the element, that seems much more complicated to handle.
We could do that, but for 9.x.x

[susnux]

@skjnldsv yes 2 probably. For the text app this is currently done like that (we use submenus there too so we also needed to fix it). Thats why I wrote it works here but for apps you need to manually keep track of menu changes.

<template>
	<NcActions>
		<template v-if="!showMenu">
			<NcActionButton @click="showMessage('Edit')">Edit</NcActionButton>
			<NcActionButton ref="menuToggle" :is-menu="true" @click="showMenu = true">Show menu</NcActionButton>
		</template>
		<template v-else>
			<NcActionButton key="menu-1" @click="handleClose">< Back</NcActionButton>
			<NcActionButton key="menu-2" @click="showMessage('Edit')">Second entries</NcActionButton>
			<NcActionButton key="menu-3" @click="showMessage('Delete')">Second entries</NcActionButton>
		</template>
	</NcActions>
</template>
<script>
export default {
	data() {
		return {
			showMenu: false,
		}
	},
	methods: {
		showMessage(msg) {
			alert(msg)
		},
		handleClose() {
			this.showMenu = false
			// Required on this PR to prevent focusing the first entry
			this.$nextTick(() => this.$refs.menuToggle.$el.classList.add('active'))
			// here some inner ref would be great to prevent using getElementsByTagName
			this.$nextTick(() => this.$refs.menuToggle.$el.getElementsByTagName('button')[0].focus())
		}
	},
}
</script>

Looks like this then:

vokoscreenNG-2023-11-08_10-29-51.mp4

[skjnldsv]

For the text app this is currently done like that

A bit simpler :)
nextcloud/server#41338