Merge pull request #5097 from nextcloud-libraries/chore/noid/merge-ma…

…ster-next

[next] chore(master): merge `master` into `next`

l10n/cs_CZ.pot

@@ -68,6 +68,9 @@ msgstr "Modrofialová"
 msgid "Boston Blue"
 msgstr "Bostonská modrá"
 
+msgid "busy"
+msgstr "zaneprádněn(a)"
+
 msgid "Cancel changes"
 msgstr "Zrušit změny"
 
@@ -101,6 +104,9 @@ msgstr "Zavřít inteligentní výběr"
 msgid "Collapse menu"
 msgstr "Sbalit nabídku"
 
+msgid "Color picker"
+msgstr "Výběr barev"
+
 msgid "Confirm changes"
 msgstr "Potvrdit změny"
 
@@ -120,6 +126,9 @@ msgstr "nerušit"
 msgid "Edit item"
 msgstr "Upravit položku"
 
+msgid "Emoji picker"
+msgstr "Výběr emotikon"
+
 msgid "Enter link"
 msgstr "Zadat odkaz"
 

l10n/de.pot

@@ -73,6 +73,9 @@ msgstr "Blau Violett"
 msgid "Boston Blue"
 msgstr "Boston-Blau"
 
+msgid "busy"
+msgstr "Beschäftigt"
+
 msgid "Cancel changes"
 msgstr "Änderungen verwerfen"
 

l10n/de_DE.pot

@@ -1,7 +1,7 @@
 # 
 # Translators:
 # John Molakvoæ <[email protected]>, 2023
-# Mark Ziegler <[email protected]>, 2023
+# Mark Ziegler <[email protected]>, 2024
 # Mario Siegmann <[email protected]>, 2024
 # 
 msgid ""
@@ -72,6 +72,9 @@ msgstr "Blau Violett"
 msgid "Boston Blue"
 msgstr "Boston-Blau"
 
+msgid "busy"
+msgstr "Beschäftigt"
+
 msgid "Cancel changes"
 msgstr "Änderungen verwerfen"
 
@@ -105,6 +108,9 @@ msgstr "Smart Picker schließen"
 msgid "Collapse menu"
 msgstr "Menü einklappen"
 
+msgid "Color picker"
+msgstr "Farbauswahl"
+
 msgid "Confirm changes"
 msgstr "Änderungen bestätigen"
 
@@ -124,6 +130,9 @@ msgstr "Bitte nicht stören"
 msgid "Edit item"
 msgstr "Element bearbeiten"
 
+msgid "Emoji picker"
+msgstr "Emoji-Auswahl"
+
 msgid "Enter link"
 msgstr "Link eingeben"
 
@@ -168,6 +177,9 @@ msgstr "Passwort verbergen"
 msgid "invisible"
 msgstr "Unsichtbar"
 
+msgid "Keyboard navigation help"
+msgstr "Tastatur-Navigationshilfe"
+
 msgid "Load more \"{options}\""
 msgstr "Weitere \"{options}\" laden"
 
@@ -321,6 +333,12 @@ msgstr "Einstellungen für die Navigation"
 msgid "Show password"
 msgstr "Passwort anzeigen"
 
+msgid "Skip to app navigation"
+msgstr "Zur App-Navigation springen"
+
+msgid "Skip to main content"
+msgstr "Zum Hauptinhalt springen"
+
 msgid "Smart Picker"
 msgstr "Smart Picker"
 

l10n/es.pot

@@ -73,6 +73,9 @@ msgstr "Violeta Azul"
 msgid "Boston Blue"
 msgstr "Azul Boston"
 
+msgid "busy"
+msgstr "ocupado"
+
 msgid "Cancel changes"
 msgstr "Cancelar cambios"
 
@@ -225,6 +228,9 @@ msgstr "Abrir menú"
 msgid "Open navigation"
 msgstr "Abrir navegación"
 
+msgid "Options"
+msgstr "Opciones"
+
 msgid "Password is secure"
 msgstr "La contraseña es segura"
 

l10n/messages.pot

@@ -96,6 +96,9 @@ msgstr ""
 msgid "Collapse menu"
 msgstr ""
 
+msgid "Color picker"
+msgstr ""
+
 msgid "Confirm changes"
 msgstr ""
 
@@ -115,6 +118,9 @@ msgstr ""
 msgid "Edit item"
 msgstr ""
 
+msgid "Emoji picker"
+msgstr ""
+
 msgid "Enter link"
 msgstr ""
 
@@ -155,6 +161,9 @@ msgstr ""
 msgid "invisible"
 msgstr ""
 
+msgid "Keyboard navigation help"
+msgstr ""
+
 msgid "Load more \"{options}\""
 msgstr ""
 
@@ -307,6 +316,12 @@ msgstr ""
 msgid "Show password"
 msgstr ""
 
+msgid "Skip to app navigation"
+msgstr ""
+
+msgid "Skip to main content"
+msgstr ""
+
 msgid "Smart Picker"
 msgstr ""
 

