Accessibility statement. Part 1. In Progress.

Thanks to xet7 !

client/components/main/accessibility.css

@@ -0,0 +1,74 @@
+.my-cards-board-wrapper {
+  border-radius: 0 0 4px 4px;
+  min-width: 400px;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #a2a2a2;
+}
+.my-cards-board-title {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  background-color: #808080;
+  color: #fff;
+}
+.my-cards-swimlane-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  padding-bottom: 0.4rem;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.swimlane-default-color {
+  background-color: #d3d3d3;
+}
+.my-cards-list-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+  margin-bottom: 0.7rem;
+}
+.my-cards-list-wrapper {
+  margin: 1rem;
+  border-radius: 5px;
+  display: inline-grid;
+  min-width: 250px;
+  max-width: 350px;
+}
+.my-cards-card-wrapper {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+.my-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.my-cards-board-table thead {
+  border-bottom: 3px solid #4d4d4d;
+  background-color: transparent;
+}
+.my-cards-board-table th,
+.my-cards-board-table td {
+  border: 0;
+}
+.my-cards-board-table tr {
+  border-bottom: 2px solid #a2a2a2;
+}
+.my-cards-card-title-table {
+  font-weight: bold;
+  padding-left: 2px;
+  max-width: 243px;
+}
+.my-cards-board-badge {
+  width: 36px;
+  height: 24px;
+  float: left;
+  border-radius: 5px;
+  margin-right: 5px;
+}

client/components/main/accessibility.jade

@@ -0,0 +1,8 @@
+template(name="accessibilityHeaderBar")
+  if currentUser
+    h1
+      | {{_ 'accessibility-title'}}
+
+template(name="accessibility")
+  if currentUser
+    | {{_ 'accessibility-content'}}

client/components/main/accessibility.js

@@ -0,0 +1,11 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+import { TAPi18n } from '/imports/i18n';
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.loading = new ReactiveVar(false);
+
+    Meteor.subscribe('setting');
+  },
+}).register('accessibility');

client/components/settings/settingBody.jade

@@ -249,6 +249,21 @@ template(name='layoutSettings')
       .title {{_ 'custom-top-left-corner-logo-height'}}
       .form-group
         input.wekan-form-control#custom-top-left-corner-logo-height(type="text", placeholder="" value="{{currentSetting.customTopLeftCornerLogoHeight}}")
+    li.layout-form
+      .title {{_ 'accessibility-page-enabled'}}
+      .form-group.flex
+        input.wekan-form-control#accessibility-page-enabled(type="radio" name="accessibilityPageEnabled" value="true" checked="{{#if currentSetting.accessibilityEnabled}}checked{{/if}}")
+        label {{_ 'yes'}}
+        input.wekan-form-control#accessibility-page-enabled(type="radio" name="accessibilityPageEnabled" value="false" checked="{{#unless currentSetting.accessibilityEnabled}}checked{{/unless}}")
+        label {{_ 'no'}}
+    li.layout-form
+      .title {{_ 'accessibility-title'}}
+      .form-group
+        input.wekan-form-control#accessibility-title(type="text", placeholder="" value="{{currentSetting.accessibilityTitle}}")
+    li.layout-form
+      .title {{_ 'accessibility-content'}}
+      .form-group
+        textarea#accessibility-content.wekan-form-control= currentSetting.accessibilityContent
     li.layout-form
       .title {{_ 'automatic-linked-url-schemes'}}
       .form-group

client/components/settings/settingBody.js

