Skip to content

Commit 1525ad7

Browse files
mrholekmrholek
committed
refactor(TimePicker): improve accessibility and font size handling
1 parent 90db86a commit 1525ad7

File tree

3 files changed

+69
-9
lines changed

3 files changed

+69
-9
lines changed

‎js/src/time-picker.js

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,13 @@ class TimePicker extends BaseComponent {
135135

136136
this._config = this._getConfig(config)
137137
this._date = this._convertStringToDate(this._config.time)
138-
this._initialDate = null
138+
this._initialDate = new Date(this._date)
139139
this._ampm = this._date ?
140140
getAmPm(new Date(this._date), this._config.locale) :
141141
'am'
142142
this._popper = null
143143

144+
this._indicatorElement = null
144145
this._input = null
145146
this._menu = null
146147
this._timePickerBody = null
@@ -257,10 +258,21 @@ class TimePicker extends BaseComponent {
257258

258259
// Private
259260
_addEventListeners() {
260-
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
261+
EventHandler.on(this._indicatorElement, EVENT_CLICK, () => {
261262
if (!this._config.disabled) {
263+
this.toggle()
264+
}
265+
})
266+
267+
EventHandler.on(this._indicatorElement, EVENT_KEYDOWN, () => {
268+
if (!this._config.disabled) {
269+
this.toggle()
270+
}
271+
})
272+
273+
EventHandler.on(this._togglerElement, EVENT_CLICK, event => {
274+
if (!this._config.disabled && event.target !== this._indicatorElement) {
262275
this.show()
263-
this._initialDate = new Date(this._date)
264276

265277
if (this._config.variant === 'roll') {
266278
this._setUpRolls(true)
@@ -414,7 +426,14 @@ class TimePicker extends BaseComponent {
414426
if (this._config.indicator) {
415427
const inputGroupIndicatorEl = document.createElement('div')
416428
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR)
429+
430+
if (!this._config.disabled) {
431+
inputGroupIndicatorEl.tabIndex = 0
432+
}
433+
417434
inputGroupEl.append(inputGroupIndicatorEl)
435+
436+
this._indicatorElement = inputGroupIndicatorEl
418437
}
419438

420439
if (this._config.cleaner) {

‎scss/_time-picker.scss

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,12 @@
2222
--#{$prefix}time-picker-placeholder-color: #{$time-picker-placeholder-color};
2323
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y};
2424
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x};
25+
--#{$prefix}time-picker-gap: #{$time-picker-gap};
26+
--#{$prefix}time-picker-indicator-width: #{$time-picker-indicator-width};
2527
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};
2628
--#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};
2729
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};
30+
--#{$prefix}time-picker-cleaner-width: #{$time-picker-cleaner-width};
2831
--#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};
2932
--#{$prefix}time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};
3033
--#{$prefix}time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};
@@ -66,8 +69,10 @@
6669
position: relative;
6770
display: flex;
6871
flex-wrap: wrap;
72+
gap: var(--#{$prefix}time-picker-gap);
6973
align-items: stretch;
7074
width: 100%;
75+
padding: var(--#{$prefix}time-picker-padding-y) var(--#{$prefix}time-picker-padding-x);
7176
background-color: var(--#{$prefix}time-picker-bg);
7277
background-clip: padding-box;
7378
border: var(--#{$prefix}time-picker-border-width) solid var(--#{$prefix}time-picker-border-color);
@@ -93,7 +98,8 @@
9398
border-color: var(--#{$prefix}time-picker-disabled-border-color);
9499
}
95100

96-
.time-picker.show & {
101+
.time-picker.show &,
102+
&:has(*:focus) {
97103
background-color: var(--#{$prefix}time-picker-focus-bg);
98104
border-color: var(--#{$prefix}time-picker-focus-border-color);
99105
outline: 0;
@@ -110,7 +116,7 @@
110116
flex: 1 1 auto;
111117
width: 1%;
112118
min-width: 0;
113-
padding: var(--#{$prefix}time-picker-padding-y) var(--#{$prefix}time-picker-padding-x);
119+
padding: 0;
114120
font-family: var(--#{$prefix}time-picker-font-family);
115121
@include font-size(var(--#{$prefix}time-picker-font-size));
116122
font-weight: var(--#{$prefix}time-picker-font-weight);
@@ -146,7 +152,6 @@
146152
.time-picker-cleaner,
147153
.time-picker-indicator {
148154
position: relative;
149-
width: 2.5rem;
150155
background-repeat: no-repeat;
151156
background-position: center;
152157

@@ -162,6 +167,7 @@
162167

163168
.time-picker-cleaner {
164169
display: none;
170+
width: var(--#{$prefix}time-picker-cleaner-width);
165171

166172
&::before {
167173
background-color: var(--#{$prefix}time-picker-cleaner-icon-color);
@@ -174,8 +180,19 @@
174180
}
175181

176182
.time-picker-indicator {
177-
background-color: var(--#{$prefix}time-picker-indicator-icon-color);
178-
mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;
183+
width: var(--#{$prefix}time-picker-indicator-width);
184+
185+
&::before {
186+
background-color: var(--#{$prefix}time-picker-indicator-icon-color);
187+
mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;
188+
}
189+
190+
&:focus {
191+
z-index: 5;
192+
outline: 0;
193+
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
194+
@include border-radius($border-radius);
195+
}
179196
}
180197

181198
.time-picker-dropdown {
@@ -289,17 +306,25 @@
289306
}
290307

291308
.time-picker-sm {
309+
--#{$prefix}time-picker-font-size: #{$time-picker-font-size-sm};
292310
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-sm};
293311
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-sm};
294312
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-sm};
313+
--#{$prefix}time-picker-gap: #{$time-picker-gap-sm};
314+
--#{$prefix}time-picker-cleaner-width: #{$time-picker-cleaner-width-sm};
295315
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-sm};
316+
--#{$prefix}time-picker-indicator-width: #{$time-picker-indicator-width-sm};
296317
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-sm};
297318
}
298319

299320
.time-picker-lg {
321+
--#{$prefix}time-picker-font-size: #{$time-picker-font-size-lg};
300322
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-lg};
301323
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-lg};
302324
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-lg};
325+
--#{$prefix}time-picker-gap: #{$time-picker-gap-lg};
326+
--#{$prefix}time-picker-cleaner-width: #{$time-picker-cleaner-width-lg};
303327
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-lg};
328+
--#{$prefix}time-picker-indicator-width: #{$time-picker-indicator-width-lg};
304329
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-lg};
305330
}

‎scss/_variables.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2325,7 +2325,6 @@ $calendar-cell-week-number-color: var(--#{$prefix}tertiary-color) !de
23252325
$date-picker-zindex: 1000 !default;
23262326
$date-picker-font-family: $input-font-family !default;
23272327
$date-picker-font-size: $input-font-size !default;
2328-
$date-picker-font-size: $input-font-size !default;
23292328
$date-picker-font-size-sm: $input-font-size-sm !default;
23302329
$date-picker-font-size-lg: $input-font-size-lg !default;
23312330
$date-picker-font-weight: $input-font-weight !default;
@@ -2427,6 +2426,8 @@ $date-picker-footer-border-color: var(--#{$prefix}border-color) !default;
24272426
$time-picker-zindex: 1000 !default;
24282427
$time-picker-font-family: $input-font-family !default;
24292428
$time-picker-font-size: $input-font-size !default;
2429+
$time-picker-font-size-sm: $input-font-size-sm !default;
2430+
$time-picker-font-size-lg: $input-font-size-lg !default;
24302431
$time-picker-font-weight: $input-font-weight !default;
24312432
$time-picker-line-height: $input-line-height !default;
24322433
$time-picker-color: $input-color !default;
@@ -2455,25 +2456,40 @@ $time-picker-placeholder-color: var(--#{$prefix}secondary-color) !de
24552456

24562457
$time-picker-padding-y: $input-padding-y !default;
24572458
$time-picker-padding-x: $input-padding-x !default;
2459+
$time-picker-gap: $input-padding-x !default;
2460+
24582461
$time-picker-padding-y-sm: $input-padding-y-sm !default;
24592462
$time-picker-padding-x-sm: $input-padding-x-sm !default;
2463+
$time-picker-gap-sm: $input-padding-x-sm !default;
2464+
24602465
$time-picker-padding-y-lg: $input-padding-y-lg !default;
24612466
$time-picker-padding-x-lg: $input-padding-x-lg !default;
2467+
$time-picker-gap-lg: $input-padding-x-lg !default;
24622468

2469+
$time-picker-cleaner-width: 1.25rem !default;
24632470
$time-picker-cleaner-icon-color: var(--#{$prefix}tertiary-color) !default;
24642471
$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#000' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
24652472
$time-picker-cleaner-icon-hover-color: var(--#{$prefix}body-color) !default;
24662473
$time-picker-cleaner-icon-size: 1rem !default;
24672474
$time-picker-cleaner-icon-size-sm: .875rem !default;
24682475
$time-picker-cleaner-icon-size-lg: 1.25rem !default;
24692476

2477+
$time-picker-cleaner-width-sm: 1rem !default;
2478+
$time-picker-cleaner-width-lg: 1.5rem !default;
2479+
$time-picker-cleaner-icon-size-sm: .875rem !default;
2480+
$time-picker-cleaner-icon-size-lg: 1.25rem !default;
2481+
2482+
$time-picker-indicator-width: 1.25rem !default;
24702483
$time-picker-indicator-icon-color: var(--#{$prefix}tertiary-color) !default;
24712484
$time-picker-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#000' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
24722485
$time-picker-indicator-invalid-icon-color: var(--#{$prefix}form-invalid-color) !default;
24732486
$time-picker-indicator-invalid-icon: $time-picker-indicator-icon !default;
24742487
$time-picker-indicator-valid-icon-color: var(--#{$prefix}form-valid-color) !default;
24752488
$time-picker-indicator-valid-icon: $time-picker-indicator-icon !default;
24762489
$time-picker-indicator-icon-size: 1rem !default;
2490+
2491+
$time-picker-indicator-width-sm: 1rem !default;
2492+
$time-picker-indicator-width-lg: 1.5rem !default;
24772493
$time-picker-indicator-icon-size-sm: .875rem !default;
24782494
$time-picker-indicator-icon-size-lg: 1.25rem !default;
24792495

0 commit comments

Comments
 (0)