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,