diff options
author | Roeland Jago Douma <rullzer@users.noreply.github.com> | 2018-05-10 10:30:56 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-10 10:30:56 +0300 |
commit | 3a013b127cedb9ce6d834de67fd87da932a0cc36 (patch) | |
tree | ba89d3e9270183ea9dc682a2e9040b920671241b /core | |
parent | e2f5355f731b5898277317722a6ae1e8de39a684 (diff) | |
parent | 223f034068dcde41a7ee4fb875437d52cb37d1dc (diff) |
Merge pull request #9433 from nextcloud/backport/9224/accessibility-improvements-13
[stable13] Add labels for Contacts menu and Settings
Diffstat (limited to 'core')
-rw-r--r-- | core/css/variables.scss | 5 | ||||
-rw-r--r-- | core/js/js.js | 8 | ||||
-rw-r--r-- | core/templates/layout.base.php | 2 | ||||
-rw-r--r-- | core/templates/layout.guest.php | 6 | ||||
-rw-r--r-- | core/templates/layout.user.php | 37 | ||||
-rw-r--r-- | core/templates/login.php | 2 |
6 files changed, 43 insertions, 17 deletions
diff --git a/core/css/variables.scss b/core/css/variables.scss index 2e4e9028b30..a60460a3088 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -7,6 +7,11 @@ $color-warning: #ffcc44; $color-success: #46ba61; $color-primary-element: $color-primary; +// rgb(118, 118, 118) / #767676 +// min. color contrast for normal text on white background according to WCAG AA +// (Works as well: color: #000; opacity: 0.57;) +$color-text-details: #767676; + @function nc-darken($color, $value) { @return darken($color, $value); } 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.base.php b/core/templates/layout.base.php index 7c1fe79e79d..dcb7b554b22 100644 --- a/core/templates/layout.base.php +++ b/core/templates/layout.base.php @@ -7,7 +7,7 @@ </title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="never"> - <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>"> <link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>"> <link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>"> diff --git a/core/templates/layout.guest.php b/core/templates/layout.guest.php index 4d06fc294d5..b68dab805f4 100644 --- a/core/templates/layout.guest.php +++ b/core/templates/layout.guest.php @@ -7,7 +7,7 @@ </title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="never"> - <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>"> <meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>"> <link rel="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>"> @@ -37,7 +37,9 @@ </div> </header> <?php endif; ?> - <?php print_unescaped($_['content']); ?> + <main> + <?php print_unescaped($_['content']); ?> + </main> </div> </div> <footer role="contentinfo"> diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 32762e2c240..991eedce5d7 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -10,7 +10,7 @@ </title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="never"> - <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> @@ -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,8 +61,9 @@ </span> </li> <?php endforeach; ?> - <li id="more-apps" class="menutoggle"> - <a href="#"> + <li id="more-apps" class="menutoggle" + aria-haspopup="true" aria-controls="navigation" aria-expanded="false"> + <a href="#" aria-label="<?php p($l->t('More apps')); ?>"> <div class="icon-more-white"></div> <span><?php p($l->t('More apps')); ?></span> </a> @@ -69,14 +71,15 @@ </ul> <nav role="navigation"> - <div id="navigation" style="display: none;"> + <div id="navigation" style="display: none;" aria-label="<?php p($l->t('More apps menu')); ?>"> <div id="apps"> <ul> <?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> diff --git a/core/templates/login.php b/core/templates/login.php index de991e08d97..7e9b339eaa5 100644 --- a/core/templates/login.php +++ b/core/templates/login.php @@ -37,6 +37,7 @@ script('core', 'merged-login'); <p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <input type="text" name="user" id="user" placeholder="<?php p($l->t('Username or email')); ?>" + aria-label="<?php p($l->t('Username or email')); ?>" value="<?php p($_['loginName']); ?>" <?php p($_['user_autofocus'] ? 'autofocus' : ''); ?> autocomplete="on" autocapitalize="none" autocorrect="off" required> @@ -46,6 +47,7 @@ script('core', 'merged-login'); <p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <input type="password" name="password" id="password" value="" placeholder="<?php p($l->t('Password')); ?>" + aria-label="<?php p($l->t('Password')); ?>" <?php p($_['user_autofocus'] ? '' : 'autofocus'); ?> autocomplete="on" autocapitalize="off" autocorrect="none" required> <label for="password" class="infield"><?php p($l->t('Password')); ?></label> |