From c6314232a6d75de2fe71003200abfb0cf0ea4c90 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Wed, 23 Oct 2024 19:01:49 +0200 Subject: [PATCH 01/13] (fix) timepicker styling improvements: implemented usage of M3 variables --- sass/components/_timepicker.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 23f7a6366c..01e48fc395 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -35,7 +35,7 @@ input[type=text]{ height: 4rem; - color: rgba(255, 255, 255, 0.6); + color: var(--md-sys-color-secondary); border-bottom: 0px; font-size: 4rem; direction: ltr; @@ -60,7 +60,7 @@ input[type=text].timepicker-input-minutes { } input[type=text].text-primary { - color: rgba(255, 255, 255, 1); + color: var(--md-sys-color-on-background); } .timepicker-display-am-pm { From daec4e13dfa78d5dfd50ca3b5def5070b84ef5fd Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Wed, 23 Oct 2024 19:36:21 +0200 Subject: [PATCH 02/13] (fix) timepicker styling improvements: mobile enhancements #476 --- sass/components/_timepicker.scss | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 01e48fc395..ad2fb34618 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -17,7 +17,7 @@ /* Clock Digital Display */ .timepicker-digital-display { - width: 200px; + width: auto; flex: 1 auto; background-color: var(--md-sys-color-primary);; padding: 10px; @@ -27,11 +27,12 @@ .timepicker-text-container { font-size: 4rem; font-weight: bold; - text-align: center; + text-align: left; color: var(--font-on-primary-color-medium); font-weight: 400; position: relative; user-select: none; + padding: 1rem 1rem 1.5rem 1rem; input[type=text]{ height: 4rem; @@ -55,7 +56,7 @@ input[type=text].timepicker-input-hours { } input[type=text].timepicker-input-minutes { - width: 33%; + width: 36%; margin-left: 3px; } @@ -66,11 +67,21 @@ input[type=text].text-primary { .timepicker-display-am-pm { font-size: 1.3rem; position: absolute; + top: 1.2rem; right: 1rem; - bottom: 1rem; font-weight: 400; + bottom: auto; } +.timepicker-modal .am-btn { + .timepicker-modal .pm-btn { + width: 3.6rem; + height: 2rem; + line-height: 2rem; + vertical-align: middle; + text-align: center; + } +} /* Analog Clock Display */ .timepicker-analog-display { From e19902ac996aa93aef39e07dc1edc9eb206d0b0c Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Wed, 23 Oct 2024 19:39:45 +0200 Subject: [PATCH 03/13] (fix) timepicker styling improvements: mobile enhancements #476 --- sass/components/_timepicker.scss | 42 +++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index ad2fb34618..7c3726b809 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -69,18 +69,17 @@ input[type=text].text-primary { position: absolute; top: 1.2rem; right: 1rem; - font-weight: 400; bottom: auto; + font-weight: 400; } -.timepicker-modal .am-btn { - .timepicker-modal .pm-btn { - width: 3.6rem; - height: 2rem; - line-height: 2rem; - vertical-align: middle; - text-align: center; - } +.timepicker-modal .am-btn, +.timepicker-modal .pm-btn { + width: 3.6rem; + height: 2rem; + line-height: 2rem; + vertical-align: middle; + text-align: center; } /* Analog Clock Display */ @@ -96,9 +95,8 @@ input[type=text].text-primary { height: 270px; overflow: visible; position: relative; - margin: auto; - margin-top: 25px; - margin-bottom: 5px; + margin: 30px 14px 14px; + padding: 10px; user-select: none; } @@ -206,13 +204,33 @@ input[type=text].text-primary { .timepicker-text-container { top: 32%; + padding: 0; + text-align: center; } .timepicker-display-am-pm { position: relative; + top: auto; right: auto; bottom: auto; text-align: center; margin-top: 1.2rem; } + + .timepicker-digital-display { + width: inherit; + } + + input[type=text].timepicker-input-minutes { + width: 36%; + } + + .timepicker-modal .am-btn, + .timepicker-modal .pm-btn { + width: auto; + height: auto; + line-height: inherit; + vertical-align: top; + text-align: inherit; + } } From 58e62d6c9b43435fd88175fe3adb1b4ffa57d5f9 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Wed, 23 Oct 2024 20:08:32 +0200 Subject: [PATCH 04/13] (fix) remove redunant selector, optimized minutes input field width --- sass/components/_timepicker.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 7c3726b809..7a063c59e4 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -56,7 +56,7 @@ input[type=text].timepicker-input-hours { } input[type=text].timepicker-input-minutes { - width: 36%; + width: 33%; margin-left: 3px; } @@ -217,12 +217,8 @@ input[type=text].text-primary { margin-top: 1.2rem; } - .timepicker-digital-display { - width: inherit; - } - input[type=text].timepicker-input-minutes { - width: 36%; + min-width: 5.3rem; } .timepicker-modal .am-btn, From e497916603d0042aefae5f26171385e79ad42462 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Thu, 24 Oct 2024 07:31:32 +0200 Subject: [PATCH 05/13] (fix/enhancement) timepicker accessibility: implemented number fields for hours/minutes, updated event listeners --- src/timepicker.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index 663abfa7ce..d0091d41e4 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -253,9 +253,10 @@ export class Timepicker extends Component { this.el.addEventListener('keydown', this._handleInputKeydown); this.plate.addEventListener('mousedown', this._handleClockClickStart); this.plate.addEventListener('touchstart', this._handleClockClickStart); - this.digitalClock.addEventListener('keyup', this._inputFromTextField); - this.inputHours.addEventListener('click', () => this.showView('hours')); - this.inputMinutes.addEventListener('click', () => this.showView('minutes')); + this.digitalClock.addEventListener('change', this._inputFromTextField); + this.inputHours.addEventListener('focus', () => this.showView('hours')); + this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); + this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); } _removeEventHandlers() { @@ -567,7 +568,7 @@ export class Timepicker extends Component { this.hours = +value[0] || 0; this.minutes = +value[1] || 0; this.inputHours.value = this.hours; - this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + this.inputMinutes.value = this.minutes; this._updateAmPmView(); } @@ -639,9 +640,7 @@ export class Timepicker extends Component { const value = parseInt(this.inputHours.value); if (value > 0 && value < 13) { this.drawClockFromTimeInput(value, isHours); - this.showView('minutes', this.options.duration / 2); this.hours = value; - this.inputMinutes.focus(); } else { const hour = new Date().getHours(); @@ -651,10 +650,9 @@ export class Timepicker extends Component { else { const value = parseInt(this.inputMinutes.value); if (value >= 0 && value < 60) { - this.inputMinutes.value = Timepicker._addLeadingZero(value); + this.inputMinutes.value = String(value); this.drawClockFromTimeInput(value, isHours); this.minutes = value; - (this.modalEl.querySelector('.confirmation-btns :nth-child(2)')).focus(); } else { const minutes = new Date().getMinutes(); @@ -759,6 +757,10 @@ export class Timepicker extends Component { this.bg.setAttribute('cy', cy2.toString()); } + formatMinutes() { + this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value)); + } + /** * Open timepicker. */ @@ -809,9 +811,9 @@ export class Timepicker extends Component {
- + : - +
From 219a133b035b4c18419d2e1e32a3daf42977fc54 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Thu, 24 Oct 2024 20:09:51 +0200 Subject: [PATCH 06/13] (fix/enhancement) timepicker hours/minutes HTML5 number input support for enhancing keyboard accessibility --- sass/components/_timepicker.scss | 18 +++++++++++------- src/timepicker.ts | 26 +++++++++++++++++--------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 7a063c59e4..5b107018aa 100644 --- 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 index d0091d41e4..cc8c9da1c0 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -639,25 +639,33 @@ export class Timepicker extends Component { 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 {
- + : - +
From 1bafda688d2fab4cc698dd7c640aaf245f04c51d Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 14:46:49 +0100 Subject: [PATCH 07/13] reversed hunk from 219a133b --- sass/components/_timepicker.scss | 18 +++++++----------- src/timepicker.ts | 4 ++-- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 5b107018aa..7a063c59e4 100644 --- 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=number] { + input[type=text]{ height: 4rem; color: var(--md-sys-color-secondary); - border-bottom: 0; + border-bottom: 0px; font-size: 4rem; direction: ltr; } @@ -49,18 +49,18 @@ cursor: pointer; } -input[type=number].timepicker-input-hours { +input[type=text].timepicker-input-hours { text-align: right; width: 28%; margin-right: 3px; } -input[type=number].timepicker-input-minutes { +input[type=text].timepicker-input-minutes { width: 33%; margin-left: 3px; } -input[type=number].text-primary { +input[type=text].text-primary { color: var(--md-sys-color-on-background); } @@ -217,12 +217,8 @@ input[type=number].text-primary { margin-top: 1.2rem; } - input[type=number].timepicker-input-hours { - min-width: 6rem; - } - - input[type=number].timepicker-input-minutes { - min-width: 6.5rem; + input[type=text].timepicker-input-minutes { + min-width: 5.3rem; } .timepicker-modal .am-btn, diff --git a/src/timepicker.ts b/src/timepicker.ts index cc8c9da1c0..d5ce595670 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -819,9 +819,9 @@ export class Timepicker extends Component {
- + : - +
From cbb7095086165c8f62d5fa30f8c4967ce916fc5b Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 14:49:48 +0100 Subject: [PATCH 08/13] reversed hunk from e4979166 --- src/timepicker.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index d5ce595670..f40c9b8445 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -253,7 +253,7 @@ export class Timepicker extends Component { this.el.addEventListener('keydown', this._handleInputKeydown); this.plate.addEventListener('mousedown', this._handleClockClickStart); this.plate.addEventListener('touchstart', this._handleClockClickStart); - this.digitalClock.addEventListener('change', this._inputFromTextField); + this.digitalClock.addEventListener('keyup', this._inputFromTextField); this.inputHours.addEventListener('focus', () => this.showView('hours')); this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); @@ -568,7 +568,7 @@ export class Timepicker extends Component { this.hours = +value[0] || 0; this.minutes = +value[1] || 0; this.inputHours.value = this.hours; - this.inputMinutes.value = this.minutes; + this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); this._updateAmPmView(); } @@ -819,9 +819,9 @@ export class Timepicker extends Component {
- + : - +
From 0e9c54e71f87370e4a1d75ee3c645563058fb716 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 14:56:46 +0100 Subject: [PATCH 09/13] (fix) timepicker accessibility: accessibility fix on keyboard time input with trailing zero's by adding trailing zeros on focus out, extended component twelveHour option support in inputFromTextField method, fixed incorrect rendering of analog clock hand on 24h time format --- src/timepicker.ts | 53 ++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index f40c9b8445..3e8b7f2c8f 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -255,6 +255,7 @@ export class Timepicker extends Component { this.plate.addEventListener('touchstart', this._handleClockClickStart); this.digitalClock.addEventListener('keyup', this._inputFromTextField); this.inputHours.addEventListener('focus', () => this.showView('hours')); + this.inputHours.addEventListener('focusout', () => this.formatHours()); this.inputMinutes.addEventListener('focus', () => this.showView('minutes')); this.inputMinutes.addEventListener('focusout', () => this.formatMinutes()); } @@ -636,36 +637,26 @@ export class Timepicker extends Component { _inputFromTextField = () => { const isHours = this.currentView === 'hours'; - if (isHours) { + if (isHours && this.inputHours.value !== '') { const value = parseInt(this.inputHours.value); - if (value > 0 && value < 13) { + if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) { this.hours = value; } - else if(value == 0) { - this.hours = 12; - this.inputHours.value = this.hours.toString(); - } else { - this.hours = 1; - this.inputHours.value = this.hours.toString(); + this.setHoursDefault(); } this.drawClockFromTimeInput(this.hours, isHours); } - else { + else if(!isHours && this.inputMinutes.value !== '') { const value = parseInt(this.inputMinutes.value); if (value >= 0 && value < 60) { - 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 { - this.minutes = 0; - this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); + this.minutes = new Date().getMinutes(); + this.inputMinutes.value = this.minutes; } - this.drawClockFromTimeInput(value, isHours); + this.drawClockFromTimeInput(this.minutes, isHours); } } @@ -673,17 +664,8 @@ export class Timepicker extends Component { const unit = Math.PI / (isHours ? 6 : 30); const radian = value * unit; let radius; - if (this.options.twelveHour) { - radius = this.options.outerRadius; - } - let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), - cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), - cx2 = Math.sin(radian) * radius, - cy2 = -Math.cos(radian) * radius; - this.hand.setAttribute('x2', cx1.toString()); - this.hand.setAttribute('y2', cy1.toString()); - this.bg.setAttribute('cx', cx2.toString()); - this.bg.setAttribute('cy', cy2.toString()); + radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + this.setClockAttributes(radian, radius); } setHand(x, y, roundBy5: boolean = false) { @@ -755,6 +737,10 @@ export class Timepicker extends Component { } // Set clock hand and others' position + this.setClockAttributes(radian, radius); + } + + setClockAttributes(radian: number, radius: number) { let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, @@ -765,10 +751,21 @@ export class Timepicker extends Component { this.bg.setAttribute('cy', cy2.toString()); } + formatHours() { + if (this.inputHours.value == '') this.setHoursDefault(); + this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value)); + } + formatMinutes() { + if (this.inputMinutes.value == '') this.minutes = new Date().getMinutes(); this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value)); } + setHoursDefault() { + this.hours = new Date().getHours(); + this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString(); + } + /** * Open timepicker. */ From 6fe1f8ad2528eee2bf66d70aeb93bf8fc5d726c7 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 15:08:28 +0100 Subject: [PATCH 10/13] (fix) timepicker accessibility: readd conditional statement to handle twelveHour option in drawClockFromTimeInput method --- src/timepicker.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index 3e8b7f2c8f..48737c8fe7 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -664,7 +664,11 @@ export class Timepicker extends Component { const unit = Math.PI / (isHours ? 6 : 30); const radian = value * unit; let radius; - radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + if (this.options.twelveHour) { + radius = this.options.outerRadius; + } else { + radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius; + } this.setClockAttributes(radian, radius); } From aec7b955ea83dfe6e6b8cd944df6896db78ecd7b Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 15:27:08 +0100 Subject: [PATCH 11/13] (fix) timepicker accessibility: fixes leading zero --- src/timepicker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index 48737c8fe7..d27752d287 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -568,7 +568,7 @@ export class Timepicker extends Component { } this.hours = +value[0] || 0; this.minutes = +value[1] || 0; - this.inputHours.value = this.hours; + this.inputHours.value = Timepicker._addLeadingZero(this.hours); this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes); this._updateAmPmView(); @@ -734,7 +734,7 @@ export class Timepicker extends Component { this[this.currentView] = value; if (isHours) { - this.inputHours.value = value.toString(); + this.inputHours.value = Timepicker._addLeadingZero(value); } else { this.inputMinutes.value = Timepicker._addLeadingZero(value); From 2c0f0652b2a224429a8f80c8ebc2b6732f0b6f60 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 16:47:23 +0100 Subject: [PATCH 12/13] (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 { _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 { 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; } From 2abdbe8e327d5e3d303556410143a69c004d13be Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Tue, 29 Oct 2024 16:56:05 +0100 Subject: [PATCH 13/13] (fix) timepicker refinement: change tabindex by element property --- src/timepicker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/timepicker.ts b/src/timepicker.ts index edd02497a2..5234575b40 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -366,7 +366,7 @@ export class Timepicker extends Component { this.options.onOpenStart.call(this); } this.modalEl.querySelectorAll('.btn').forEach((e: HTMLButtonElement) => { - if (e.style.visibility !== 'hidden') e.setAttribute('tabindex', '0'); + if (e.style.visibility !== 'hidden') e.tabIndex = 0; }); }, onOpenEnd: this.options.onOpenEnd, @@ -375,7 +375,7 @@ export class Timepicker extends Component { this.options.onCloseStart.call(this); } this.modalEl.querySelectorAll('.btn').forEach((e: HTMLButtonElement) => { - e.setAttribute('tabindex', '-1'); + e.tabIndex = -1; }); }, onCloseEnd: () => {