feat(NcAppNavigation): add n hotkey to toggle navigation

Signed-off-by: Raimund Schlüßler <[email protected]>

Author: raimund-schluessler

l10n/messages.pot

@@ -250,7 +250,7 @@ msgstr ""
 msgid "Open menu"
 msgstr ""
 
-msgid "Open navigation"
+msgid "Open navigation {shortcut}"
 msgstr ""
 
 msgid "Open sidebar"

package-lock.json

@@ -98,6 +98,7 @@
     "splitpanes": "^3.1.8",
     "string-length": "^6.0.0",
     "striptags": "^3.2.0",
+    "tabbable": "^6.2.0",
     "tributejs": "^5.1.3",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",

package.json

@@ -165,10 +165,13 @@ emit('toggle-navigation', {
 </template>
 
 <script>
-import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { getTrapStack } from '../../utils/focusTrap.js'
-import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { tabbable } from 'tabbable'
+
+import { getTrapStack } from '../../utils/focusTrap.js'
+import { useHotKey } from '../../composables/useHotKey/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
@@ -246,6 +249,12 @@ export default {
 			escapeDeactivates: false,
 		})
 		this.toggleFocusTrap()
+
+		// N opens + focuses the navigation
+		useHotKey('n', this.onKeyDown, {
+			prevent: true,
+			stop: true,
+		})
 	},
 	unmounted() {
 		this.setHasAppNavigation(false)
@@ -259,7 +268,7 @@ export default {
 		 *
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
-		toggleNavigation(state) {
+		async toggleNavigation(state) {
 			// Early return if already in that state
 			if (this.open === state) {
 				emit('navigation-toggled', {
@@ -272,6 +281,12 @@ export default {
 			const bodyStyles = getComputedStyle(document.body)
 			const animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100
 
+			// If we just opened, we focus the first element
+			if (this.open) {
+				await this.$nextTick()
+				this.focusFirstElement()
+			}
+
 			setTimeout(() => {
 				emit('navigation-toggled', {
 					open: this.open,
@@ -296,10 +311,39 @@ export default {
 		},
 
 		handleEsc() {
-			if (this.isMobile) {
+			if (this.isMobile && this.open) {
 				this.toggleNavigation(false)
 			}
 		},
+
+		focusFirstElement() {
+			const element = tabbable(this.$refs.appNavigationContainer)[0]
+			if (element) {
+				element.focus()
+				logger.debug('Focusing first element in the navigation', { element })
+			}
+		},
+
+		onKeyDown(event) {
+			// toggle the navigation on 'n' key
+			if (event.key === 'n') {
+				// If the navigation is closed, open it
+				if (!this.open) {
+					this.toggleNavigation(true)
+					return
+				}
+
+				// If the navigation is open and the focus is within the navigation, close it
+				if (this.isFocusWithinNavigation()) {
+					this.toggleNavigation(false)
+				}
+			}
+		},
+
+		isFocusWithinNavigation() {
+			const activeElement = document.activeElement
+			return this.$refs.appNavigationContainer.contains(activeElement)
+		},
 	},
 }
 </script>

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -11,6 +11,7 @@
 			:aria-label="label"
 			:title="label"
 			aria-controls="app-navigation-vue"
+			:aria-keyshortcuts="disableKeyboardShortcuts ? '' : 'n'"
 			@click="toggleNavigation">
 			<template #icon>
 				<MenuOpenIcon v-if="open" :size="20" />
@@ -27,6 +28,8 @@ import { t } from '../../l10n.js'
 import MenuIcon from 'vue-material-design-icons/Menu.vue'
 import MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'
 
+const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()
+
 export default {
 	name: 'NcAppNavigationToggle',
 
@@ -50,9 +53,15 @@ export default {
 
 	emits: ['update:open'],
 
+	setup() {
+		return { disableKeyboardShortcuts }
+	},
+
 	computed: {
 		label() {
-			return this.open ? t('Close navigation') : t('Open navigation')
+			return this.open
+				? t('Close navigation')
+				: t('Open navigation {shortcut}', { shortcut: disableKeyboardShortcuts ? '' : '[n]' }).trim()
 		},
 	},
 	methods: {

src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue

@@ -125,7 +125,7 @@ import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { t } from '../../l10n.js'
-import logger from '../../utils/logger.js'
+import { logger } from '../../utils/logger.ts'
 
 /**
  * @typedef PasswordPolicy

src/components/NcPasswordField/NcPasswordField.vue

@@ -5,7 +5,7 @@
 
 import { getLoggerBuilder } from '@nextcloud/logger'
 
-export default getLoggerBuilder()
+export const logger = getLoggerBuilder()
 	.detectUser()
 	.setApp('@nextcloud/vue')
 	.build()

src/utils/logger.js renamed to src/utils/logger.ts

@@ -0,0 +1,81 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import type { HooksConfig } from '../../setup/index'
+import { expect, test } from '@playwright/experimental-ct-vue'
+
+import AppNavigation from './NcAppNavigation.story.vue'
+
+test.skip(({ browserName }) => browserName !== 'chromium')
+
+// A little bit hacky but we test a wrapper element so we need to use the real NcContent and NcAppNavigation
+test.beforeEach(async ({ mount, page }) => {
+	const handle = await page.locator('#app-content').elementHandle()
+	expect(handle).not.toBeNull()
+	await handle!.evaluate((node) => { node.innerHTML = ''; node.id = 'root' })
+
+	await mount<HooksConfig>(AppNavigation, {
+		hooksConfig: {
+			routes: [
+				{ path: '/', component: AppNavigation },
+				{ path: '/foo', component: AppNavigation },
+			],
+		},
+	})
+})
+
+test('opens on n keyboard press', async ({ page }) => {
+	await expect(page.getByText('First')).toBeVisible();
+
+	// cy.get('nav').then(($nav) => {
+	// 	const id = $nav.attr('id')
+	// 	cy.get(`[aria-controls="${id}"`).as('appNavigationToggle')
+	// 	cy.get('@appNavigationToggle').should('have.attr', 'aria-expanded', 'true')
+	// 	cy.get('nav').should('have.attr', 'aria-hidden', 'false')
+	// 	cy.get('nav').should('not.have.attr', 'inert')
+
+	// 	// close the sidebar
+	// 	cy.get('@appNavigationToggle').click()
+
+	// 	cy.get('@appNavigationToggle').should('have.attr', 'aria-expanded', 'false')
+	// 	cy.get('nav').should('have.attr', 'aria-hidden', 'true')
+	// 	cy.get('nav').should('have.attr', 'inert')
+
+	// 	// open the sidebar with the keyboard
+	// 	cy.get('body').type('n')
+
+	// 	cy.get('@appNavigationToggle').should('have.attr', 'aria-expanded', 'true')
+	// 	cy.get('nav').should('have.attr', 'aria-hidden', 'false')
+	// 	cy.get('nav').should('not.have.attr', 'inert')
+
+	// 	// make sure we auto-focus the first item
+	// 	cy.document().then((doc) => {
+	// 		const activeElement = doc.activeElement
+	// 		const navigation = doc.querySelector('nav')
+	// 		// eslint-disable-next-line no-unused-expressions
+	// 		expect(navigation?.contains(activeElement)).to.be.true
+	// 	})
+	// })
+})
+
+test('closes on n keyboard press', async ({ page }) => {
+	await expect(page.getByText('First')).toBeVisible()
+	const navigation = page.getByRole('navigation')
+
+	await expect(navigation).toHaveAttribute('aria-hidden', 'false')
+	await expect(navigation).not.toHaveAttribute('inert')
+
+	// pressing n does nothing until we focus something within
+	page.locator('body').press('n')
+	await expect(navigation).toHaveAttribute('aria-hidden', 'false')
+	await expect(navigation).not.toHaveAttribute('inert')
+
+	// focus something within
+	navigation.getByRole('link').first().focus()
+
+	// pressing n closes the sidebar
+	page.locator('body').press('n')
+	await expect(navigation).toHaveAttribute('aria-hidden', 'true')
+	await expect(navigation).toHaveAttribute('inert')
+})

tests/component/components/NcAppNavigation/NcAppNavigation.spec.ts

@@ -0,0 +1,22 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcContent app-name="testing">
+		<NcAppNavigation aria-label="In-app navigation">
+			<template #list>
+				<NcAppNavigationItem name="First" />
+			</template>
+		</NcAppNavigation>
+		<NcAppContent />
+	</NcContent>
+</template>
+
+<script setup lang="ts">
+import NcAppContent from '../../../../src/components/NcAppContent/NcAppContent.vue'
+import NcAppNavigation from '../../../../src/components/NcAppNavigation/NcAppNavigation.vue'
+import NcAppNavigationItem from '../../../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+import NcContent from '../../../../src/components/NcContent/NcContent.vue'
+</script>

tests/component/components/NcAppNavigation/NcAppNavigation.story.vue

@@ -5,7 +5,7 @@
 import type { HooksConfig } from '../../setup/index'
 import { expect, test } from '@playwright/experimental-ct-vue'
 
-import AppNavigation from './AppNavigation.story.vue'
+import AppNavigation from './NcAppNavigationItem.story.vue'
 
 test.skip(({ browserName }) => browserName !== 'chromium')
 

tests/component/components/NcAppNavigationItem/visual.spec.ts renamed to tests/component/components/NcAppNavigationItem/NcAppNavigationItem.spec.ts

@@ -157,7 +157,20 @@ describe('NcAppNavigation.vue', () => {
 			expect(navigation.attributes('aria-hidden')).toBe('true')
 			expect(navigation.attributes('inert')).toBeTruthy()
 			expect(togglebutton.attributes('aria-expanded')).toBe('false')
-			expect(togglebutton.attributes('aria-label')).toBe('Open navigation')
+			expect(togglebutton.attributes('aria-label')).toBe('Open navigation [n]')
+		})
+
+		it('has correct aria attributes and inert on closed navigation with disabled shortcuts', async () => {
+			window.OCP = { Accessibility: { disableKeyboardShortcuts: () => true } }
+			const wrapper = mount(NcAppNavigation)
+			const togglebutton = findToggleButton(wrapper)
+
+			// Close navigation
+			await togglebutton.trigger('click')
+			expect(togglebutton.attributes('aria-label')).toBe('Open navigation [n]')
+
+			// Clean up
+			delete window.OCP
 		})
 
 		it('has aria-label from corresponding prop on navigation', () => {