enh(NcContent): Add skip content buttons

Signed-off-by: Ferdinand Thiessen <[email protected]>

package.json

@@ -102,7 +102,8 @@
     "vue": "^2.7.14",
     "vue-color": "^2.8.1",
     "vue-frag": "^1.4.3",
-    "vue2-datepicker": "^3.11.0"
+    "vue2-datepicker": "^3.11.0",
+    "vue2-teleport": "^1.0.1"
   },
   "engines": {
     "node": "^20.0.0",

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -93,6 +93,9 @@ export default {
 		NcAppNavigationToggle,
 	},
 
+	// Injected from NcContent
+	inject: ['setAppNavigation'],
+
 	props: {
 		/**
 		 * The aria label to describe the navigation
@@ -135,6 +138,7 @@ export default {
 	},
 
 	mounted() {
+		this.setAppNavigation(true)
 		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		// Emit an event with the initial state of the navigation
 		emit('navigation-toggled', {
@@ -150,6 +154,7 @@ export default {
 		this.toggleFocusTrap()
 	},
 	unmounted() {
+		this.setAppNavigation(false)
 		unsubscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		this.focusTrap.deactivate()
 	},
@@ -161,6 +166,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/NcContent/NcContent.vue

@@ -28,6 +28,8 @@ This component provides the default container of all apps.
 It _MUST_ be used as the main wrapper of your app.
 It includes the Navigation, the App content and the Sidebar.
 
+It also will set the skip content buttons needed for accessibility.
+
 ### Standard usage
 
 ```vue
@@ -72,18 +74,68 @@ It includes the Navigation, the App content and the Sidebar.
 	<div id="content-vue"
 		:class="`app-${appName.toLowerCase()}`"
 		class="content">
+		<Teleport to="#skip-actions">
+			<NcButton type="primary" href="#app-content-vue">
+				{{ t('Skip to main content') }}
+			</NcButton>
+			<NcButton v-show="hasAppNavigation"
+				type="primary"
+				href="#app-navigation-vue"
+				@click.prevent="openAppNavigation">
+				{{ t('Skip to app navigation') }}
+			</NcButton>
+		</Teleport>
 		<slot />
 	</div>
 </template>
 
 <script>
+import { emit } from '@nextcloud/event-bus'
+import { t } from '../../l10n.js'
+
+import NcButton from '../NcButton/NcButton.vue'
+// TODO: This is built-in for vue3 just drop the import
+import Teleport from 'vue2-teleport'
+
 export default {
+	name: 'NcContent',
+	components: {
+		NcButton,
+		Teleport,
+	},
+	provide() {
+		return {
+			setAppNavigation: this.setAppNavigation,
+		}
+	},
 	props: {
 		appName: {
 			type: String,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			hasAppNavigation: false,
+		}
+	},
+	beforeMount() {
+		const container = document.getElementById('skip-actions')
+		if (container) {
+			// clear default buttons
+			container.innerHTML = ''
+		}
+	},
+	methods: {
+		t,
+		openAppNavigation() {
+			emit('toggle-navigation', { open: true })
+			this.$nextTick(() => { window.location.hash = 'app-navigation-vue' })
+		},
+		setAppNavigation(value) {
+			this.hasAppNavigation = value
+		},
+	},
 }
 </script>