From ee9d54245c7651a41c0563847f28012e5815b938 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Thu, 30 Sep 2021 13:19:52 +0200
Subject: [PATCH 01/10] [CST-4659] Deque accessibility issues - 469979

---
 .../number-picker.component.html              |  4 ++--
 .../number-picker.component.scss              | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
index 1f6c08d92e..84fb47f0c8 100644
--- a/src/app/shared/number-picker/number-picker.component.html
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -1,6 +1,6 @@
 <div class="d-flex flex-column align-items-center justify-content-around mr-3">
     <button
-      class="btn btn-link"
+      class="btn btn-arrow"
       type="button"
       tabindex="0"
       [disabled]="disabled"
@@ -25,7 +25,7 @@
       aria-label="name"
     >
     <button
-      class="btn btn-link"
+      class="btn btn-arrow"
       type="button"
       tabindex="0"
       [disabled]="disabled"
diff --git a/src/app/shared/number-picker/number-picker.component.scss b/src/app/shared/number-picker/number-picker.component.scss
index 0f7c4067ac..dd710d9594 100644
--- a/src/app/shared/number-picker/number-picker.component.scss
+++ b/src/app/shared/number-picker/number-picker.component.scss
@@ -23,3 +23,24 @@
 input {
   max-width: 80px !important;
 }
+
+.btn-arrow {
+  // behave as btn-link but does not override box-shadow of btn-link:focus
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  text-decoration: $link-decoration;
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+  }
+}

From a2eb16d328a3b35703669f16a7d8447a7dff44f7 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Thu, 30 Sep 2021 15:31:52 +0200
Subject: [PATCH 02/10] [CST-4659] Deque accessibility issues - 470065

---
 .../sections/container/section-container.component.html       | 2 +-
 src/assets/i18n/en.json5                                      | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/submission/sections/container/section-container.component.html b/src/app/submission/sections/container/section-container.component.html
index 28ed377c4a..9e8e104e09 100644
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -23,7 +23,7 @@
           <a class="close"
              tabindex="0"
              role="button"
