You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@syncope.apache.org by sk...@apache.org on 2018/11/26 16:22:32 UTC
[syncope] branch 2_0_X updated: [SYNCOPE-1368] Added some
accessibility features to Console
This is an automated email from the ASF dual-hosted git repository.
skylark17 pushed a commit to branch 2_0_X
in repository https://gitbox.apache.org/repos/asf/syncope.git
The following commit(s) were added to refs/heads/2_0_X by this push:
new 4606009 [SYNCOPE-1368] Added some accessibility features to Console
4606009 is described below
commit 4606009fd91eb4fc97bfab9587fdecbd48c6eed5
Author: skylark17 <ma...@tirasa.net>
AuthorDate: Fri Nov 23 17:20:42 2018 +0100
[SYNCOPE-1368] Added some accessibility features to Console
---
.../syncope/client/console/panels/AnyPanel.java | 2 +-
.../client/console/wizards/any/UserDetails.java | 2 +-
.../META-INF/resources/css/accessibility.css | 44 +++
.../css/accessibility/accessibilityFont.css | 101 +++++++
.../css/accessibility/accessibilityHC.css | 296 +++++++++++++++++++++
.../META-INF/resources/js/accessibility.js | 228 ++++++++++++++++
.../syncope/client/console/pages/BasePage.html | 32 ++-
.../apache/syncope/client/console/pages/Login.html | 21 +-
.../markup/html/bootstrap/dialog/BaseModal.html | 2 +-
.../asciidoc/images/accessibility-console01.png | Bin 0 -> 39423 bytes
...lity-enduser02.png => accessibility-icon01.png} | Bin
...lity-enduser03.png => accessibility-icon02.png} | Bin
.../reference-guide/architecture/architecture.adoc | 53 +++-
13 files changed, 773 insertions(+), 8 deletions(-)
diff --git a/client/console/src/main/java/org/apache/syncope/client/console/panels/AnyPanel.java b/client/console/src/main/java/org/apache/syncope/client/console/panels/AnyPanel.java
index 12ec331..cd62839 100644
--- a/client/console/src/main/java/org/apache/syncope/client/console/panels/AnyPanel.java
+++ b/client/console/src/main/java/org/apache/syncope/client/console/panels/AnyPanel.java
@@ -127,7 +127,7 @@ public class AnyPanel extends Panel implements ModalPanel {
@Override
protected void onComponentTag(final ComponentTag tag) {
super.onComponentTag(tag);
- tag.put("style", "color: #337ab7 !important");
+ tag.put("style", "color: #337ab7");
}
@Override
diff --git a/client/console/src/main/java/org/apache/syncope/client/console/wizards/any/UserDetails.java b/client/console/src/main/java/org/apache/syncope/client/console/wizards/any/UserDetails.java
index 75ddac8..9bc048d 100644
--- a/client/console/src/main/java/org/apache/syncope/client/console/wizards/any/UserDetails.java
+++ b/client/console/src/main/java/org/apache/syncope/client/console/wizards/any/UserDetails.java
@@ -104,7 +104,7 @@ public class UserDetails extends Details<UserTO> {
@Override
protected void onComponentTag(final ComponentTag tag) {
super.onComponentTag(tag);
- tag.put("style", "color: #337ab7 !important");
+ tag.put("style", "color: #337ab7");
}
@Override
diff --git a/client/console/src/main/resources/META-INF/resources/css/accessibility.css b/client/console/src/main/resources/META-INF/resources/css/accessibility.css
new file mode 100644
index 0000000..21b9201
--- /dev/null
+++ b/client/console/src/main/resources/META-INF/resources/css/accessibility.css
@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.btn-accessibility {
+ position: absolute;
+ right: 0;
+ font-size: 12px;
+ padding: 15px 15px 0 0;
+}
+
+.btn-accessibility i {
+ font-size: 30px;
+}
+
+.btn-accessibility:hover {
+ cursor:pointer;
+}
+
+.control-sidebar-menu a:focus {
+ outline: 1px #949494 solid;
+}
+
+#change_contrast {
+ top: 0;
+}
+#change_fontSize {
+ top: 40px;
+}
diff --git a/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityFont.css b/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityFont.css
new file mode 100644
index 0000000..da26456
--- /dev/null
+++ b/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityFont.css
@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+body,
+p {
+ font-size: 200%;
+}
+
+.menu a,
+.treeview-menu a,
+.control-sidebar-subheading {
+ font-size: 80% !important;
+}
+
+.box-header > .fa,
+.box-header > .glyphicon,
+.box-header > .ion, .box-header .box-title,
+.dropdown-toggle .filter-option,
+.dropdown-menu a,
+.menu-info span,
+.user-header,
+.header,
+.modal-title,
+.small-box p,
+.alert-widget,
+.alert-widget > a > .label,
+.alert h4,
+#mappings .fa,
+.popover-content,
+.box .dropdown-toggle .glyphicon,
+.box-header button,
+.toggle .toggle-group .btn,
+.input-group .form-control label {
+ font-size: 120%;
+}
+
+input,
+select,
+.footer a,
+.modal-footer button,
+.dropdown-menu:not([role='menu']),
+.dropdown-menu > li.header,
+div#tablehandling ul.menu i,
+.content-header > .breadcrumb,
+.btn-primary:not(.btn-circle),
+.modal-content .box .dialog pre {
+ font-size: 100% !important;
+}
+
+#topology .window {
+ height: 90px;
+}
+
+.dataTables_length select {
+ font-size: 85% !important;
+}
+
+button.close {
+ font-size: 2em;
+}
+
+.details-footer .information {
+ font-size: 12px;
+}
+
+.btn-file i,
+.btn-file span,
+.input-group-btn button.btn-primary {
+ font-size: 20px !important;
+}
+
+.checkbox input[type=checkbox],
+.checkbox-inline input[type=checkbox],
+.radio input[type=radio],
+.radio-inline input[type=radio],
+input[type=checkbox],
+input[type=radio] {
+ width: 20px;
+ height: 20px;
+}
+
+.k-timepicker,
+.k-datepicker {
+ width: 200px !important;
+}
diff --git a/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityHC.css b/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityHC.css
new file mode 100644
index 0000000..aa4d5b9
--- /dev/null
+++ b/client/console/src/main/resources/META-INF/resources/css/accessibility/accessibilityHC.css
@@ -0,0 +1,296 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* General
+============================================================================= */
+.content-wrapper,
+.content-wrapper .box,
+.modal-content,
+.modal-header,
+.background-footer,
+input:not(:disabled):not([type="file"]),
+select,
+select option,
+button:not(.close),
+.table .sorting,
+.dataTables_paginate a,
+.modal-footer,
+.box-header,
+.dropdown-menu,
+.main-footer,
+.circular-actions a,
+.k-select,
+.file-caption.kv-fileinput-caption {
+ color: #f7f7f7 !important;
+ background-color: #0f1417 !important;
+}
+
+
+.dataTable thead th:after,
+.close {
+ color: #f7f7f7 !important;
+ opacity: 0.8 !important;
+}
+
+
+.input-group-addon a,
+.input-group-addon i,
+.dropdown-menu > li:not(.disabled) > a:hover,
+.dropdown-menu > li:not(.disabled) > a:hover span,
+.dropdown-menu > li:not(.disabled) > a:focus,
+.dropdown-menu > li:not(.disabled) > a:focus span,
+#startAtContainer .input-group-addon span,
+#startAtContainer .k-widget span,
+#startAtContainer .k-widget i,
+#startAtContainer .k-widget input,
+.modal-footer i,
+.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default,
+.content-wrapper .nav-tabs a,
+.wrapper .content-wrapper .nav.nav-tabs li.active a span,
+.wrapper .content-wrapper .nav.nav-tabs li.active a,
+.wrapper .content-wrapper .nav.nav-tabs li a:hover span,
+.wrapper .content-wrapper .nav.nav-tabs li a:hover,
+.wrapper .content-wrapper .nav.nav-tabs li a:active span,
+.wrapper .content-wrapper .nav.nav-tabs li a:active,
+.wrapper .content-wrapper .nav.nav-tabs li a:focus span,
+.wrapper .content-wrapper .nav.nav-tabs li a:focus,
+.wrapper .content-wrapper .tab-content .btn-primary .fa-download {
+ color: #000000 !important;
+}
+
+
+.content-wrapper a:not(.btn-primary),
+.content-wrapper span:not(.label-info):not([role="presentation"]):not([class^='cm-']),
+.content-wrapper p,
+.content-wrapper .box-title a,
+.realm-choice .dropdown-menu > li:not(.disabled) > a:hover,
+.realm-choice .dropdown-menu > li:not(.disabled) > a:hover span,
+.realm-choice .dropdown-menu > li:not(.disabled) > a:focus,
+.realm-choice .dropdown-menu > li:not(.disabled) > a:focus span,
+.box-header,
+.breadcrumb .active,
+table tbody tr:hover button span,
+.dropdown-menu > li > a,
+.modal-header button,
+.circular-actions a i,
+.wizard-form .input-group-addon i,
+#startAtContainer .input-group-addon i,
+.attribute .input-group-addon i {
+ color: #f7f7f7 !important;
+}
+
+
+.box.box-primary {
+ border-top-color: #f7f7f7;
+}
+
+
+img,
+.content-wrapper div.btn.btn-file span.hidden-xs {
+ background-color: #f7f7f7;
+ color: #000000 !important;
+}
+.btn-primary,
+.callout.callout-info,
+.alert-info,
+.label-info,
+.modal-info .modal-body {
+ background-color: #f7f7f7 !important;
+ color: #000000 !important;
+}
+
+
+.logo img,
+.modal-content .input-group .input-group-addon {
+ background-color: transparent;
+}
+
+
+.modal-dialog {
+ border: 2px solid white;
+}
+
+
+#veil:not(:required):after {
+ -webkit-box-shadow: #f7f7f7 1.5em 0 0 0,
+ #f7f7f7 1.1em 1.1em 0 0,
+ #f7f7f7 0 1.5em 0 0,
+ #f7f7f7 -1.1em 1.1em 0 0,
+ rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
+ rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0,
+ #f7f7f7 0 -1.5em 0 0,
+ #f7f7f7 1.1em -1.1em 0 0;
+ box-shadow: #f7f7f7 1.5em 0 0 0,
+ #f7f7f7 1.1em 1.1em 0 0,
+ #f7f7f7 0 1.5em 0 0,
+ #f7f7f7 -1.1em 1.1em 0 0,
+ #f7f7f7 -1.5em 0 0 0,
+ #f7f7f7 -1.1em -1.1em 0 0,
+ #f7f7f7 0 -1.5em 0 0,
+ #f7f7f7 1.1em -1.1em 0 0;
+}
+
+
+.input-group input:disabled,
+.input-group input[disabled],
+.control-sidebar-dark .control-sidebar-menu > li > a:hover,
+.table-hover > tbody > tr:hover,
+.skin-blue .main-header .navbar .sidebar-toggle:hover,
+.main-header .navbar .sidebar-toggle:hover,
+.skin-blue .main-header .logo:hover,
+.main-header .logo:hover,
+div.toggle-menu ul li:hover,
+.skin-blue .main-header .navbar .nav > li > a:hover,
+.skin-blue .main-header .navbar .nav > li > a:active,
+.skin-blue .main-header .navbar .nav > li > a:focus,
+.skin-blue .main-header .navbar .nav .open > a:hover,
+.skin-blue .main-header .navbar .nav .open > a:focus,
+.skin-blue .sidebar-menu > li:hover > a,
+.skin-blue .sidebar-menu > li.active > a,
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-menu > li > a:hover,
+.k-block,
+.k-draghandle,
+.k-grid-header,
+.k-grouping-header,
+.k-header,
+.k-pager-wrap,
+.k-toolbar,
+.k-treemap-tile,
+.k-picker-wrap,
+.k-state-disabled,
+.km-pane-wrapper .k-header {
+ background-color: rgba(108, 115, 117, 0.55);
+}
+
+
+.sidebar-mini .main-header .navbar {
+ background-color: #222d32; /* color from 'skin-blue' */
+ border-bottom: 1px white solid;
+ box-sizing: border-box;
+}
+.sidebar-mini .main-header .logo,
+div.toggle-menu,
+.skin-blue .main-header li.user-header {
+ background-color: #222d32;
+}
+
+
+div.toggle-menu {
+ border: 1px solid #f7f7f7;
+}
+
+
+a,
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+ border-color: #76abd9;
+}
+a {
+ color: #76abd9;
+}
+
+
+.logs button.btn-primary {
+ border-color: #f7f7f7;
+}
+.logs button.btn-primary:hover {
+ border-color: #adadad;
+}
+div.infolabel,
+.input-group input:disabled,
+.input-group input[disabled] {
+ color: #d2d2d2;
+}
+
+
+.bg-red,
+.callout.callout-danger,
+.alert-danger,
+.alert-error,
+.label-danger,
+.modal-danger .modal-body,
+.btn-danger.active,
+.btn-danger:active,
+.open>.dropdown-toggle.btn-danger {
+ background-color: #942819 !important;
+}
+.bg-yellow {
+ background-color: #6F4706 !important;
+}
+.bg-green,
+.copy-clipboard-feedback,
+.btn-success,
+.callout.callout-success,
+.alert-success,
+.label-success,
+.modal-success .modal-body {
+ background-color: #005C32 !important;
+}
+.bg-aqua {
+ background-color: #004E61 !important;
+}
+.bg-yellow,
+.callout.callout-warning,
+.alert-warning,
+.label-warning,
+.modal-warning .modal-body {
+ background-color: #6F4706 !important;
+}
+.callout.callout-warning {
+ border-color: #6F4706;
+}
+
+
+.bootstrap-select .btn.btn-default {
+ background-color: rgba(101, 101, 101, 0.7) !important;
+}
+
+
+/* Login page
+============================================================================= */
+.login-body {
+ background-image: linear-gradient(rgb(31, 109, 142), #004626);
+}
+
+.login-logo {
+ background: transparent;
+}
+
+.btn-accessibility {
+ color: #f7f7f7 !important;
+}
+
+.form-signin .btn-primary,
+.form-signin .btn-primary {
+ border: 2px solid white;
+}
+.form-signin .btn-primary.focus,
+.form-signin .btn-primary:focus {
+ border-color: #8c8c8c;
+}
+
+.login-card {
+ background-color: #0f1417;
+}
\ No newline at end of file
diff --git a/client/console/src/main/resources/META-INF/resources/js/accessibility.js b/client/console/src/main/resources/META-INF/resources/js/accessibility.js
new file mode 100644
index 0000000..b10a48e
--- /dev/null
+++ b/client/console/src/main/resources/META-INF/resources/js/accessibility.js
@@ -0,0 +1,228 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function () {
+
+ var locationDomain = window.location.origin + '/' + window.location.pathname.split('/')[1];
+
+ var initAssetsManager = function () {
+ var AssetsManager = {};
+
+ var createLink = function (id, url) {
+ if (!$('link#' + id).length && !$('link[href="' + url + '"').length) {
+ var link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = url;
+ link.type = "text/css";
+ $('head').append(link);
+ }
+ };
+
+ var createScript = function (id, url) {
+ if (!$('script#' + id).length && !$('script[src="' + url + '"').length) {
+ var script = document.createElement('script');
+ script.src = url;
+ $('body').append(script);
+ }
+ };
+
+ AssetsManager.checkAlreadyLoaded = function (url, type) {
+ var elems = (type === 'css') ? document.styleSheets : ((type === 'js') ? document.scripts : '');
+ var attr = (type === 'js') ? 'src' : ((type === 'css') ? 'href' : 'none');
+ for (var i in elems) {
+ var attrUrl = elems[i][attr] || "";
+ var assetName = attrUrl.split("/").slice(-1).join();
+ if (attrUrl !== ""
+ && (assetName === url.split("/").slice(-1).join() || assetName === url)) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ var removeLoaded = function (url, type) {
+ var tag = (type === 'js') ? 'script' : ((type === 'css') ? 'link' : '');
+ if (AssetsManager.checkAlreadyLoaded(url, type)) {
+ $(tag + '[href~="' + url + '"]').remove();
+ }
+ };
+
+ AssetsManager.inject = function (id, url, type) {
+ switch (type) {
+ case 'js':
+ createScript(id, url);
+ break;
+
+ case 'css':
+ createLink(id, url);
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ AssetsManager.remove = function (url, type) {
+ removeLoaded(url, type);
+ };
+
+ return AssetsManager;
+ };
+
+ var initAccessibilityController = function () {
+ AccessibilityController = {};
+
+ var AssetsManager = initAssetsManager();
+
+ var fontSizeFiles = [
+ locationDomain + '/css/accessibility/accessibilityFont.css'
+ ];
+
+ var darkThemeFiles = [
+ locationDomain + '/css/AdminLTE_skins/skin-blue.css',
+ locationDomain + '/css/accessibility/accessibilityHC.css'
+ ];
+
+ var darkThemeMainClass = 'skin-blue';
+ var defaultThemeMainClass = 'skin-green-light';
+
+ var doSwitch = function (check, files) {
+ if (!check) {
+ for (var i = 0; i < files.length; i++) {
+ AssetsManager.remove(files[i], 'css');
+ }
+ } else {
+ for (var i = 0; i < files.length; i++) {
+ AssetsManager.inject('theme_css_' + i, files[i], 'css');
+ }
+ }
+ };
+
+ var doSwitchTheme = function (check, files) {
+ doSwitch(check, files);
+
+ if ($('body').hasClass(defaultThemeMainClass) && check) {
+ $('body').removeClass(defaultThemeMainClass).addClass(darkThemeMainClass);
+ } else {
+ $('body').removeClass(darkThemeMainClass).addClass(defaultThemeMainClass);
+ }
+ };
+
+ var savePreference = function (key, value) {
+ window.localStorage.setItem(key, value);
+ };
+
+ var getPreference = function (key) {
+ var storageValue = window.localStorage.getItem(key);
+ if (storageValue === null) {
+ savePreference(key, 'false');
+ }
+ return storageValue === 'true';
+ };
+
+ AccessibilityController.FONT_SIZE_PREF = 'font_size_pref';
+ AccessibilityController.HC_THEME_PREF = 'hc_theme_pref';
+
+ var isIncreasedFont = getPreference(AccessibilityController.FONT_SIZE_PREF);
+ var isHighContrast = getPreference(AccessibilityController.HC_THEME_PREF);
+
+ AccessibilityController.checkPref = function (pref) {
+ switch (pref) {
+ case AccessibilityController.FONT_SIZE_PREF:
+ doSwitch(isIncreasedFont, fontSizeFiles);
+ break;
+
+ case AccessibilityController.HC_THEME_PREF:
+ doSwitchTheme(isHighContrast, darkThemeFiles);
+ break;
+
+ default:
+ break;
+ }
+ };
+
+ AccessibilityController.switchIncreasedFont = function () {
+ isIncreasedFont = !isIncreasedFont;
+ doSwitch(isIncreasedFont, fontSizeFiles);
+ savePreference(AccessibilityController.FONT_SIZE_PREF, isIncreasedFont);
+ };
+
+ AccessibilityController.switchTheme = function () {
+ isHighContrast = !isHighContrast;
+ doSwitchTheme(isHighContrast, darkThemeFiles);
+ savePreference(AccessibilityController.HC_THEME_PREF, isHighContrast);
+ };
+
+ return AccessibilityController;
+ };
+
+ var AccessibilityController = initAccessibilityController();
+
+ AccessibilityController.checkPref(AccessibilityController.FONT_SIZE_PREF);
+ AccessibilityController.checkPref(AccessibilityController.HC_THEME_PREF);
+
+ $('#change_contrast').off('click.acc_hc');
+ $('#change_contrast').on('click.acc_hc', function () {
+ AccessibilityController.switchTheme();
+ return false;
+ });
+
+ $('#change_contrast').off('keydown.key_acc_hc keypress.key_acc_hc');
+ $('#change_contrast').on('keydown.key_acc_hc keypress.key_acc_hc', function (event) {
+ // check "enter" key pressed
+ if (event.which === 13) {
+ AccessibilityController.switchTheme();
+
+ event.preventDefault();
+ return false;
+ }
+ });
+
+ $('#change_fontSize').off('click.acc_f');
+ $('#change_fontSize').on('click.acc_f', function () {
+ AccessibilityController.switchIncreasedFont();
+ return false;
+ });
+
+ $('#change_fontSize').off('keydown.key_acc_f keypress.key_acc_f');
+ $('#change_fontSize').on('keydown.key_acc_f keypress.key_acc_f', function (event) {
+ // check "enter" key pressed
+ if (event.which === 13) {
+ AccessibilityController.switchIncreasedFont();
+
+ event.preventDefault();
+ return false;
+ }
+ });
+
+ $('body').off('keydown.acc_binding keypress.acc_binding');
+ $('body').on('keydown.acc_binding keypress.acc_binding', function (event) {
+ // alt - shift - F
+ // alt - shift - H
+ if (event.altKey && event.shiftKey) {
+ if (event.keyCode === 72) {
+ AccessibilityController.switchTheme();
+ } else if (event.keyCode === 70) {
+ AccessibilityController.switchIncreasedFont();
+ }
+ event.preventDefault();
+ }
+ });
+
+});
diff --git a/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html b/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
index ebfcfeb..76beebd 100644
--- a/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
+++ b/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
@@ -34,6 +34,10 @@ under the License.
<link href="css/AdminLTE_skins/skin-green-light.css" rel="stylesheet" type="text/css"/>
<link href="css/syncopeConsole.css" rel="stylesheet" type="text/css"/>
+ <!-- accessibility -->
+ <link href="css/accessibility.css" rel="stylesheet" type="text/css" />
+ <script type="text/javascript" src="js/accessibility.js"></script>
+
<script type="text/javascript" src="webjars/bootbox/${bootbox.version}/bootbox.js"></script>
<script type="text/javascript" src="webjars/jQuery-slimScroll/${jquery-slimscroll.version}/jquery.slimscroll.min.js"></script>
<script type="text/javascript">
@@ -41,7 +45,7 @@ under the License.
var proceed = false;
// configure AdminLTE
$.AdminLTE.options['enableBSToppltip'] = false;
- </script>
+ </script>
</head>
<body class="skin-green-light hold-transition sidebar-mini" wicket:id="body">
@@ -218,6 +222,32 @@ under the License.
</li>
</ul>
<!-- /.control-sidebar-menu -->
+
+ <h3 class="control-sidebar-heading">Accessibility</h3>
+ <ul class="control-sidebar-menu">
+ <li>
+ <a id="change_contrast" href="#" aria-label="Toggle high contrast colors mode">
+ <i class="menu-icon fa fa-adjust bg-gray"></i>
+
+ <div class="menu-info">
+ <h4 class="control-sidebar-subheading">Toggle high contrast mode</h4>
+ <p>Enable / disable high contrast mode</p>
+ </div>
+ </a>
+ </li>
+
+ <li>
+ <a id="change_fontSize" href="#" aria-label="Toggle font size increment">
+ <i class="menu-icon fa fa-font bg-gray"></i>
+
+ <div class="menu-info">
+ <h4 class="control-sidebar-subheading">Change font size</h4>
+ <p>Increase / reset font size</p>
+ </div>
+ </a>
+ </li>
+ </ul>
+ <!-- /.control-sidebar-menu -->
</div>
</aside>
<div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
diff --git a/client/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html b/client/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
index 0340b83..973c1bc 100644
--- a/client/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
+++ b/client/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html
@@ -33,10 +33,27 @@ under the License.
<link href="css/login.css" rel="stylesheet" type="text/css" />
<link href="css/syncopeConsole.css" rel="stylesheet" type="text/css" />
+
+ <!-- accessibility -->
+ <link href="css/accessibility.css" rel="stylesheet" type="text/css" />
+ <script type="text/javascript" src="js/accessibility.js"></script>
</head>
- <body>
+
+ <body class="login-body">
+ <div id="accessibility">
+ <div id="change_contrast" class="btn-accessibility">
+ <i aria-label="Toggle high contrast colors mode" tabindex="0" accesskey="H"
+ class="fa fa-adjust">
+ </i>
+ </div>
+ <div id="change_fontSize" class="btn-accessibility">
+ <i aria-label="Toggle font size increment" tabindex="1" accesskey="F"
+ class="fa fa-font">
+ </i>
+ </div>
+ </div>
<div class="container">
- <div class="card card-container">
+ <div class="login-card card card-container">
<img class="login-logo" src="img/logo-green.png" />
<span wicket:id="feedback" role="alert"/>
diff --git a/client/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/bootstrap/dialog/BaseModal.html b/client/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/bootstrap/dialog/BaseModal.html
index 95c6232..98e7e40 100644
--- a/client/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/bootstrap/dialog/BaseModal.html
+++ b/client/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/bootstrap/dialog/BaseModal.html
@@ -27,7 +27,7 @@ under the License.
</style>
</wicket:head>
<wicket:panel>
- <div class="modal-dialog" wicket:id="dialog">
+ <div class="modal-dialog" wicket:id="dialog" aria-modal="true" tabindex="0">
<div class="modal-content">
<div wicket:id="header" class="modal-header">
<button wicket:id="header-close-button" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
diff --git a/src/main/asciidoc/images/accessibility-console01.png b/src/main/asciidoc/images/accessibility-console01.png
new file mode 100644
index 0000000..be7cf54
Binary files /dev/null and b/src/main/asciidoc/images/accessibility-console01.png differ
diff --git a/src/main/asciidoc/images/accessibility-enduser02.png b/src/main/asciidoc/images/accessibility-icon01.png
similarity index 100%
rename from src/main/asciidoc/images/accessibility-enduser02.png
rename to src/main/asciidoc/images/accessibility-icon01.png
diff --git a/src/main/asciidoc/images/accessibility-enduser03.png b/src/main/asciidoc/images/accessibility-icon02.png
similarity index 100%
rename from src/main/asciidoc/images/accessibility-enduser03.png
rename to src/main/asciidoc/images/accessibility-icon02.png
diff --git a/src/main/asciidoc/reference-guide/architecture/architecture.adoc b/src/main/asciidoc/reference-guide/architecture/architecture.adoc
index 0570540..d16c52c 100644
--- a/src/main/asciidoc/reference-guide/architecture/architecture.adoc
+++ b/src/main/asciidoc/reference-guide/architecture/architecture.adoc
@@ -36,6 +36,55 @@ The communication between Admin UI and Core is exclusively REST-based.
More details are available in the dedicated <<admin-console,usage>> section.
+==== Accessibility
+
+The Admin Console UI is accessible to the visually impaired.
+
+Two icons are present in the main login page and in the menu on the right:
+
+[.text-center]
+image::accessibility-console01.png[title="Admin Console accessibility buttons",alt="Admin Console accessibility buttons"]
+
+By clicking the top right corner icon image:accessibility-icon01.png[Accessibility HC mode,30,30] it is possible to
+toggle the "High contrast mode".
+In this mode, the website colors are switched to a higher contrast color schema.
+
+[TIP]
+====
+The `H` https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^] shortcut can
+be used to easily toggle "High contrast mode" by using the keyboard.
+
+E.g.
+|===
+|Shortcut |Purpose
+
+|`Alt` + `Shift` + `H`
+|Toggle "High contrast mode" on Firefox and Chrome browsers on Linux
+|===
+
+====
+
+By clicking the second icon image:accessibility-icon02.png[Accessibility Increased Font mode,30,30] it is possible
+to toggle the "Increased font mode".
+In this mode, the website font size is increased.
+
+[TIP]
+====
+The `F` https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey[accesskey^] shortcut can
+be used to easily toggle "Increased font mode" by using the keyboard.
+
+E.g.
+|===
+|Shortcut |Purpose
+
+|`Alt` + `Shift` + `F`
+|Toggle "Increased font mode" on Firefox and Chrome browsers on Linux
+|===
+
+====
+
+To reset to the default mode, it is enough to click again on the specific icon.
+
[[enduser-component]]
=== End-user UI
@@ -52,7 +101,7 @@ Two icons are present in the main page, in the right corner:
[.text-center]
image::accessibility-enduser01.png[title="Enduser accessibility icons",alt="Enduser accessibility icons"]
-By clicking the top right corner icon image:accessibility-enduser02.png[Accessibility HC mode,30,30] it is possible to
+By clicking the top right corner icon image:accessibility-icon01.png[Accessibility HC mode,30,30] it is possible to
toggle the "High contrast mode".
In this mode, the website colors are switched to a higher contrast color schema.
@@ -71,7 +120,7 @@ E.g.
====
-By clicking the second icon image:accessibility-enduser03.png[Accessibility HC mode,30,30] it is possible
+By clicking the second icon image:accessibility-icon02.png[Accessibility Increased Font mode,30,30] it is possible
to toggle the "Increased font mode".
In this mode, the website font size is increased.