src/components/NcActions/NcActions.vue

@@ -1264,9 +1264,15 @@ export default {
 		this.isSemanticMenu = hasMenuItemAction && !hasTextInputAction
 		// We consider the NcActions to be navigation if it consists some link-like action
 		this.isSemanticNavigation = hasLinkAction && !hasMenuItemAction && !hasTextInputAction
-		// If it is no a manu and not a navigation, it is a popover with items: a form or just a text
+		// If it is not a menu and not a navigation, it is a popover with items: a form or just a text
 		this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation
 
+		const popupRole = this.isSemanticMenu
+			? 'menu'
+			: hasTextInputAction
+				? 'dialog'
+				: 'true'
+
 		/**
 		 * Filter and list actions that are allowed to be displayed inline
 		 */
@@ -1348,7 +1354,11 @@ export default {
 					container: this.container,
 					...this.manualOpen && { triggers: [] },
 					popoverBaseClass: 'action-item__popper',
-					setReturnFocus: this.$refs.menuButton?.$el,
+					popupRole,
+					// Menu and navigation should not have focus trap
+					// Tab should close the menu and move focus to the next UI element
+					setReturnFocus: !this.isSemanticPopoverLike ? null : this.$refs.menuButton?.$el,
+					focusTrap: this.isSemanticPopoverLike,
 					onShow: this.openMenu,
 					onAfterShow: this.onOpen,
 					onHide: this.closeMenu,
@@ -1360,11 +1370,8 @@ export default {
 						disabled: this.disabled,
 						ariaHidden: this.ariaHidden,
 						ref: 'menuButton',
-						'aria-haspopup': this.isSemanticMenu ? 'menu' : null,
 						'aria-label': this.menuName ? null : this.ariaLabel,
 						'aria-controls': this.opened ? this.randomId : null,
-						// Do not add aria-expanded="true" when it is closed
-						'aria-expanded': this.opened ? 'true' : null,
 						onFocus: this.onFocus,
 						onBlur: this.onBlur,
 					}, {
@@ -1383,7 +1390,8 @@ export default {
 						h('ul', {
 							id: this.randomId,
 							tabindex: '-1',
-							role: this.isSemanticMenu ? 'menu' : null,
+							role: popupRole !== 'true' ? popupRole : undefined,
+							// TODO: allow to provide dialog aria-label
 						}, [
 							actions,
 						]),

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -78,21 +78,29 @@ emit('toggle-navigation', {
 </template>
 
 <script>
-import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
+import { warn } from 'vue'
+
 export default {
 	name: 'NcAppNavigation',
 
 	components: {
 		NcAppNavigationToggle,
 	},
 
+	// Injected from NcContent
+	inject: {
+		setHasAppNavigation: {
+			default: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),
+			from: 'NcContent:setHasAppNavigation',
+		},
+	},
+
 	props: {
 		/**
 		 * The aria label to describe the navigation
@@ -135,6 +143,7 @@ export default {
 	},
 
 	mounted() {
+		this.setHasAppNavigation(true)
 		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		// Emit an event with the initial state of the navigation
 		emit('navigation-toggled', {
@@ -150,6 +159,7 @@ export default {
 		this.toggleFocusTrap()
 	},
 	unmounted() {
+		this.setHasAppNavigation(false)
 		unsubscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		this.focusTrap.deactivate()
 	},
@@ -161,6 +171,14 @@ export default {
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
 		toggleNavigation(state) {
+			// Early return if alreay in that state
+			if (this.open === state) {
+				emit('navigation-toggled', {
+					open: this.open,
+				})
+				return
+			}
+
 			this.open = (typeof state === 'undefined') ? !this.open : state
 			const bodyStyles = getComputedStyle(document.body)
 			const animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -141,23 +141,22 @@ export default {
 
 <template>
 	<NcDialog v-if="open"
+		:navigation-aria-label="settingsNavigationAriaLabel"
 		v-bind="dialogProperties"
 		@update:open="handleCloseModal">
 		<template v-if="hasNavigation" #navigation="{ isCollapsed }">
 			<ul v-if="!isCollapsed"
-				:aria-label="settingsNavigationAriaLabel"
-				class="navigation-list"
-				role="tablist">
+				class="navigation-list">
 				<li v-for="section in sections" :key="section.id">
-					<a :aria-selected="section.id === selectedSection"
+					<a :aria-current="`${section.id === selectedSection}`"
 						:class="{
 							'navigation-list__link': true,
 							'navigation-list__link--active': section.id === selectedSection,
 							'navigation-list__link--icon': hasNavigationIcons,
 						}"
-						role="tab"
+						:href="`#settings-section_${section.id}`"
 						tabindex="0"
-						@click="handleSettingsNavigationClick(section.id)"
+						@click.prevent="handleSettingsNavigationClick(section.id)"
 						@keydown.enter="handleSettingsNavigationClick(section.id)">
 						<div v-if="hasNavigationIcons" class="navigation-list__link-icon">
 							<NcVNodes v-if="section.icon" :vnodes="section.icon" />