From 2c0f0652b2a224429a8f80c8ebc2b6732f0b6f60 Mon Sep 17 00:00:00 2001
From: Geert Selderslaghs <geert@codemindit.com>
Date: Tue, 29 Oct 2024 16:47:23 +0100
Subject: [PATCH] (fix/enhancement) timepicker accessibility: implemented
 tabindex states on modal open/close

---
 src/timepicker.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/timepicker.ts b/src/timepicker.ts
index d27752d287..edd02497a2 100644
--- a/src/timepicker.ts
+++ b/src/timepicker.ts
@@ -361,9 +361,23 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   _setupModal() {
     this.modal = Modal.init(this.modalEl, {
-      onOpenStart: this.options.onOpenStart,
+      onOpenStart: () => {
+        if (typeof this.options.onOpenStart === 'function') {
+          this.options.onOpenStart.call(this);
+        }
+        this.modalEl.querySelectorAll('.btn').forEach((e: HTMLButtonElement) => {
+          if (e.style.visibility !== 'hidden') e.setAttribute('tabindex', '0');
+        });
+      },
       onOpenEnd: this.options.onOpenEnd,
-      onCloseStart: this.options.onCloseStart,
+      onCloseStart: () => {
+        if (typeof this.options.onCloseStart === 'function') {
+          this.options.onCloseStart.call(this);
+        }
+        this.modalEl.querySelectorAll('.btn').forEach((e: HTMLButtonElement) => {
+          e.setAttribute('tabindex', '-1');
+        });
+      },
       onCloseEnd: () => {
         if (typeof this.options.onCloseEnd === 'function') {
           this.options.onCloseEnd.call(this);
@@ -394,10 +408,10 @@ export class Timepicker extends Component<TimepickerOptions> {
 
   private _createButton(text: string, visibility: string): HTMLButtonElement {
     const button = document.createElement('button');
-    button.classList.add('btn-flat', 'waves-effect');
+    button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
     button.style.visibility = visibility;
     button.type = 'button';
-    button.tabIndex = this.options.twelveHour ? 3 : 1;
+    button.tabIndex = -1;
     button.innerText = text;
     return button;
   }