Feature: Accessibility page at /accessibility. Settings at Admin Panel. When enabled, link at right sidebar.

Thanks to xet7 !

client/components/settings/settingBody.jade

@@ -189,24 +189,22 @@ template(name='announcementSettings')
 
 template(name='accessibilitySettings')
   ul#accessibility-setting.setting-detail
+    li
+      a(href="/accessibility" style="text-decoration: underline; color: blue;") {{_ 'accessibility'}}
     li
       a.flex.js-toggle-accessibility
         .materialCheckBox(class="{{#if currentAccessibility.enabled}}is-checked{{/if}}")
 
-        span {{_ 'admin-accessibility-active'}}
-    li
-      .title {{_ 'accessibility-title'}}
-      .form-group
-        input.wekan-form-control#accessibility-title(type="text", placeholder="" value="{{currentSetting.accessibilityTitle}}")
+        span {{_ 'accessibility-page-enabled'}}
     li
       .accessibility-content(class="{{#if currentAccessibility.enabled}}{{else}}hide{{/if}}")
         ul
           li
-            .title {{_ 'admin-accessibility-title'}}
-            textarea#admin-accessibility.wekan-form-control= currentAccessibility.accessibilityTitle
+            .title {{_ 'accessibility-title'}}
+            textarea#admin-accessibility-title.wekan-form-control= currentAccessibility.title
           li
-            .title {{_ 'admin-accessibility-content'}}
-            textarea#admin-accessibility.wekan-form-control= currentAccessibility.accessibilityContent
+            .title {{_ 'accessibility-content'}}
+            textarea#admin-accessibility-content.wekan-form-control= currentAccessibility.body
           li
             button.js-accessibility-save.primary {{_ 'save'}}
 

client/components/settings/settingBody.js

@@ -12,6 +12,7 @@ BlazeComponent.extendComponent({
     this.accountSetting = new ReactiveVar(false);
     this.tableVisibilityModeSetting = new ReactiveVar(false);
     this.announcementSetting = new ReactiveVar(false);
+    this.accessibilitySetting = new ReactiveVar(false);
     this.layoutSetting = new ReactiveVar(false);
     this.webhookSetting = new ReactiveVar(false);
 
@@ -20,6 +21,7 @@ BlazeComponent.extendComponent({
     Meteor.subscribe('accountSettings');
     Meteor.subscribe('tableVisibilityModeSettings');
     Meteor.subscribe('announcements');
+    Meteor.subscribe('accessibilitySettings');
     Meteor.subscribe('globalwebhooks');
   },
 
@@ -106,6 +108,7 @@ BlazeComponent.extendComponent({
       this.emailSetting.set('email-setting' === targetID);
       this.accountSetting.set('account-setting' === targetID);
       this.announcementSetting.set('announcement-setting' === targetID);
+      this.accessibilitySetting.set('accessibility-setting' === targetID);
       this.layoutSetting.set('layout-setting' === targetID);
       this.webhookSetting.set('webhook-setting' === targetID);
       this.tableVisibilityModeSetting.set('tableVisibilityMode-setting' === targetID);
@@ -242,7 +245,6 @@ BlazeComponent.extendComponent({
     const displayAuthenticationMethod =
       $('input[name=displayAuthenticationMethod]:checked').val() === 'true';
     const defaultAuthenticationMethod = $('#defaultAuthenticationMethod').val();
-/*
     const accessibilityPageEnabled = $('input[name=accessibilityPageEnabled]:checked').val() === 'true';
     const accessibilityTitle = $('#accessibility-title')
       .val()
@@ -250,7 +252,6 @@ BlazeComponent.extendComponent({
     const accessibilityContent = $('#accessibility-content')
       .val()
       .trim();
-*/
     const spinnerName = $('#spinnerName').val();
 
     try {
@@ -274,13 +275,11 @@ BlazeComponent.extendComponent({
           oidcBtnText,
           mailDomainName,
           legalNotice,
-        },
-      });
-/*
           accessibilityPageEnabled,
           accessibilityTitle,
           accessibilityContent,
-*/
+        },
+      });
     } catch (e) {
       return;
     } finally {
@@ -317,7 +316,6 @@ BlazeComponent.extendComponent({
         'click a.js-toggle-hide-logo': this.toggleHideLogo,
         'click a.js-toggle-hide-card-counter-list': this.toggleHideCardCounterList,
         'click a.js-toggle-hide-board-member-list': this.toggleHideBoardMemberList,
-        'click a.js-toggle-accessibility-page-enabled': this.toggleAccessibilityPageEnabled,
         'click button.js-save-layout': this.saveLayout,
         'click a.js-toggle-display-authentication-method': this
           .toggleDisplayAuthenticationMethod,
@@ -469,6 +467,59 @@ BlazeComponent.extendComponent({
   },
 }).register('announcementSettings');
 
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.loading = new ReactiveVar(false);
+  },
+
+  setLoading(w) {
+    this.loading.set(w);
+  },
+
+  currentAccessibility() {
+    return AccessibilitySettings.findOne();
+  },
+
+  saveAccessibility() {
+    const title = $('#admin-accessibility-title')
+      .val()
+      .trim();
+    const content = $('#admin-accessibility-content')
+      .val()
+      .trim();
+    AccessibilitySettings.update(AccessibilitySettings.findOne()._id, {
+      $set: {
+        title: title,
+        body: content
+      },
+    });
+  },
+
+  toggleAccessibility() {
+    this.setLoading(true);
+    const accessibilitySetting = this.currentAccessibility();
+    const isActive = accessibilitySetting.enabled;
+    AccessibilitySettings.update(accessibilitySetting._id, {
+      $set: { enabled: !isActive },
+    });
+    this.setLoading(false);
+    if (isActive) {
+      $('.accessibility-content').slideUp();
+    } else {
+      $('.accessibility-content').slideDown();
+    }
+  },
+
+  events() {
+    return [
+      {
+        'click a.js-toggle-accessibility': this.toggleAccessibility,
+        'click button.js-accessibility-save': this.saveAccessibility,
+      },
+    ];
+  },
+}).register('accessibilitySettings');
+
 Template.selectAuthenticationMethod.onCreated(function() {
   this.authenticationMethods = new ReactiveVar([]);