Add a11y attributes for legacy app navigationa11y/33739/fix-legacy-nav

Aded "role=navigation"
Added "aria-current=page" for the currently selected item.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

4 files changed, 11 insertions, 13 deletions

diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
index 8a2cddb3f52..d7ae7dd7fee 100644
--- a/apps/files/js/navigation.js
+++ b/apps/files/js/navigation.js
@@ -141,13 +141,13 @@
 				}
 				return;
 			}
-			this.$el.find('li a').removeClass('active');
+			this.$el.find('li a').removeClass('active').removeAttr('aria-current');
 			if (this.$currentContent) {
 				this.$currentContent.addClass('hidden');
 				this.$currentContent.trigger(jQuery.Event('hide'));
 			}
 			this._activeItem = itemId;
-			currentItem.children('a').addClass('active');
+			currentItem.children('a').addClass('active').attr('aria-current', 'page');
 			this.$currentContent = $('#app-content-' + (typeof itemView === 'string' && itemView !== '' ? itemView : itemId));
 			this.$currentContent.removeClass('hidden');
 			if (!options || !options.silent) {
diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 3c333d39fc0..91fdfa32b10 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -1,4 +1,4 @@
-<div id="app-navigation">
+<div id="app-navigation" role="navigation">
 	<ul class="with-icon">
 
 		<?php
diff --git a/apps/settings/templates/help.php b/apps/settings/templates/help.php
index 6450b3a36ec..763bc430133 100644
--- a/apps/settings/templates/help.php
+++ b/apps/settings/templates/help.php
@@ -1,12 +1,12 @@
 <?php
 \OC_Util::addStyle('settings', 'help');
 ?>
-<div id="app-navigation">
+<div id="app-navigation" role="navigation">
 	<ul>
 		<li>
 			<a class="icon-user <?php if ($_['mode'] === 'user') {
 	p('active');
-} ?>"
+} ?>" <?php if ($_['mode'] === 'user') { print_unescaped('aria-current="page"'); } ?>
 				href="<?php print_unescaped($_['urlUserDocs']); ?>">
 				<span class="help-list__text">
 					<?php p($l->t('User documentation')); ?>
@@ -17,7 +17,7 @@
 		<li>
 			<a class="icon-user-admin <?php if ($_['mode'] === 'admin') {
 	p('active');
-} ?>"
+} ?>" <?php if ($_['mode'] === 'admin') { print_unescaped('aria-current="page"'); } ?>
 				href="<?php print_unescaped($_['urlAdminDocs']); ?>">
 				<span class="help-list__text">
 					<?php p($l->t('Administrator documentation')); ?>
diff --git a/apps/settings/templates/settings/frame.php b/apps/settings/templates/settings/frame.php
index 6d017f07671..c388b03e191 100644
--- a/apps/settings/templates/settings/frame.php
+++ b/apps/settings/templates/settings/frame.php
@@ -29,7 +29,7 @@ script('files', 'jquery.fileupload');
 
 ?>
 
-<div id="app-navigation">
+<div id="app-navigation" role="navigation">
 	<ul>
 		<?php if (!empty($_['forms']['admin'])) { ?>
 			<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
@@ -39,10 +39,9 @@ script('files', 'jquery.fileupload');
 			if (isset($form['anchor'])) {
 				$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.PersonalSettings.index', ['section' => $form['anchor']]);
 				$class = 'nav-icon-' . $form['anchor'];
-				$sectionName = $form['section-name'];
-				$active = $form['active'] ? ' class="active"' : ''; ?>
+				$sectionName = $form['section-name']; ?>
 				<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?>>
-					<a href="<?php p($anchor); ?>">
+					<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
 						<?php if (!empty($form['icon'])) { ?>
 							<img alt="" src="<?php print_unescaped($form['icon']); ?>">
 							<span><?php p($form['section-name']); ?></span>
@@ -66,10 +65,9 @@ script('files', 'jquery.fileupload');
 			if (isset($form['anchor'])) {
 				$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => $form['anchor']]);
 				$class = 'nav-icon-' . $form['anchor'];
-				$sectionName = $form['section-name'];
-				$active = $form['active'] ? ' class="active"' : ''; ?>
+				$sectionName = $form['section-name']; ?>
 				<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?>>
-					<a href="<?php p($anchor); ?>">
+					<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
 						<?php if (!empty($form['icon'])) { ?>
 							<img alt="" src="<?php print_unescaped($form['icon']); ?>">
 							<span><?php p($form['section-name']); ?></span>