[a11y] Enable tab navigation over SessionList

package.json

@@ -77,6 +77,7 @@
 		"@tiptap/extension-underline": "^2.0.0-beta.25",
 		"@tiptap/suggestion": "^2.0.0-beta.97",
 		"@tiptap/vue-2": "^2.0.0-beta.84",
+		"focus-trap": "^6.9.4",
 		"markdown-it": "^13.0.0",
 		"markdown-it-container": "^3.0.0",
 		"markdown-it-front-matter": "^0.2.3",
@@ -110,6 +111,7 @@
 		"@nextcloud/eslint-config": "^8.0.0",
 		"@nextcloud/stylelint-config": "^2.1.2",
 		"@nextcloud/webpack-vue-config": "^5.2.1",
+		"@vitejs/plugin-vue2": "^1.1.2",
 		"@vue/test-utils": "^1.3.0",
 		"@vue/vue2-jest": "^28.0.1",
 		"cypress": "^10.3.0",
@@ -125,7 +127,6 @@
 		"mitt": "^3.0.0",
 		"vite": "^3.0.2",
 		"vite-plugin-commonjs": "^0.5.0",
-		"@vitejs/plugin-vue2": "^1.1.2",
 		"vue-demi": "^0.13.5",
 		"vue-template-compiler": "^2.7.8"
 	},

src/components/Editor/SessionList.vue

@@ -21,7 +21,10 @@
   -->
 
 <template>
-	<Popover class="session-list" placement="bottom">
+	<Popover class="session-list"
+		placement="bottom"
+		@after-show="useFocusTrap"
+		@apply-hide="clearFocusTrap">
 		<button slot="trigger"
 			v-tooltip.bottom="label"
 			:title="label"
@@ -34,7 +37,7 @@
 				:size="40" />
 		</button>
 		<template #default>
-			<div class="session-menu">
+			<div ref="wrapper" class="session-menu">
 				<slot name="lastSaved" />
 				<ul>
 					<slot />
@@ -48,14 +51,16 @@
 						<span v-if="session.userId === null" class="guest-label">({{ t('text', 'guest') }})</span>
 					</li>
 				</ul>
-				<input id="toggle-color-annotations"
-					v-model="showAuthorAnnotations"
-					type="checkbox"
-					class="checkbox">
-				<label for="toggle-color-annotations">{{ t('text', 'Show author colors') }}</label>
-				<p class="hint">
-					{{ t('text', 'Author colors are only shown until everyone has closed the document.') }}
-				</p>
+				<form tabindex="0" @submit.prevent>
+					<input id="toggle-color-annotations"
+						v-model="showAuthorAnnotations"
+						type="checkbox"
+						class="checkbox">
+					<label for="toggle-color-annotations">{{ t('text', 'Show author colors') }}</label>
+					<p class="hint">
+						{{ t('text', 'Author colors are only shown until everyone has closed the document.') }}
+					</p>
+				</form>
 			</div>
 		</template>
 	</Popover>
@@ -66,6 +71,8 @@ import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import AvatarWrapper from './AvatarWrapper.vue'
 import store from '../../mixins/store.js'
+import { useEditorMixin } from '../Editor.provider.js'
+import { createFocusTrap } from 'focus-trap'
 
 const COLLABORATOR_IDLE_TIME = 60
 const COLLABORATOR_DISCONNECT_TIME = 90
@@ -79,7 +86,7 @@ export default {
 	directives: {
 		tooltip: Tooltip,
 	},
-	mixins: [store],
+	mixins: [store, useEditorMixin],
 	props: {
 		sessions: {
 			type: Object,
@@ -132,6 +139,21 @@ export default {
 			return this.participantsWithoutCurrent.slice(0, 3)
 		},
 	},
+	methods: {
+		/**
+		 * Add focus trap for accessibility.
+		 */
+		useFocusTrap() {
+			this.$nextTick(() => {
+				this.$focusTrap = createFocusTrap(this.$refs.wrapper)
+				this.$focusTrap.activate()
+			})
+		},
+		clearFocusTrap() {
+			this.$focusTrap?.deactivate()
+			this.$focusTrap = null
+		},
+	},
 }
 </script>
 
@@ -186,10 +208,17 @@ export default {
 			.session-label {
 				padding-right: 3px;
 			}
+
 			.guest-label {
 				padding-left: 3px;
 				color: var(--color-text-maxcontrast);
 			}
+
+			&:focus-visible {
+				box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+				border-radius: var(--border-radius);
+				background-position: 12px center;
+			}
 		}
 	}