Add proper ARIA attributes and structure to header for accessibility, thanks to @MarcoZehe
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
b2a87f84c4
commit
df3c1ac283
|
@ -702,6 +702,9 @@ var OCP = {},
|
||||||
$menuEl.parent().addClass('openedMenu');
|
$menuEl.parent().addClass('openedMenu');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set menu to expanded
|
||||||
|
$toggle.attr('aria-expanded', true);
|
||||||
|
|
||||||
$menuEl.slideToggle(OC.menuSpeed, toggle);
|
$menuEl.slideToggle(OC.menuSpeed, toggle);
|
||||||
OC._currentMenu = $menuEl;
|
OC._currentMenu = $menuEl;
|
||||||
OC._currentMenuToggle = $toggle;
|
OC._currentMenuToggle = $toggle;
|
||||||
|
@ -736,6 +739,10 @@ var OCP = {},
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Set menu to closed
|
||||||
|
$('.menutoggle').attr('aria-expanded', false);
|
||||||
|
|
||||||
$('.openedMenu').removeClass('openedMenu');
|
$('.openedMenu').removeClass('openedMenu');
|
||||||
OC._currentMenu = null;
|
OC._currentMenu = null;
|
||||||
OC._currentMenuToggle = null;
|
OC._currentMenuToggle = null;
|
||||||
|
|
|
@ -45,8 +45,9 @@
|
||||||
<?php foreach ($_['navigation'] as $entry): ?>
|
<?php foreach ($_['navigation'] as $entry): ?>
|
||||||
<li data-id="<?php p($entry['id']); ?>" class="hidden">
|
<li data-id="<?php p($entry['id']); ?>" class="hidden">
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
<a href="<?php print_unescaped($entry['href']); ?>"
|
||||||
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
|
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
aria-label="<?php p($entry['name']); ?>">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" alt="">
|
||||||
<?php if ($_['themingInvertMenu']) { ?>
|
<?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>
|
<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 } ?>
|
<?php } ?>
|
||||||
|
@ -60,7 +61,8 @@
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?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="#">
|
<a href="#">
|
||||||
<div class="icon-more-white"></div>
|
<div class="icon-more-white"></div>
|
||||||
<span><?php p($l->t('More apps')); ?></span>
|
<span><?php p($l->t('More apps')); ?></span>
|
||||||
|
@ -75,8 +77,9 @@
|
||||||
<?php foreach($_['navigation'] as $entry): ?>
|
<?php foreach($_['navigation'] as $entry): ?>
|
||||||
<li data-id="<?php p($entry['id']); ?>">
|
<li data-id="<?php p($entry['id']); ?>">
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
<a href="<?php print_unescaped($entry['href']); ?>"
|
||||||
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
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>
|
<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>
|
<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>
|
</svg>
|
||||||
|
@ -103,11 +106,17 @@
|
||||||
<button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button>
|
<button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button>
|
||||||
</form>
|
</form>
|
||||||
<div id="contactsmenu">
|
<div id="contactsmenu">
|
||||||
<div class="icon-contacts menutoggle" tabindex="0" role="link"></div>
|
<div class="icon-contacts menutoggle" tabindex="0" role="button"
|
||||||
<div class="menu"></div>
|
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>
|
||||||
<div id="settings">
|
<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'); } ?>">
|
<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
|
||||||
<?php if ($_['userAvatarSet']): ?>
|
<?php if ($_['userAvatarSet']): ?>
|
||||||
<img alt="" width="32" height="32"
|
<img alt="" width="32" height="32"
|
||||||
|
@ -118,7 +127,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="expandDisplayName" class="icon-settings-white"></div>
|
<div id="expandDisplayName" class="icon-settings-white"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="expanddiv" style="display:none;">
|
<nav id="expanddiv" style="display:none;"
|
||||||
|
aria-label="<?php p($l->t('Settings menu'));?>">
|
||||||
<ul>
|
<ul>
|
||||||
<?php foreach($_['settingsnavigation'] as $entry):?>
|
<?php foreach($_['settingsnavigation'] as $entry):?>
|
||||||
<li>
|
<li>
|
||||||
|
@ -130,8 +140,7 @@
|
||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></header>
|
</div></header>
|
||||||
|
|
Loading…
Reference in New Issue