Fix ARIA labels and tabindex on date picker in submission form. Tabindex is unnecessary & throws accessibility errors from AXE tools

Author: tdonohue

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

@@ -4,7 +4,7 @@
       {{model.placeholder}} <span *ngIf="model.required">*</span>
     </legend>
     <ds-number-picker
-      tabindex="1"
+      tabindex="0"
       [id]="model.id + '_year'"
       [disabled]="model.disabled"
       [min]="minYear"
@@ -21,7 +21,7 @@
     ></ds-number-picker>
 
     <ds-number-picker
-      tabindex="2"
+      tabindex="0"
       [id]="model.id + '_month'"
       [min]="minMonth"
       [max]="maxMonth"
@@ -37,7 +37,7 @@
     ></ds-number-picker>
 
     <ds-number-picker
-      tabindex="3"
+      tabindex="0"
       [id]="model.id + '_day'"
       [min]="minDay"
       [max]="maxDay"

src/app/shared/form/number-picker/number-picker.component.html

@@ -6,7 +6,7 @@
       [disabled]="disabled"
       (click)="toggleUp()">
       <span class="chevron"></span>
-      <span class="sr-only">Increment</span>
+      <span class="sr-only">Increment {{placeholder}}</span>
     </button>
     <input
       id="{{id}}"
@@ -24,6 +24,7 @@
       [disabled]="disabled"
       [ngClass]="{'is-invalid': invalid}"
       title="{{placeholder}}"
+      [attr.aria-label]="placeholder"
     >
     <button
       class="btn btn-link-focus"
@@ -32,6 +33,6 @@
       [disabled]="disabled"
       (click)="toggleDown()">
       <span class="chevron bottom"></span>
-      <span class="sr-only">Decrement</span>
+      <span class="sr-only">Decrement {{placeholder}}</span>
     </button>
 </div>

src/app/shared/form/number-picker/number-picker.component.spec.ts

@@ -42,7 +42,6 @@ describe('NumberPickerComponent test suite', () => {
   beforeEach(() => {
     html = `
       <ds-number-picker
-        tabindex="1"
         [disabled]="disabled"
         [min]="min"
         [max]="max"