Add a11y attributes for legacy app navigation

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

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

diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
index 8a2cddb3f52a0afba364f535f63f6b713d63e4af..d7ae7dd7fee8750fd9d79e69d0c0e4a633418245 100644 (file)
--- 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 3c333d39fc064a6ce579b2e4cfaf725ef3b44cf3..91fdfa32b10b2c35fbbd20fa687f892782866733 100644 (file)
--- 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 6450b3a36ecfa565c4f555e3ab06015e8c54d2c4..763bc430133a675bd5491ae42b7935f9ed6e8490 100644 (file)
--- 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 6d017f0767132888cbdfa94129eddfa90fbd6270..c388b03e191e999dc37188a73d0ed09c9ecd3eee 100644 (file)
--- 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>