(fix/enhancement) timepicker hours/minutes HTML5 number input support…

… for enhancing keyboard accessibility
gselderslaghs · Oct 24, 2024 · 219a133 · 219a133
1 parent e497916
commit 219a133
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
@@ -34,10 +34,10 @@
   user-select: none;
   padding: 1rem 1rem 1.5rem 1rem;
 
-  input[type=text]{
+  input[type=number] {
     height: 4rem;
     color: var(--md-sys-color-secondary);
-    border-bottom: 0px;
+    border-bottom: 0;
     font-size: 4rem;
     direction: ltr;
   }
@@ -49,18 +49,18 @@
   cursor: pointer;
 }
 
-input[type=text].timepicker-input-hours {
+input[type=number].timepicker-input-hours {
   text-align: right;
   width: 28%;
   margin-right: 3px;
 }
 
-input[type=text].timepicker-input-minutes {
+input[type=number].timepicker-input-minutes {
   width: 33%;
   margin-left: 3px;
 }
 
-input[type=text].text-primary {
+input[type=number].text-primary {
   color: var(--md-sys-color-on-background);
 }
 
@@ -217,8 +217,12 @@ input[type=text].text-primary {
     margin-top: 1.2rem;
   }
 
-  input[type=text].timepicker-input-minutes {
-    min-width: 5.3rem;
+  input[type=number].timepicker-input-hours {
+    min-width: 6rem;
+  }
+
+  input[type=number].timepicker-input-minutes {
+    min-width: 6.5rem;
   }
 
   .timepicker-modal .am-btn,

diff --git a/src/timepicker.ts b/src/timepicker.ts
@@ -639,25 +639,33 @@ export class Timepicker extends Component<TimepickerOptions> {
     if (isHours) {
       const value = parseInt(this.inputHours.value);
       if (value > 0 && value < 13) {
-        this.drawClockFromTimeInput(value, isHours);
         this.hours = value;
       }
+      else if(value == 0) {
+        this.hours = 12;
+        this.inputHours.value = this.hours.toString();
+      }
       else {
-        const hour = new Date().getHours();
-        this.inputHours.value = (hour % 12).toString();
+        this.hours = 1;
+        this.inputHours.value = this.hours.toString();
       }
+      this.drawClockFromTimeInput(this.hours, isHours);
     }
     else {
       const value = parseInt(this.inputMinutes.value);
       if (value >= 0 && value < 60) {
-        this.inputMinutes.value = String(value);
-        this.drawClockFromTimeInput(value, isHours);
+        this.inputMinutes.value = Timepicker._addLeadingZero(value);
         this.minutes = value;
       }
+      else if(value == -1) {
+        this.minutes = 59;
+        this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes.toString());
+      }
       else {
-        const minutes = new Date().getMinutes();
-        this.inputMinutes.value = Timepicker._addLeadingZero(minutes);
+        this.minutes = 0;
+        this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
       }
+      this.drawClockFromTimeInput(value, isHours);
     }
   }
 
@@ -811,9 +819,9 @@ export class Timepicker extends Component<TimepickerOptions> {
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
-                <input type="number" maxlength="2" autofocus class="timepicker-input-hours text-primary" min="1" max="12"/>
+                <input type="number" maxlength="2" autofocus class="timepicker-input-hours text-primary"/>
                 :
-                <input type="number" maxlength="2" class="timepicker-input-minutes" min="0" max="59"/>
+                <input type="number" maxlength="2" class="timepicker-input-minutes"/>
               </div>
               <div class="timepicker-display-column timepicker-display-am-pm">
                 <div class="timepicker-span-am-pm"></div>