@@ -89,6 +89,9 @@ BlazeComponent.extendComponent({
   toggleHideBoardMemberList() {
     $('#hide-board-member-list').toggleClass('is-checked');
   },
+  toggleAccessibilityPageEnabled() {
+    $('#accessibility-page-enabled').toggleClass('is-checked');
+  },
   toggleDisplayAuthenticationMethod() {
     $('#display-authentication-method').toggleClass('is-checked');
   },
@@ -239,7 +242,13 @@ 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()
+      .trim();
+    const accessibilityContent = $('#accessibility-content')
+      .val()
+      .trim();
     const spinnerName = $('#spinnerName').val();
 
     try {
@@ -263,6 +272,9 @@ BlazeComponent.extendComponent({
           oidcBtnText,
           mailDomainName,
           legalNotice,
+          accessibilityPageEnabled,
+          accessibilityTitle,
+          accessibilityContent,
         },
       });
     } catch (e) {
@@ -301,6 +313,7 @@ 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,

config/router.js

@@ -55,6 +55,30 @@ FlowRouter.route('/public', {
   },
 });
 
+FlowRouter.route('/accessibility', {
+  name: 'accessibility',
+  triggersEnter: [AccountsTemplates.ensureSignedIn],
+  action() {
+    Session.set('currentBoard', null);
+    Session.set('currentList', null);
+    Session.set('currentCard', null);
+    Session.set('popupCardId', null);
+    Session.set('popupCardBoardId', null);
+
+    Filter.reset();
+    Session.set('sortBy', '');
+    EscapeActions.executeAll();
+
+    Utils.manageCustomUI();
+    Utils.manageMatomo();
+
+    BlazeLayout.render('defaultLayout', {
+      headerBar: 'accessibilityHeaderBar',
+      content: 'accessibility',
+    });
+  },
+});
+
 FlowRouter.route('/b/:id/:slug', {
   name: 'board',
   action(params) {

imports/i18n/data/en.i18n.json

@@ -1255,5 +1255,8 @@
   "collapse": "Collapse",
   "uncollapse": "Uncollapse",
   "hideCheckedChecklistItems": "Hide checked checklist items",
-  "hideAllChecklistItems": "Hide all checklist items"
+  "hideAllChecklistItems": "Hide all checklist items",
+  "accessibility-page-enabled": "Accessibility page enabled",
+  "accessibility-title": "Accessibility topic",
+  "accessibility-content": "Accessibility content"
 }

models/accessibilitySettings.js

@@ -0,0 +1,65 @@
+import { ReactiveCache } from '/imports/reactiveCache';
+
+AccessibilitySettings = new Mongo.Collection('accessibilitySettings');
+
+AccessibilitySettings.attachSchema(
+  new SimpleSchema({
+    enabled: {
+      type: Boolean,
+      defaultValue: false,
+    },
+    title: {
+      type: String,
+      optional: true,
+    },
+    body: {
+      type: String,
+      optional: true,
+    },
+    createdAt: {
+      type: Date,
+      optional: true,
+      // eslint-disable-next-line consistent-return
+      autoValue() {
+        if (this.isInsert) {
+          return new Date();
+        } else if (this.isUpsert) {
+          return { $setOnInsert: new Date() };
+        } else {
+          this.unset();
+        }
+      },
+    },
+    modifiedAt: {
+      type: Date,
+      denyUpdate: false,
+      // eslint-disable-next-line consistent-return
+      autoValue() {
+        if (this.isInsert || this.isUpsert || this.isUpdate) {
+          return new Date();
+        } else {
+          this.unset();
+        }
+      },
+    },
+  }),
+);
+
+AccessibilitySettings.allow({
+  update(userId) {
+    const user = ReactiveCache.getUser(userId);
+    return user && user.isAdmin;
+  },
+});
+
+if (Meteor.isServer) {
+  Meteor.startup(() => {
+    AccessibilitySettings._collection.createIndex({ modifiedAt: -1 });
+    const accessibilitySetting = AccessibilitySettings.findOne({});
+    if (!accessibilitySetting) {
+      AccessibilitySettings.insert({ enabled: false, sort: 0 });
+    }
+  });
+}
+
+export default AccessibilitySettings;

models/settings.js

@@ -117,6 +117,19 @@ Settings.attachSchema(
       type: String,
       optional: true,
     },
+    accessibilityPageEnabled: {
+      type: Boolean,
+      optional: true,
+      defaultValue: false,
+    },
+    accessibilityTitle: {
+      type: String,
+      optional: true,
+    },
+    accessibilityContent: {
+      type: String,
+      optional: true,
+    },
     createdAt: {
       type: Date,
       denyUpdate: true,

server/publications/settings.js

@@ -38,6 +38,9 @@ Meteor.publish('setting', () => {
         oidcBtnText: 1,
         mailDomainName: 1,
         legalNotice: 1,
+        accessibilityPageEnabled: 1,
+        accessibilityTitle: 1,
+        accessibilityContent: 1,
       },
     },
   );