Add a11y attributes for legacy app navigation

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

Signed-off-by: Vincent Petry <[email protected]>

Author: PVince81

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) {

apps/files/templates/appnavigation.php

@@ -1,4 +1,4 @@
-<div id="app-navigation">
+<div id="app-navigation" role="navigation">
 	<ul class="with-icon">
 
 		<?php

apps/settings/templates/help.php

@@ -1,7 +1,7 @@
 <?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') {

apps/settings/templates/settings/frame.php

@@ -29,7 +29,7 @@
 
 ?>
 
-<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 @@
 			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 @@
 			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>