diff options
author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2018-04-18 14:33:08 +0300 |
---|---|---|
committer | Morris Jobke <hey@morrisjobke.de> | 2018-05-09 12:37:58 +0300 |
commit | 0dc52bf1c9039288b9cfaa1fef944f286a6f34aa (patch) | |
tree | c4608a47d6879d9175527fd523e4966e0d781178 /core | |
parent | 44255faab38e003ed39c1b2e74ce68d7b509d504 (diff) |
Add proper ARIA attributes and structure to header for accessibility, thanks to @MarcoZehe
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'core')
-rw-r--r-- | core/js/js.js | 8 | ||||
-rw-r--r-- | core/templates/layout.user.php | 31 |
2 files changed, 28 insertions, 11 deletions
diff --git a/core/js/js.js b/core/js/js.js index 872761c02bb..7fc911a302c 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -677,6 +677,10 @@ var OCP = {}, // close it self.hideMenus(); } + + // Set menu to expanded + $toggle.attr('aria-expanded', true); + $menuEl.slideToggle(OC.menuSpeed, toggle); OC._currentMenu = $menuEl; OC._currentMenuToggle = $toggle; @@ -711,6 +715,10 @@ var OCP = {}, } }); } + + // Set menu to closed + $('.menutoggle').attr('aria-expanded', false); + OC._currentMenu = null; OC._currentMenuToggle = null; }, diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 32762e2c240..86e9f50f43c 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -45,8 +45,9 @@ <?php foreach ($_['navigation'] as $entry): ?> <li data-id="<?php p($entry['id']); ?>" class="hidden"> <a href="<?php print_unescaped($entry['href']); ?>" - <?php if ($entry['active']): ?> class="active"<?php endif; ?>> - <svg width="20" height="20" viewBox="0 0 20 20"> + <?php if ($entry['active']): ?> class="active"<?php endif; ?> + aria-label="<?php p($entry['name']); ?>"> + <svg width="20" height="20" viewBox="0 0 20 20" alt=""> <?php if ($_['themingInvertMenu']) { ?> <defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs> <?php } ?> @@ -60,7 +61,8 @@ </span> </li> <?php endforeach; ?> - <li id="more-apps" class="menutoggle"> + <li id="more-apps" class="menutoggle" + aria-haspopup="true" aria-controls="navigation" aria-expanded="false"> <a href="#"> <div class="icon-more-white"></div> <span><?php p($l->t('More apps')); ?></span> @@ -75,8 +77,9 @@ <?php foreach($_['navigation'] as $entry): ?> <li data-id="<?php p($entry['id']); ?>"> <a href="<?php print_unescaped($entry['href']); ?>" - <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>> - <svg width="16" height="16" viewBox="0 0 16 16"> + <?php if( $entry['active'] ): ?> class="active"<?php endif; ?> + aria-label="<?php p($entry['name']); ?>"> + <svg width="16" height="16" viewBox="0 0 16 16" alt=""> <defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs> <image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon"></image> </svg> @@ -103,11 +106,17 @@ <button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button> </form> <div id="contactsmenu"> - <div class="icon-contacts menutoggle" tabindex="0" role="link"></div> - <div class="menu"></div> + <div class="icon-contacts menutoggle" tabindex="0" role="button" + aria-haspopup="true" aria-controls="contactsmenu-menu" aria-expanded="false"> + <span class="hidden-visually"><?php p($l->t('Contacts'));?> + </div> + <div id="contactsmenu-menu" class="menu" + aria-label="<?php p($l->t('Contacts menu'));?>"></div> </div> <div id="settings"> - <div id="expand" tabindex="0" role="link" class="menutoggle"> + <div id="expand" tabindex="0" role="button" class="menutoggle" + aria-label="<?php p($l->t('Settings'));?>" + aria-haspopup="true" aria-controls="expanddiv" aria-expanded="false"> <div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>"> <?php if ($_['userAvatarSet']): ?> <img alt="" width="32" height="32" @@ -118,7 +127,8 @@ </div> <div id="expandDisplayName" class="icon-settings-white"></div> </div> - <div id="expanddiv" style="display:none;"> + <nav id="expanddiv" style="display:none;" + aria-label="<?php p($l->t('Settings menu'));?>"> <ul> <?php foreach($_['settingsnavigation'] as $entry):?> <li> @@ -130,8 +140,7 @@ </li> <?php endforeach; ?> </ul> - - </div> + </nav> </div> </div> </div></header> |