[CST-4659] Deque accessibility issues - 469984

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html

@@ -1,50 +1,54 @@
-<div class="d-flex">
+<div>
-  <ds-number-picker
+  <fieldset class="d-flex">
-    tabindex="1"
+    <legend [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
-    [disabled]="model.disabled"
+      {{model.placeholder}} <span *ngIf="model.required">*</span>
-    [min]="minYear"
+    </legend>
-    [max]="maxYear"
+    <ds-number-picker
-    [name]="'year'"
+      tabindex="1"
-    [size]="4"
+      [disabled]="model.disabled"
-    [(ngModel)]="initialYear"
+      [min]="minYear"
-    [value]="year"
+      [max]="maxYear"
-    [invalid]="showErrorMessages"
+      [name]="'year'"
-    [placeholder]='yearPlaceholder'
+      [size]="4"
-    (blur)="onBlur($event)"
+      [(ngModel)]="initialYear"
-    (change)="onChange($event)"
+      [value]="year"
-    (focus)="onFocus($event)"
+      [invalid]="showErrorMessages"
-  ></ds-number-picker>
+      [placeholder]='yearPlaceholder'
+      (blur)="onBlur($event)"
+      (change)="onChange($event)"
+      (focus)="onFocus($event)"
+    ></ds-number-picker>
 
-  <ds-number-picker
+    <ds-number-picker
-    tabindex="2"
+      tabindex="2"
-    [min]="minMonth"
+      [min]="minMonth"
-    [max]="maxMonth"
+      [max]="maxMonth"
-    [name]="'month'"
+      [name]="'month'"
-    [size]="6"
+      [size]="6"
-    [(ngModel)]="initialMonth"
+      [(ngModel)]="initialMonth"
-    [value]="month"
+      [value]="month"
-    [placeholder]="monthPlaceholder"
+      [placeholder]="monthPlaceholder"
-    [disabled]="!year || model.disabled"
+      [disabled]="!year || model.disabled"
-    (blur)="onBlur($event)"
+      (blur)="onBlur($event)"
-    (change)="onChange($event)"
+      (change)="onChange($event)"
-    (focus)="onFocus($event)"
+      (focus)="onFocus($event)"
-  ></ds-number-picker>
+    ></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="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>

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;
+}

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>();

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;
   }
 
 }

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 {
-import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
+  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);