mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9433 from nextcloud/backport/9224/accessibility-improvements-13 

[stable13] Add labels for Contacts menu and Settings
This commit is contained in:
Roeland Jago Douma 2018-05-10 09:30:56 +02:00 committed by GitHub
parent e2f5355f73 223f034068
commit 3a013b127c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 54 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/files/css/detailsView.scss
View File

@ -100,7 +100,7 @@
} }
#app-sidebar .file-details { #app-sidebar .file-details {
color: #999; color: $color-text-details;
} }
#app-sidebar .action-favorite { #app-sidebar .action-favorite {

7
apps/files/css/files.scss
View File

@ -147,10 +147,9 @@ table tr.mouseOver td {
tbody a { color: $color-main-text; } tbody a { color: $color-main-text; }
span.conflict-path, span.extension, span.uploading, td.date { span.conflict-path, span.extension, span.uploading, td.date {
color: #999; color: $color-text-details;
} }
span.conflict-path, span.extension { span.conflict-path, span.extension {
opacity: .7;
-webkit-transition: opacity 300ms; -webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms; -moz-transition: opacity 300ms;
-o-transition: opacity 300ms; -o-transition: opacity 300ms;
@ -162,11 +161,11 @@ tr:focus span.conflict-path,
tr:hover span.extension, tr:hover span.extension,
tr:focus span.extension { tr:focus span.extension {
opacity: 1; opacity: 1;
color: #777; color: $color-text-details;
} }
table th, table th a { table th, table th a {
color: #999; color: $color-text-details;
} }
table.multiselect th a { table.multiselect th a {
color: #000; color: #000;

10
apps/files/js/filelist.js
View File

@ -1327,7 +1327,9 @@
// size column // size column
if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) { if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) {
simpleSize = humanFileSize(parseInt(fileData.size, 10), true); simpleSize = humanFileSize(parseInt(fileData.size, 10), true);
sizeColor = Math.round(160-Math.pow((fileData.size/(1024*1024)),2)); // rgb(118, 118, 118) / #767676
// min. color contrast for normal text on white background according to WCAG AA
sizeColor = Math.round(118-Math.pow((fileData.size/(1024*1024)),2));
} else { } else {
simpleSize = t('files', 'Pending'); simpleSize = t('files', 'Pending');
} }
@ -1342,8 +1344,10 @@
// difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5) // difference in days multiplied by 5 - brightest shade for files older than 32 days (160/5)
var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 ); var modifiedColor = Math.round(((new Date()).getTime() - mtime )/1000/60/60/24*5 );
// ensure that the brightest color is still readable // ensure that the brightest color is still readable
if (modifiedColor >= '160') { // rgb(118, 118, 118) / #767676
modifiedColor = 160; // min. color contrast for normal text on white background according to WCAG AA
if (modifiedColor >= '118') {
modifiedColor = 118;
} }
var formatted; var formatted;
var text; var text;

5
core/css/variables.scss
View File

@ -7,6 +7,11 @@ $color-warning: #ffcc44;
$color-success: #46ba61; $color-success: #46ba61;
$color-primary-element: $color-primary; $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) { @function nc-darken($color, $value) {
@return darken($color, $value); @return darken($color, $value);
} }

8
core/js/js.js
View File

@ -677,6 +677,10 @@ var OCP = {},
// close it // close it
self.hideMenus(); self.hideMenus();
} }
// 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;
@ -711,6 +715,10 @@ var OCP = {},
} }
}); });
} }
// Set menu to closed
$('.menutoggle').attr('aria-expanded', false);
OC._currentMenu = null; OC._currentMenu = null;
OC._currentMenuToggle = null; OC._currentMenuToggle = null;
}, },

2
core/templates/layout.base.php
View File

@ -7,7 +7,7 @@
</title> </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="never"> <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()); ?>"> <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="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')); ?>"> <link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>">

4
core/templates/layout.guest.php
View File

@ -7,7 +7,7 @@
</title> </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="never"> <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="apple-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
<meta name="theme-color" content="<?php p($theme->getColorPrimary()); ?>"> <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="icon" href="<?php print_unescaped(image_path('', 'favicon.ico')); /* IE11+ supports png */ ?>">
@ -37,7 +37,9 @@
</div> </div>
</header> </header>
<?php endif; ?> <?php endif; ?>
<main>
<?php print_unescaped($_['content']); ?> <?php print_unescaped($_['content']); ?>
</main>
</div> </div>
</div> </div>
<footer role="contentinfo"> <footer role="contentinfo">

37
core/templates/layout.user.php
View File

@ -10,7 +10,7 @@
</title> </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="never"> <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-itunes-app" content="app-id=<?php p($theme->getiTunesAppId()); ?>">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
@ -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,8 +61,9 @@
</span> </span>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>
<li id="more-apps" class="menutoggle"> <li id="more-apps" class="menutoggle"
<a href="#"> 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> <div class="icon-more-white"></div>
<span><?php p($l->t('More apps')); ?></span> <span><?php p($l->t('More apps')); ?></span>
</a> </a>
@ -69,14 +71,15 @@
</ul> </ul>
<nav role="navigation"> <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"> <div id="apps">
<ul> <ul>
<?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>

2
core/templates/login.php
View File

@ -37,6 +37,7 @@ script('core', 'merged-login');
<p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <p class="grouptop<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
<input type="text" name="user" id="user" <input type="text" name="user" id="user"
placeholder="<?php p($l->t('Username or email')); ?>" placeholder="<?php p($l->t('Username or email')); ?>"
aria-label="<?php p($l->t('Username or email')); ?>"
value="<?php p($_['loginName']); ?>" value="<?php p($_['loginName']); ?>"
<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?> <?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
autocomplete="on" autocapitalize="none" autocorrect="off" required> autocomplete="on" autocapitalize="none" autocorrect="off" required>
@ -46,6 +47,7 @@ script('core', 'merged-login');
<p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>"> <p class="groupbottom<?php if (!empty($_['invalidpassword'])) { ?> shake<?php } ?>">
<input type="password" name="password" id="password" value="" <input type="password" name="password" id="password" value=""
placeholder="<?php p($l->t('Password')); ?>" placeholder="<?php p($l->t('Password')); ?>"
aria-label="<?php p($l->t('Password')); ?>"
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?> <?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
autocomplete="on" autocapitalize="off" autocorrect="none" required> autocomplete="on" autocapitalize="off" autocorrect="none" required>
<label for="password" class="infield"><?php p($l->t('Password')); ?></label> <label for="password" class="infield"><?php p($l->t('Password')); ?></label>