Merge pull request #22925 from nextcloud/dashboard/fix-skip-links

Dashboard: Fix accessibility skip links

Author: rullzer

apps/dashboard/css/dashboard.scss

@@ -1,3 +1,12 @@
+// Suppress "Skip to navigation of app" link since the app does not have a navigation
+.skip-navigation:not(.skip-content) {
+	display: none;
+}
+// Fix position of "Skip to main content" link since the other link is gone
+.skip-navigation.skip-content {
+	left: 3px;
+}
+
 #header {
 	background: transparent !important;
 	--color-header: rgba(24, 24, 24, 1);

apps/dashboard/js/dashboard.js

@@ -215,6 +215,7 @@ export default {
 	},
 	mounted() {
 		this.updateGlobalStyles()
+		this.updateSkipLink()
 		window.addEventListener('scroll', this.handleScroll)
 
 		setInterval(() => {
@@ -321,6 +322,10 @@ export default {
 				document.body.classList.remove('dashboard--dark')
 			}
 		},
+		updateSkipLink() {
+			// Make sure "Skip to main content" link points to the app content
+			document.getElementsByClassName('skip-navigation')[0].setAttribute('href', '#app-dashboard')
+		},
 		updateStatusCheckbox(app, checked) {
 			if (checked) {
 				this.enableStatus(app)