feat(NcAppNavigation): add n hotkey to toggle navigation

cypress/component/NcAppNavigation.cy.ts

@@ -0,0 +1,82 @@
+/**
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import NcAppNavigation from '../../src/components/NcAppNavigation/NcAppNavigation.vue'
+import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue'
+
+describe('NcAppNavigation hotkeys', () => {
+	it('opens on n keyboard press', () => {
+		cy.mount({
+			render: (h) => h(NcAppNavigation, {
+				scopedSlots: {
+					list: () => [
+						h(NcAppNavigationItem, { props: { name: 'First' } }),
+					],
+				},
+			}),
+		})
+
+		cy.contains('li', 'First').should('exist')
+
+		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
+			})
+		})
+	})
+
+	it('closes on n keyboard press', () => {
+		cy.mount({
+			render: (h) => h(NcAppNavigation, {
+				scopedSlots: {
+					list: () => [
+						h(NcAppNavigationItem, { props: { name: 'First' } }),
+					],
+				},
+			}),
+		})
+
+		cy.contains('li', 'First').should('exist')
+		cy.get('nav').should('have.attr', 'aria-hidden', 'false')
+		cy.get('nav').should('not.have.attr', 'inert')
+
+		// pressing n does nothing until we focus something within
+		cy.get('body').type('n')
+		cy.get('nav').should('have.attr', 'aria-hidden', 'false')
+		cy.get('nav').should('not.have.attr', 'inert')
+
+		// focus something within
+		cy.get('nav').find('a').first().focus()
+
+		// pressing n closes the sidebar
+		cy.get('body').type('n')
+		cy.get('nav').should('have.attr', 'aria-hidden', 'true')
+		cy.get('nav').should('have.attr', 'inert')
+	})
+})

l10n/messages.pot

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

package.json

@@ -99,6 +99,7 @@
     "splitpanes": "^2.4.1",
     "string-length": "^5.0.1",
     "striptags": "^3.2.0",
+    "tabbable": "^6.2.0",
     "tributejs": "^5.1.3",
     "unified": "^11.0.1",
     "unist-builder": "^4.0.0",

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -168,14 +168,18 @@ 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 Vue from 'vue'
+
+import { getTrapStack } from '../../utils/focusTrap.js'
+import { logger } from '../../utils/logger.ts'
+import { useHotKey } from '../../composables/useHotKey/index.js'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
 
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
-import Vue from 'vue'
 
 export default {
 	name: 'NcAppNavigation',
@@ -249,6 +253,12 @@ export default {
 			escapeDeactivates: false,
 		})
 		this.toggleFocusTrap()
+
+		// N opens + focuses the navigation
+		useHotKey('n', this.onKeyDown, {
+			prevent: true,
+			stop: true,
+		})
 	},
 	unmounted() {
 		this.setHasAppNavigation(false)
@@ -262,7 +272,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', {
@@ -275,6 +285,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,
@@ -299,10 +315,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/NcAppNavigationToggle/NcAppNavigationToggle.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/NcAvatar/NcAvatar.vue

@@ -239,13 +239,13 @@ import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 import usernameToColor from '../../functions/usernameToColor/index.js'
-import { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'
 import { getAvatarUrl } from '../../utils/getAvatarUrl.ts'
+import { getEnabledContactsMenuActions } from '../../functions/contactsMenu/index.ts'
+import { getRoute } from '../../components/NcRichText/autolink.js'
 import { getUserStatusText } from '../../utils/UserStatus.ts'
-import { userStatus } from '../../mixins/index.js'
+import { logger } from '../../utils/logger.ts'
 import { t } from '../../l10n.js'
-import { getRoute } from '../../components/NcRichText/autolink.js'
-import logger from '../../utils/logger.js'
+import { userStatus } from '../../mixins/index.js'
 
 import axios from '@nextcloud/axios'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'

src/components/NcPasswordField/NcPasswordField.vue

@@ -106,17 +106,18 @@ export default {
 </template>
 
 <script>
+import { generateOcsUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+import axios from '@nextcloud/axios'
+import debounce from 'debounce'
 
 import Eye from 'vue-material-design-icons/Eye.vue'
 import EyeOff from 'vue-material-design-icons/EyeOff.vue'
-import NcInputField from '../NcInputField/NcInputField.vue'
-import debounce from 'debounce'
-import axios from '@nextcloud/axios'
-import { loadState } from '@nextcloud/initial-state'
-import { generateOcsUrl } from '@nextcloud/router'
+
+import { logger } from '../../utils/logger.ts'
 import { t } from '../../l10n.js'
-import logger from '../../utils/logger.js'
 import { useModelMigration } from '../../composables/useModelMigration.ts'
+import NcInputField from '../NcInputField/NcInputField.vue'
 
 /**
  * @typedef PasswordPolicy

src/functions/contactsMenu/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import logger from '../../utils/logger.js'
+import { logger } from '../../utils/logger.ts'
 
 // Taken from \OC\Contacts\ContactsMenu\Entry::jsonSerialize
 export interface ContactsMenuEntry {

src/utils/logger.js → src/utils/logger.ts

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

tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js

@@ -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', () => {