From aa956329a66ec5b6ffe4a51d0f1707de341bf5f6 Mon Sep 17 00:00:00 2001 From: Geert Selderslaghs Date: Sun, 17 Nov 2024 22:45:43 +0100 Subject: [PATCH] (fix) timepicker accessibility - styling enhancements --- sass/components/_timepicker.scss | 95 ++++++++++++++++++++++++-------- src/timepicker.ts | 24 +++++--- 2 files changed, 86 insertions(+), 33 deletions(-) diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss index 7a063c59e4..adb2b4cc0c 100644 --- a/sass/components/_timepicker.scss +++ b/sass/components/_timepicker.scss @@ -20,13 +20,12 @@ width: auto; flex: 1 auto; background-color: var(--md-sys-color-primary);; - padding: 10px; + padding: 2rem .67rem .67rem .67rem; font-weight: 300; } .timepicker-text-container { font-size: 4rem; - font-weight: bold; text-align: left; color: var(--font-on-primary-color-medium); font-weight: 400; @@ -43,21 +42,33 @@ } } +.timepicker-display-column { + display: inline-flex; +} + +.timepicker-input-hours-wrapper, +.timepicker-input-minutes-wrapper { + width: 6.9rem; + height: 5.2rem; +} + .timepicker-input-hours, .timepicker-input-minutes, .timepicker-span-am-pm div { cursor: pointer; } -input[type=text].timepicker-input-hours { - text-align: right; - width: 28%; - margin-right: 3px; +input[type=text].timepicker-input-hours, +input[type=text].timepicker-input-minutes { + height: 100%; + padding: .8rem; + border: 0; + text-align: center; } -input[type=text].timepicker-input-minutes { - width: 33%; - margin-left: 3px; +.timepicker-input-divider-wrapper { + width: 1.6rem; + text-align: center; } input[type=text].text-primary { @@ -67,36 +78,55 @@ input[type=text].text-primary { .timepicker-display-am-pm { font-size: 1.3rem; position: absolute; - top: 1.2rem; + top: 1rem; right: 1rem; - bottom: auto; font-weight: 400; } +.timepicker-span-am-pm { + height: 5.2rem; + max-width: 3.5rem; +} + .timepicker-modal .am-btn, .timepicker-modal .pm-btn { width: 3.6rem; - height: 2rem; + height: 50%; + padding-left: calc(var(--btn-padding) / 1.6); + padding-right: calc(var(--btn-padding) / 1.6); line-height: 2rem; vertical-align: middle; text-align: center; + background-color: transparent; + border: 1px solid var(--md-sys-color-outline); +} + +.timepicker-modal .am-btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.timepicker-modal .pm-btn { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; } /* Analog Clock Display */ .timepicker-analog-display { flex: 2.5 auto; + padding: .67rem; background-color: var(--md-sys-color-surface); } .timepicker-plate { background-color: rgba(0, 0, 0, 0.09); border-radius: 50%; - width: 270px; - height: 270px; + width: 260px; + height: 260px; overflow: visible; position: relative; - margin: 30px 14px 14px; - padding: 10px; + margin: 2rem 1.6rem 1.6rem 1.6rem; user-select: none; } @@ -193,18 +223,22 @@ input[type=text].text-primary { } /* Media Queries */ -@media #{$medium-and-up} { +@media #{$large-and-up} { .timepicker-modal { - max-width: 600px; + width: auto; + max-width: 620px; } .timepicker-container.modal-content { flex-direction: row; } + .timepicker-digital-display { + padding: .67rem; + } + .timepicker-text-container { - top: 32%; - padding: 0; + top: 31%; text-align: center; } @@ -212,21 +246,34 @@ input[type=text].text-primary { position: relative; top: auto; right: auto; - bottom: auto; text-align: center; margin-top: 1.2rem; } - input[type=text].timepicker-input-minutes { - min-width: 5.3rem; + .timepicker-span-am-pm { + max-width: unset; } .timepicker-modal .am-btn, .timepicker-modal .pm-btn { width: auto; - height: auto; + padding-left: var(--btn-padding); + padding-right: var(--btn-padding); + border-radius: var(--btn-border-radius); + border: 1px solid var(--md-sys-color-outline); line-height: inherit; vertical-align: top; text-align: inherit; } + + .timepicker-modal .am-btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .timepicker-modal .pm-btn { + border-left: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } } diff --git a/src/timepicker.ts b/src/timepicker.ts index 5234575b40..6a9a5bc8d6 100644 --- a/src/timepicker.ts +++ b/src/timepicker.ts @@ -441,13 +441,13 @@ export class Timepicker extends Component { if (this.options.twelveHour) { // AM Button this._amBtn = document.createElement('div'); - this._amBtn.classList.add('am-btn'); + this._amBtn.classList.add('am-btn', 'btn'); this._amBtn.innerText = 'AM'; this._amBtn.addEventListener('click', this._handleAmPmClick); this.spanAmPm.appendChild(this._amBtn); // PM Button this._pmBtn = document.createElement('div'); - this._pmBtn.classList.add('pm-btn'); + this._pmBtn.classList.add('pm-btn', 'btn'); this._pmBtn.innerText = 'PM'; this._pmBtn.addEventListener('click', this._handleAmPmClick); this.spanAmPm.appendChild(this._pmBtn); @@ -552,12 +552,12 @@ export class Timepicker extends Component { _updateAmPmView() { if (this.options.twelveHour) { if (this.amOrPm === 'PM') { - this._amBtn.classList.remove('text-primary'); - this._pmBtn.classList.add('text-primary'); + this._amBtn.classList.remove('filled'); + this._pmBtn.classList.add('filled'); } else if (this.amOrPm === 'AM') { - this._amBtn.classList.add('text-primary'); - this._pmBtn.classList.remove('text-primary'); + this._amBtn.classList.add('filled'); + this._pmBtn.classList.remove('filled'); } } } @@ -834,9 +834,15 @@ export class Timepicker extends Component {
- - : - +
+ +
+
+ : +
+
+ +