From df3c1ac283d6ba665b0d761d5b47a15e544da990 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 13:33:08 +0200 Subject: Add proper ARIA attributes and structure to header for accessibility, thanks to @MarcoZehe Signed-off-by: Jan-Christoph Borchardt --- core/js/js.js | 7 +++++++ core/templates/layout.user.php | 31 ++++++++++++++++++++----------- 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/core/js/js.js b/core/js/js.js index 3d5f489895d..d7975804f4b 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -702,6 +702,9 @@ var OCP = {}, $menuEl.parent().addClass('openedMenu'); } + // Set menu to expanded + $toggle.attr('aria-expanded', true); + $menuEl.slideToggle(OC.menuSpeed, toggle); OC._currentMenu = $menuEl; OC._currentMenuToggle = $toggle; @@ -736,6 +739,10 @@ var OCP = {}, } }); } + + // Set menu to closed + $('.menutoggle').attr('aria-expanded', false); + $('.openedMenu').removeClass('openedMenu'); OC._currentMenu = null; OC._currentMenuToggle = null; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index e11620a3111..537d9d1ea34 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'));?>
    - - + +
    -
    -- cgit v1.2.3 From 0d675eca568fabc9dba1a682c32f2da2554332f7 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 15:38:30 +0200 Subject: 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 | 12 ++++++++---- core/css/variables.scss | 5 +++++ 4 files changed, 17 insertions(+), 9 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 f2d2e7d54f3..3568e2f3a67 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -148,10 +148,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; @@ -163,11 +162,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 4ef45a16b49..307147076b2 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1328,7 +1328,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'); } @@ -1343,8 +1345,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; @@ -2387,7 +2391,7 @@ input.blur(function() { if(input.hasClass('error')) { restore(); - } else { + } else { form.trigger('submit'); } }); 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); } -- cgit v1.2.3 From 0ee9924b168986c5bf6c9167914447c2fcf2bee9 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 18 Apr 2018 15:40:47 +0200 Subject: 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 537d9d1ea34..bf16c1740ec 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -63,7 +63,7 @@