From 0dc52bf1c9039288b9cfaa1fef944f286a6f34aa Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 13:33:08 +0200 Subject: [PATCH 1/5] Add proper ARIA attributes and structure to header for accessibility, thanks to @MarcoZehe Signed-off-by: Jan-Christoph Borchardt --- core/js/js.js | 8 ++++++++ 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 @@ -
  • class="active"> - + class="active" + aria-label=""> + @@ -103,11 +106,17 @@ t('Reset search'));?>
    -
    -
    + +
    -
    From e7d6410f25308cb8f1c4e189b97fce3a497008e6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 15:38:30 +0200 Subject: [PATCH 2/5] Ensure proper color contrast according to WCAG AA Signed-off-by: Jan-Christoph Borchardt --- apps/files/css/detailsView.scss | 2 +- apps/files/css/files.scss | 7 +++---- apps/files/js/filelist.js | 10 +++++++--- core/css/variables.scss | 5 +++++ 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss index 7393a459b8d..334fc0c8fd8 100644 --- a/apps/files/css/detailsView.scss +++ b/apps/files/css/detailsView.scss @@ -100,7 +100,7 @@ } #app-sidebar .file-details { - color: #999; + color: $color-text-details; } #app-sidebar .action-favorite { diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 6cd3086c64f..fc8c6d2d225 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -147,10 +147,9 @@ table tr.mouseOver td { tbody a { color: $color-main-text; } span.conflict-path, span.extension, span.uploading, td.date { - color: #999; + color: $color-text-details; } span.conflict-path, span.extension { - opacity: .7; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; @@ -162,11 +161,11 @@ tr:focus span.conflict-path, tr:hover span.extension, tr:focus span.extension { opacity: 1; - color: #777; + color: $color-text-details; } table th, table th a { - color: #999; + color: $color-text-details; } table.multiselect th a { color: #000; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 1b924e0e22f..8b311e57d1b 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1327,7 +1327,9 @@ // size column if (typeof(fileData.size) !== 'undefined' && fileData.size >= 0) { 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 { simpleSize = t('files', 'Pending'); } @@ -1342,8 +1344,10 @@ // 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 ); // ensure that the brightest color is still readable - if (modifiedColor >= '160') { - modifiedColor = 160; + // rgb(118, 118, 118) / #767676 + // min. color contrast for normal text on white background according to WCAG AA + if (modifiedColor >= '118') { + modifiedColor = 118; } var formatted; var text; 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); } From 2f88376674168fe6d11b167d6acbbcb32a8ddc9a Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 15:40:47 +0200 Subject: [PATCH 3/5] Add aria-label to more-apps menu as well Signed-off-by: Jan-Christoph Borchardt --- core/templates/layout.user.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 86e9f50f43c..d63c598e11c 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -63,7 +63,7 @@