-             [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate"
+             [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.aria.close' : 'submission.sections.toggle.aria.open') | translate: {sectionHeader: ('submission.sections.'+sectionData.header | translate)}"
              [title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
             <span *ngIf="sectionRef.isOpen()" class="fas fa-chevron-up fa-fw"></span>
             <span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"></span>
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index aa76d2e422..960c9600a7 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3569,6 +3569,10 @@
 
   "submission.sections.toggle.close": "Close section",
 
+  "submission.sections.toggle.aria.open": "Expand {{sectionHeader}} section",
+
+  "submission.sections.toggle.aria.close": "Collapse {{sectionHeader}} section",
+
   "submission.sections.upload.delete.confirm.cancel": "Cancel",
 
   "submission.sections.upload.delete.confirm.info": "This operation can't be undone. Are you sure?",

From a80d9694d8c27bae5024679bd832c986830932c1 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Thu, 30 Sep 2021 18:11:24 +0200
Subject: [PATCH 03/10] [CST-4659] Deque accessibility issues - 470001

---
 .../number-picker.component.html              |  4 ++--
 .../number-picker.component.scss              |  2 +-
 .../form/submission-form.component.scss       | 20 +++++++++++++++++++
 .../file/section-upload-file.component.html   |  6 +++---
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
index 84fb47f0c8..58b6def50b 100644
--- a/src/app/shared/number-picker/number-picker.component.html
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -1,6 +1,6 @@
 <div class="d-flex flex-column align-items-center justify-content-around mr-3">
     <button
-      class="btn btn-arrow"
+      class="btn btn-link-focus"
       type="button"
       tabindex="0"
       [disabled]="disabled"
@@ -25,7 +25,7 @@
       aria-label="name"
     >
     <button
-      class="btn btn-arrow"
+      class="btn btn-link-focus"
       type="button"
       tabindex="0"
       [disabled]="disabled"
diff --git a/src/app/shared/number-picker/number-picker.component.scss b/src/app/shared/number-picker/number-picker.component.scss
index dd710d9594..94f7f38ef0 100644
--- a/src/app/shared/number-picker/number-picker.component.scss
+++ b/src/app/shared/number-picker/number-picker.component.scss
@@ -24,7 +24,7 @@ input {
   max-width: 80px !important;
 }
 
-.btn-arrow {
+.btn-link-focus {
   // behave as btn-link but does not override box-shadow of btn-link:focus
   font-weight: $font-weight-normal;
   color: $link-color;
diff --git a/src/app/submission/form/submission-form.component.scss b/src/app/submission/form/submission-form.component.scss
index 56d6288764..c5e142b89c 100644
--- a/src/app/submission/form/submission-form.component.scss
+++ b/src/app/submission/form/submission-form.component.scss
@@ -17,3 +17,23 @@
   z-index: var(--ds-submission-footer-z-index);
 }
 
+.btn-link-focus {
+  // behave as btn-link but does not override box-shadow of btn-link:focus
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  text-decoration: $link-decoration;
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+  }
+}
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html
index 09c062d191..ce10e0ea59 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -10,16 +10,16 @@
       </div>
       <div class="float-right w-15" [class.sticky-buttons]="!readMode">
         <ng-container *ngIf="readMode">
-          <ds-file-download-link [cssClasses]="'btn btn-link'" [isBlank]="true" [bitstream]="getBitstream()">
+          <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()">
             <i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
           </ds-file-download-link>
-          <button class="btn btn-link"
+          <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
                   title="{{ 'submission.sections.upload.edit.title' | translate }}"
                   (click)="$event.preventDefault();switchMode();">
             <i class="fa fa-edit fa-2x text-normal"></i>
           </button>
-          <button class="btn btn-link"
+          <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
                   title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
                   [disabled]="(processingDelete$ | async)"

From d59e6c630ddc3d704b9e3f33004445fb9178d4f5 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Fri, 1 Oct 2021 17:10:54 +0200
Subject: [PATCH 04/10] [CST-4659] Deque accessibility issues - 470062

---
 .../sections/container/section-container.component.html     | 6 +++---
 src/assets/i18n/en.json5                                    | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/submission/sections/container/section-container.component.html b/src/app/submission/sections/container/section-container.component.html
index 9e8e104e09..c510c7ddf1 100644
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -15,11 +15,11 @@
         <span class="float-left section-title" tabindex="0">{{ 'submission.sections.'+sectionData.header | translate }}</span>
         <div class="d-inline-block float-right">
           <i *ngIf="!(sectionRef.isValid() | async) && !(sectionRef.hasErrors())" class="fas fa-exclamation-circle text-warning mr-3"
-             aria-hidden="true" title="{{'submission.sections.status.warnings.title' | translate}}"></i>
+             title="{{'submission.sections.status.warnings.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
           <i *ngIf="(sectionRef.hasErrors())" class="fas fa-exclamation-circle text-danger mr-3"
-             aria-hidden="true" title="{{'submission.sections.status.errors.title' | translate}}"></i>
+             title="{{'submission.sections.status.errors.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
           <i *ngIf="(sectionRef.isValid() | async) && !(sectionRef.hasErrors())" class="fas fa-check-circle text-success mr-3"
-             aria-hidden="true" title="{{'submission.sections.status.valid.title' | translate}}"></i>
+             title="{{'submission.sections.status.valid.title' | translate}}" role="img" [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
           <a class="close"
              tabindex="0"
              role="button"
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 960c9600a7..4b6356f556 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3565,6 +3565,12 @@
 
   "submission.sections.status.warnings.title": "Warnings",
 
+  "submission.sections.status.errors.aria": "has errors",
+
+  "submission.sections.status.valid.aria": "is valid",
+
+  "submission.sections.status.warnings.aria": "has warnings",
+
   "submission.sections.toggle.open": "Open section",
 
   "submission.sections.toggle.close": "Close section",

From 69bd118001bb89aedd8c636124e38695b5ac1f6a Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Fri, 1 Oct 2021 17:22:03 +0200
Subject: [PATCH 05/10] [CST-4659] Deque accessibility issues - 469700

---
 src/app/shared/uploader/uploader.component.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/uploader/uploader.component.html b/src/app/shared/uploader/uploader.component.html
index caa94d1709..109473bc97 100644
--- a/src/app/shared/uploader/uploader.component.html
+++ b/src/app/shared/uploader/uploader.component.html
@@ -19,11 +19,14 @@
          (fileOver)="fileOverBase($event)"
          class="well ds-base-drop-zone mt-1 mb-3 text-muted">
       <div class="text-center m-0 p-2 d-flex justify-content-center align-items-center" *ngIf="uploader?.queue?.length === 0">
-        <span><i class="fas fa-upload" aria-hidden="true"></i> {{dropMsg | translate}} {{'uploader.or' | translate}}</span>
-        <label for="inputFileUploader" class="btn btn-link m-0 p-0 ml-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
-          <input #fileInput id="inputFileUploader" class="d-none" type="file" role="button" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
-          {{'uploader.browse' | translate}}
-        </label>
+        <span>
+          <i class="fas fa-upload" aria-hidden="true"></i>
+          {{dropMsg | translate}}{{'uploader.or' | translate}}
+          <label for="inputFileUploader" class="btn btn-link m-0 p-0 ml-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
+            <span role="button" [attr.aria-label]="'uploader.browse' | translate">{{'uploader.browse' | translate}}</span>
+          </label>
+          <input #fileInput id="inputFileUploader" class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
+        </span>
       </div>
       <div *ngIf="(isOverBaseDropZone | async) || uploader?.queue?.length !== 0">
         <div class="m-1">

From ad15c07a18dfc16c55eb97706a80f70248c2e92f Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Tue, 5 Oct 2021 12:54:09 +0200
Subject: [PATCH 06/10] [CST-4659] Deque accessibility issues - 469984

---
 .../date-picker/date-picker.component.html    | 94 ++++++++++---------
 .../date-picker/date-picker.component.scss    |  4 +
 .../date-picker/date-picker.component.ts      |  1 +
 .../models/date-picker/date-picker.model.ts   | 10 +-
 .../form/builder/parsers/date-field-parser.ts |  9 +-
 5 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index a5d6d63418..d5421a254f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -1,50 +1,54 @@
-<div class="d-flex">
-  <ds-number-picker
-    tabindex="1"
-    [disabled]="model.disabled"
-    [min]="minYear"
-    [max]="maxYear"
-    [name]="'year'"
-    [size]="4"
-    [(ngModel)]="initialYear"
-    [value]="year"
-    [invalid]="showErrorMessages"
-    [placeholder]='yearPlaceholder'
-    (blur)="onBlur($event)"
-    (change)="onChange($event)"
-    (focus)="onFocus($event)"
-  ></ds-number-picker>
+<div>
+  <fieldset class="d-flex">
+    <legend [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
+      {{model.placeholder}} <span *ngIf="model.required">*</span>
+    </legend>
+    <ds-number-picker
+      tabindex="1"
+      [disabled]="model.disabled"
+      [min]="minYear"
+      [max]="maxYear"
+      [name]="'year'"
+      [size]="4"
+      [(ngModel)]="initialYear"
+      [value]="year"
+      [invalid]="showErrorMessages"
+      [placeholder]='yearPlaceholder'
+      (blur)="onBlur($event)"
+      (change)="onChange($event)"
+      (focus)="onFocus($event)"
+    ></ds-number-picker>
 
-  <ds-number-picker
-    tabindex="2"
-    [min]="minMonth"
-    [max]="maxMonth"
-    [name]="'month'"
-    [size]="6"
-    [(ngModel)]="initialMonth"
-    [value]="month"
-    [placeholder]="monthPlaceholder"
-    [disabled]="!year || model.disabled"
-    (blur)="onBlur($event)"
-    (change)="onChange($event)"
-    (focus)="onFocus($event)"
-  ></ds-number-picker>
-
-  <ds-number-picker
-    tabindex="3"
-    [min]="minDay"
-    [max]="maxDay"
-    [name]="'day'"
-    [size]="2"
-    [(ngModel)]="initialDay"
-    [value]="day"
-    [placeholder]="dayPlaceholder"
-    [disabled]="!month || model.disabled"
-    (blur)="onBlur($event)"
-    (change)="onChange($event)"
-    (focus)="onFocus($event)"
-  ></ds-number-picker>
+    <ds-number-picker
+      tabindex="2"
+      [min]="minMonth"
+      [max]="maxMonth"
+      [name]="'month'"
+      [size]="6"
+      [(ngModel)]="initialMonth"
+      [value]="month"
+      [placeholder]="monthPlaceholder"
+      [disabled]="!year || model.disabled"
+      (blur)="onBlur($event)"
+      (change)="onChange($event)"
+      (focus)="onFocus($event)"
+    ></ds-number-picker>
 
+    <ds-number-picker
+      tabindex="3"
+      [min]="minDay"
+      [max]="maxDay"
+      [name]="'day'"
+      [size]="2"
+      [(ngModel)]="initialDay"
+      [value]="day"
+      [placeholder]="dayPlaceholder"
+      [disabled]="!month || model.disabled"
+      (blur)="onBlur($event)"
+      (change)="onChange($event)"
+      (focus)="onFocus($event)"
+    ></ds-number-picker>
+  </fieldset>
 </div>
 
 <div class="clearfix"></div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
index 9eab449eeb..97698b2102 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
@@ -1,3 +1,7 @@
 .col-lg-1 {
   width: auto;
 }
+
+legend {
+  font-size: initial;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 438f78a6a0..78f9935829 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -20,6 +20,7 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement
   @Input() bindId = true;
   @Input() group: FormGroup;
   @Input() model: DynamicDsDatePickerModel;
+  @Input() legend: string;
 
   @Output() selected = new EventEmitter<number>();
   @Output() remove = new EventEmitter<number>();
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
index fa71e0b6dd..1c053ffc80 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
@@ -1,24 +1,30 @@
 import {
   DynamicDateControlModel,
-  DynamicDateControlModelConfig,
+  DynamicDatePickerModelConfig,
   DynamicFormControlLayout,
   serializable
 } from '@ng-dynamic-forms/core';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DATE';
 
+export interface DynamicDsDateControlModelConfig extends DynamicDatePickerModelConfig {
+  legend?: string;
+}
+
 /**
  * Dynamic Date Picker Model class
  */
 export class DynamicDsDatePickerModel extends DynamicDateControlModel {
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER;
   malformedDate: boolean;
+  legend: string;
   hasLanguages = false;
   repeatable = false;
 
-  constructor(config: DynamicDateControlModelConfig, layout?: DynamicFormControlLayout) {
+  constructor(config: DynamicDsDateControlModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
     this.malformedDate = false;
+    this.legend = config.legend;
   }
 
 }
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index 0f69b0fd57..aef0219579 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -1,6 +1,8 @@
 import { FieldParser } from './field-parser';
-import { DynamicDatePickerModelConfig } from '@ng-dynamic-forms/core';
-import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
+import {
+  DynamicDsDateControlModelConfig,
+  DynamicDsDatePickerModel
+} from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
 import { isNotEmpty } from '../../../empty.util';
 import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/date-picker/date-picker.component';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
@@ -9,7 +11,8 @@ export class DateFieldParser extends FieldParser {
 
   public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
     let malformedDate = false;
-    const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel(null, label);
+    const inputDateModelConfig: DynamicDsDateControlModelConfig = this.initModel(null, false, true);
+    inputDateModelConfig.legend = this.configData.label;
 
     inputDateModelConfig.toggleIcon = 'fas fa-calendar';
     this.setValues(inputDateModelConfig as any, fieldValue);

From 5c8448c36e330179c34675407ceec06a563317f0 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Tue, 5 Oct 2021 16:22:46 +0200
Subject: [PATCH 07/10] [CST-4659] Deque accessibility issues - 469993

---
 .../dynamic-scrollable-dropdown.component.html   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 0e48b85c78..eb4f60add7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -1,8 +1,13 @@
 <div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100">
-  <div class="position-relative right-addon">
+  <div class="position-relative right-addon"
+       role="combobox"
+       [attr.aria-label]="model.label"
+       [attr.aria-owns]="'combobox_' + id + '_listbox'">
     <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
        aria-hidden="true"></i>
     <input class="form-control"
+           [attr.aria-controls]="'combobox_' + id + '_listbox'"
+           [attr.aria-activedescendant]="'combobox_' + id + '_selected'"
            [attr.aria-label]="model.placeholder"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
@@ -24,6 +29,8 @@
        aria-expanded="false"
        [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
+         role="listbox"
+         [id]="'combobox_' + id + '_listbox'"
          [attr.aria-label]="model.placeholder"
          infiniteScroll
          [infiniteScrollDistance]="2"
@@ -32,7 +39,10 @@
          [scrollWindow]="false">
 
       <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
-      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry); sdRef.close()" title="{{ listEntry.display }}">
+      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList"
+              (click)="onSelect(listEntry); sdRef.close()"
+              title="{{ listEntry.display }}" role="option"
+              [attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">
         {{inputFormatter(listEntry)}}
       </button>
       <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
@@ -40,5 +50,3 @@
 
   </div>
 </div>
-
-

From 8173d7d80598bf2251f242166789d95003113ef9 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Tue, 5 Oct 2021 17:51:31 +0200
Subject: [PATCH 08/10] [CST-4659] Deque accessibility issues - 470010

---
 ...amic-form-control-container.component.html | 141 +++++++++---------
 1 file changed, 71 insertions(+), 70 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 2fa3ea1723..3cf06e4121 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -1,79 +1,80 @@
 <div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
-    <label *ngIf="!isCheckbox && hasLabel"
-           [id]="'label_' + model.id"
-           [for]="id"
-           [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
-           [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
-    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
-    <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
-    <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
+  <label *ngIf="!isCheckbox && hasLabel"
+         [id]="'label_' + model.id"
+         [for]="id"
+         [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
+         [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
+  <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
+  <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
+  <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
                       'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
-        <div [ngClass]="getClass('grid', 'control')">
-            <ng-container #componentViewContainer></ng-container>
-          <small *ngIf="hasHint && ((model.repeatable === false && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
-                 class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
-          <!-- In case of repeatable fields show empty space for all elements except the first -->
-          <div *ngIf="context?.index !== null
+    <div [ngClass]="getClass('grid', 'control')">
+      <div [attr.aria-labelledby]="id + '_errors'">
+        <ng-container #componentViewContainer></ng-container>
+      </div>
+      <small *ngIf="hasHint && ((model.repeatable === false && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
+             class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+      <!-- In case of repeatable fields show empty space for all elements except the first -->
+      <div *ngIf="context?.index !== null
               && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
 
-          <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
-          </div>
+      <div *ngIf="showErrorMessages" [id]="id + '_errors'"
+           [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+        <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+      </div>
 
-        </div>
-        <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
-            <select
-                    #language="ngModel"
-                    [disabled]="model.readOnly"
-                    [(ngModel)]="model.language"
-                    class="form-control"
-                    (blur)="onBlur($event)"
-                    (change)="onChangeLanguage($event)"
-                    [ngModelOptions]="{standalone: true}"
-                    required>
-                <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
-            </select>
-        </div>
-        <div *ngIf="isRelationship" class="col-auto text-center">
-            <button class="btn btn-secondary"
-                    type="button"
-                    ngbTooltip="{{'form.lookup-help' | translate}}"
-                    placement="top"
-                    (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
-            </button>
-        </div>
     </div>
-    <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
-    <ng-container *ngIf="value?.isVirtual">
-        <ds-existing-metadata-list-element
-                *ngIf="model.hasSelectableMetadata"
-                [reoRel]="relationshipValue$ | async"
-                [submissionItem]="item$ | async"
-                [listId]="listId"
-                [metadataFields]="model.metadataFields"
-                [submissionId]="model.submissionId"
-                [relationshipOptions]="model.relationship"
-                (remove)="onRemove()"
-        >
-        </ds-existing-metadata-list-element>
-        <ds-existing-relation-list-element
-                *ngIf="!model.hasSelectableMetadata"
-                [ngClass]="{'d-block pb-2 pt-2': !context?.index}"
-                [reoRel]="relationshipValue$ | async"
-                [submissionItem]="item$ | async"
-                [listId]="listId"
-                [metadataFields]="model.metadataFields"
-                [submissionId]="model.submissionId"
-                [relationshipOptions]="model.relationship"
-        >
-        </ds-existing-relation-list-element>
-        <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
-             class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
-        <div class="clearfix w-100 mb-2"></div>
-    </ng-container>
-    <ng-content></ng-content>
+    <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
+      <select
+        #language="ngModel"
+        [disabled]="model.readOnly"
+        [(ngModel)]="model.language"
+        class="form-control"
+        (blur)="onBlur($event)"
+        (change)="onChangeLanguage($event)"
+        [ngModelOptions]="{standalone: true}"
+        required>
+        <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
+      </select>
+    </div>
+    <div *ngIf="isRelationship" class="col-auto text-center">
+      <button class="btn btn-secondary"
+              type="button"
+              ngbTooltip="{{'form.lookup-help' | translate}}"
+              placement="top"
+              (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
+      </button>
+    </div>
+  </div>
+  <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
+  <ng-container *ngIf="value?.isVirtual">
+    <ds-existing-metadata-list-element
+      *ngIf="model.hasSelectableMetadata"
+      [reoRel]="relationshipValue$ | async"
+      [submissionItem]="item$ | async"
+      [listId]="listId"
+      [metadataFields]="model.metadataFields"
+      [submissionId]="model.submissionId"
+      [relationshipOptions]="model.relationship"
+      (remove)="onRemove()"
+    >
+    </ds-existing-metadata-list-element>
+    <ds-existing-relation-list-element
+      *ngIf="!model.hasSelectableMetadata"
+      [ngClass]="{'d-block pb-2 pt-2': !context?.index}"
+      [reoRel]="relationshipValue$ | async"
+      [submissionItem]="item$ | async"
+      [listId]="listId"
+      [metadataFields]="model.metadataFields"
+      [submissionId]="model.submissionId"
+      [relationshipOptions]="model.relationship"
+    >
+    </ds-existing-relation-list-element>
+    <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+           class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+    <div class="clearfix w-100 mb-2"></div>
+  </ng-container>
+  <ng-content></ng-content>
 </div>
-
-

From eaa3d96bc7e596a65f2f3d4713060a4c4404c85d Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Wed, 6 Oct 2021 15:25:37 +0200
Subject: [PATCH 09/10] [CST-4659] Deque accessibility issues - 470010 and
 tests

---
 .../ds-dynamic-form-control-container.component.html          | 2 +-
 .../models/date-picker/date-picker.component.spec.ts          | 1 +
 src/app/shared/testing/dynamic-form-mock-services.ts          | 3 ++-
 .../upload/file/edit/section-upload-file-edit.model.ts        | 4 ++--
 src/assets/i18n/en.json5                                      | 4 ++++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 3cf06e4121..fc115e043a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -11,7 +11,7 @@
   <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
                       'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
     <div [ngClass]="getClass('grid', 'control')">
-      <div [attr.aria-labelledby]="id + '_errors'">
+      <div>
         <ng-container #componentViewContainer></ng-container>
       </div>
       <small *ngIf="hasHint && ((model.repeatable === false && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
index 87e49956bb..4989dab93a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -69,6 +69,7 @@ describe('DsDatePickerComponent test suite', () => {
             [bindId]='bindId'
             [group]='group'
             [model]='model'
+            [legend]='legend'
             (blur)='onBlur($event)'
             (change)='onValueChange($event)'
             (focus)='onFocus($event)'></ds-date-picker>`;
diff --git a/src/app/shared/testing/dynamic-form-mock-services.ts b/src/app/shared/testing/dynamic-form-mock-services.ts
index 2cf705ff90..1cbd470e23 100644
--- a/src/app/shared/testing/dynamic-form-mock-services.ts
+++ b/src/app/shared/testing/dynamic-form-mock-services.ts
@@ -1,5 +1,6 @@
 export const mockDynamicFormLayoutService = jasmine.createSpyObj('DynamicFormLayoutService', {
-  getElementId: jasmine.createSpy('getElementId')
+  getElementId: jasmine.createSpy('getElementId'),
+  getClass: 'class',
 });
 
 export const mockDynamicFormValidationService = jasmine.createSpyObj('DynamicFormValidationService', {
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
index 300a4b461f..14886128a5 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
@@ -74,7 +74,7 @@ export const BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_CONFIG: DynamicDatePicke
     required: null
   },
   errorMessages: {
-    required: 'submission.sections.upload.form.date-required'
+    required: 'submission.sections.upload.form.date-required-from'
   }
 };
 export const BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT: DynamicFormControlLayout = {
@@ -104,7 +104,7 @@ export const BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_CONFIG: DynamicDatePickerM
     required: null
   },
   errorMessages: {
-    required: 'submission.sections.upload.form.date-required'
+    required: 'submission.sections.upload.form.date-required-until'
   }
 };
 export const BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT: DynamicFormControlLayout = {
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4b6356f556..f3f09da1d4 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3599,6 +3599,10 @@
 
   "submission.sections.upload.form.date-required": "Date is required.",
 
+  "submission.sections.upload.form.date-required-from": "Grant access from date is required.",
+
+  "submission.sections.upload.form.date-required-until": "Grant access until date is required.",
+
   "submission.sections.upload.form.from-label": "Grant access from",
 
   "submission.sections.upload.form.from-placeholder": "From",

From d264576a0793cdb17fcca222273fb1da22140069 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Mon, 18 Oct 2021 10:40:02 +0200
Subject: [PATCH 10/10] [CST-4659] Deque accessibility issues - fix 470001

---
 .../sections/upload/file/section-upload-file.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html
index ce10e0ea59..bac71df1a7 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -29,17 +29,17 @@
           </button>
         </ng-container>
         <ng-container *ngIf="!readMode">
-          <button class="btn btn-link"
+          <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.save-metadata' | translate"
                   title="{{ 'submission.sections.upload.save-metadata' | translate }}"
                   (click)="saveBitstreamData($event);">
             <i class="fa fa-save fa-2x text-success"></i>
           </button>
-          <button class="btn btn-link"
+          <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.undo' | translate"
                   title="{{ 'submission.sections.upload.undo' | translate }}"
                   (click)="$event.preventDefault();switchMode();"><i class="fa fa-ban fa-2x text-warning"></i></button>
-          <button class="btn btn-link"
+          <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
                   title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
                   [disabled]="(processingDelete$ | async)"