From 07b95c2634af6e5f9a64aa351564a1c902bc9fdc Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Fri, 1 Sep 2023 09:48:17 -0500
Subject: [PATCH] Fix ARIA labels and tabindex on date picker in submission
 form.  Tabindex is unnecessary & throws accessibility errors from AXE tools

(cherry picked from commit 5dad8bec392cc581baa7116559fe780be51198cf)
---
 .../models/date-picker/date-picker.component.html           | 6 +++---
 .../shared/form/number-picker/number-picker.component.html  | 5 +++--
 .../form/number-picker/number-picker.component.spec.ts      | 1 -
 3 files changed, 6 insertions(+), 6 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 26803f3c67..3bf02c4abd 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
@@ -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"
diff --git a/src/app/shared/form/number-picker/number-picker.component.html b/src/app/shared/form/number-picker/number-picker.component.html
index 9b2ef98925..d4cf9e23f4 100644
--- a/src/app/shared/form/number-picker/number-picker.component.html
+++ b/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>
diff --git a/src/app/shared/form/number-picker/number-picker.component.spec.ts b/src/app/shared/form/number-picker/number-picker.component.spec.ts
index d4484dbfa3..bf33a6bdd0 100644
--- a/src/app/shared/form/number-picker/number-picker.component.spec.ts
+++ b/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"