Skip to content

Commit d588c8e

Browse files
mrholekmrholek
committed
refactor(DatePicker, DateRangePicker): improve accessibility and font size handling
1 parent 9ced708 commit d588c8e

File tree

3 files changed

+97
-24
lines changed

3 files changed

+97
-24
lines changed

‎js/src/date-range-picker.js

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -184,15 +184,16 @@ class DateRangePicker extends BaseComponent {
184184
this._calendarDate = this._config.calendarDate
185185
this._startDate = this._config.date || this._config.startDate
186186
this._endDate = this._config.endDate
187-
this._initialStartDate = null
188-
this._initialEndDate = null
187+
this._initialStartDate = new Date(this._startDate)
188+
this._initialEndDate = new Date(this._endDate)
189189
this._mobile = window.innerWidth < 768
190190
this._popper = null
191191
this._selectEndDate = this._config.selectEndDate
192192

193193
this._calendar = null
194194
this._calendars = null
195195
this._endInput = null
196+
this._indicatorElement = null
196197
this._menu = null
197198
this._startInput = null
198199
this._timepickers = null
@@ -307,11 +308,21 @@ class DateRangePicker extends BaseComponent {
307308

308309
// Private
309310
_addEventListeners() {
310-
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
311+
EventHandler.on(this._indicatorElement, EVENT_CLICK, () => {
311312
if (!this._config.disabled) {
313+
this.toggle()
314+
}
315+
})
316+
317+
EventHandler.on(this._indicatorElement, EVENT_KEYDOWN, () => {
318+
if (!this._config.disabled) {
319+
this.toggle()
320+
}
321+
})
322+
323+
EventHandler.on(this._togglerElement, EVENT_CLICK, event => {
324+
if (!this._config.disabled && event.target !== this._indicatorElement) {
312325
this.show()
313-
this._initialStartDate = new Date(this._startDate)
314-
this._initialEndDate = new Date(this._endDate)
315326
}
316327
})
317328

@@ -552,7 +563,14 @@ class DateRangePicker extends BaseComponent {
552563
if (this._config.indicator) {
553564
const inputGroupIndicatorEl = document.createElement('div')
554565
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR)
566+
567+
if (!this._config.disabled) {
568+
inputGroupIndicatorEl.tabIndex = 0
569+
}
570+
555571
inputGroupEl.append(inputGroupIndicatorEl)
572+
573+
this._indicatorElement = inputGroupIndicatorEl
556574
}
557575

558576
if (this._config.cleaner) {

‎scss/_date-picker.scss

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@
2222
--#{$prefix}date-picker-placeholder-color: #{$date-picker-placeholder-color};
2323
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y};
2424
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x};
25+
--#{$prefix}date-picker-gap: #{$date-picker-gap};
26+
--#{$prefix}date-picker-indicator-width: #{$date-picker-indicator-width};
2527
--#{$prefix}date-picker-indicator-icon: #{escape-svg($date-picker-indicator-icon)};
2628
--#{$prefix}date-picker-indicator-icon-color: #{$date-picker-indicator-icon-color};
2729
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size};
30+
--#{$prefix}date-picker-cleaner-width: #{$date-picker-cleaner-width};
2831
--#{$prefix}date-picker-cleaner-icon: #{escape-svg($date-picker-cleaner-icon)};
2932
--#{$prefix}date-picker-cleaner-icon-color: #{$date-picker-cleaner-icon-color};
3033
--#{$prefix}date-picker-cleaner-icon-hover-color: #{$date-picker-cleaner-icon-hover-color};
3134
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size};
35+
--#{$prefix}date-picker-separator-width: #{$date-picker-separator-width};
3236
--#{$prefix}date-picker-separator-icon: #{escape-svg($date-picker-separator-icon)};
3337
--#{$prefix}date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl)};
3438
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size};
@@ -66,8 +70,10 @@
6670
position: relative;
6771
display: flex;
6872
flex-wrap: wrap;
73+
gap: var(--#{$prefix}date-picker-gap);
6974
align-items: stretch;
7075
width: 100%;
76+
padding: var(--#{$prefix}date-picker-padding-y) var(--#{$prefix}date-picker-padding-x);
7177
background-color: var(--#{$prefix}date-picker-bg);
7278
background-clip: padding-box;
7379
border: var(--#{$prefix}date-picker-border-width) solid var(--#{$prefix}date-picker-border-color);
@@ -93,7 +99,8 @@
9399
background-color: var(--#{$prefix}date-picker-disabled-bg);
94100
}
95101

96-
.date-picker.show & {
102+
.date-picker.show &,
103+
&:has(*:focus) {
97104
background-color: var(--#{$prefix}date-picker-focus-bg);
98105
border-color: var(--#{$prefix}date-picker-focus-border-color);
99106
outline: 0;
@@ -110,7 +117,7 @@
110117
flex: 1 1 auto;
111118
width: 1%;
112119
min-width: 0;
113-
padding: var(--#{$prefix}date-picker-padding-y) var(--#{$prefix}date-picker-padding-x);
120+
padding: 0;
114121
font-family: var(--#{$prefix}date-picker-font-family);
115122
@include font-size(var(--#{$prefix}date-picker-font-size));
116123
font-weight: var(--#{$prefix}date-picker-font-weight);
@@ -147,7 +154,6 @@
147154
.date-picker-separator,
148155
.date-picker-indicator {
149156
position: relative;
150-
width: 2.5rem;
151157
background-repeat: no-repeat;
152158
background-position: center;
153159

@@ -161,8 +167,14 @@
161167
}
162168
}
163169

170+
// .date-picker-cleaner,
171+
// .date-picker-indicator {
172+
// margin-inline-start: var(--#{$prefix}date-picker-padding-x);
173+
// }
174+
164175
.date-picker-cleaner {
165176
display: none;
177+
width: var(--#{$prefix}date-picker-cleaner-width);
166178

167179
&::before {
168180
background-color: var(--#{$prefix}date-picker-cleaner-icon-color);
@@ -174,18 +186,33 @@
174186
}
175187
}
176188

177-
.date-picker-indicator::before {
178-
background-color: var(--#{$prefix}date-picker-indicator-icon-color);
179-
mask: var(--#{$prefix}date-picker-indicator-icon) center / var(--#{$prefix}date-picker-indicator-icon-size) no-repeat;
189+
.date-picker-indicator {
190+
width: var(--#{$prefix}date-picker-indicator-width);
191+
192+
&::before {
193+
background-color: var(--#{$prefix}date-picker-indicator-icon-color);
194+
mask: var(--#{$prefix}date-picker-indicator-icon) center / var(--#{$prefix}date-picker-indicator-icon-size) no-repeat;
195+
}
196+
197+
&:focus {
198+
z-index: 5;
199+
outline: 0;
200+
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);
201+
@include border-radius($border-radius);
202+
}
180203
}
181204

182-
.date-picker-separator::before {
183-
background-color: $date-picker-separator-icon-color;
184-
@include ltr-rtl-value-only(
185-
"mask",
186-
var(--#{$prefix}date-picker-separator-icon) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat,
187-
var(--#{$prefix}date-picker-separator-icon-rtl) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat
188-
);
205+
.date-picker-separator {
206+
width: var(--#{$prefix}date-picker-separator-width);
207+
208+
&::before {
209+
background-color: $date-picker-separator-icon-color;
210+
@include ltr-rtl-value-only(
211+
"mask",
212+
var(--#{$prefix}date-picker-separator-icon) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat,
213+
var(--#{$prefix}date-picker-separator-icon-rtl) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat
214+
);
215+
}
189216
}
190217

191218
.date-picker-dropdown {
@@ -276,20 +303,29 @@
276303
}
277304

278305
.date-picker-sm {
306+
--#{$prefix}date-picker-font-size: #{$date-picker-font-size-sm};
279307
--#{$prefix}date-picker-border-radius: #{$date-picker-border-radius-sm};
280308
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y-sm};
281309
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-sm};
282-
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-sm};
310+
--#{$prefix}date-picker-gap: #{$date-picker-gap-sm};
311+
--#{$prefix}date-picker-cleaner-width: #{$date-picker-cleaner-width-sm};
283312
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size-sm};
313+
--#{$prefix}date-picker-indicator-width: #{$date-picker-indicator-width-sm};
284314
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size-sm};
315+
--#{$prefix}date-picker-separator-width: #{$date-picker-separator-width-sm};
285316
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size-sm};
286317
}
287318

288319
.date-picker-lg {
320+
--#{$prefix}date-picker-font-size: #{$date-picker-font-size-lg};
289321
--#{$prefix}date-picker-border-radius: #{$date-picker-border-radius-lg};
290322
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y-lg};
291323
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-lg};
324+
--#{$prefix}date-picker-gap: #{$date-picker-gap-lg};
325+
--#{$prefix}date-picker-cleaner-width: #{$date-picker-cleaner-width-lg};
292326
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size-lg};
327+
--#{$prefix}date-picker-indicator-width: #{$date-picker-indicator-width-lg};
293328
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size-lg};
329+
--#{$prefix}date-picker-separator-width: #{$date-picker-separator-width-lg};
294330
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size-lg};
295331
}

‎scss/_variables.scss

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2325,6 +2325,9 @@ $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;
2329+
$date-picker-font-size-sm: $input-font-size-sm !default;
2330+
$date-picker-font-size-lg: $input-font-size-lg !default;
23282331
$date-picker-font-weight: $input-font-weight !default;
23292332
$date-picker-line-height: $input-line-height !default;
23302333
$date-picker-color: $input-color !default;
@@ -2353,33 +2356,49 @@ $date-picker-placeholder-color: var(--#{$prefix}secondary-color) !default
23532356

23542357
$date-picker-padding-y: $input-padding-y !default;
23552358
$date-picker-padding-x: $input-padding-x !default;
2359+
$date-picker-gap: $input-padding-x !default;
2360+
23562361
$date-picker-padding-y-sm: $input-padding-y-sm !default;
23572362
$date-picker-padding-x-sm: $input-padding-x-sm !default;
2363+
$date-picker-gap-sm: $input-padding-x-sm !default;
2364+
23582365
$date-picker-padding-y-lg: $input-padding-y-lg !default;
23592366
$date-picker-padding-x-lg: $input-padding-x-lg !default;
2367+
$date-picker-gap-lg: $input-padding-x-lg !default;
23602368

2369+
$date-picker-cleaner-width: 1.25rem !default;
2370+
$date-picker-cleaner-icon-size: 1rem !default;
23612371
$date-picker-cleaner-icon-color: var(--#{$prefix}tertiary-color) !default;
23622372
$date-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='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
23632373
$date-picker-cleaner-icon-hover-color: var(--#{$prefix}body-color) !default;
2364-
$date-picker-cleaner-icon-size: 1rem !default;
2374+
2375+
$date-picker-cleaner-width-sm: 1rem !default;
2376+
$date-picker-cleaner-width-lg: 1.5rem !default;
23652377
$date-picker-cleaner-icon-size-sm: .875rem !default;
23662378
$date-picker-cleaner-icon-size-lg: 1.25rem !default;
23672379

2380+
$date-picker-indicator-width: 1.25rem !default;
2381+
$date-picker-indicator-icon-size: 1rem !default;
23682382
$date-picker-indicator-icon-color: var(--#{$prefix}tertiary-color) !default;
23692383
$date-picker-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#000' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#000'></rect><rect width='32' height='32' x='200' y='224' fill='#000'></rect><rect width='32' height='32' x='280' y='224' fill='#000'></rect><rect width='32' height='32' x='368' y='224' fill='#000'></rect><rect width='32' height='32' x='112' y='296' fill='#000'></rect><rect width='32' height='32' x='200' y='296' fill='#000'></rect><rect width='32' height='32' x='280' y='296' fill='#000'></rect><rect width='32' height='32' x='368' y='296' fill='#000'></rect><rect width='32' height='32' x='112' y='368' fill='#000'></rect><rect width='32' height='32' x='200' y='368' fill='#000'></rect><rect width='32' height='32' x='280' y='368' fill='#000'></rect><rect width='32' height='32' x='368' y='368' fill='#000'></rect></svg>") !default;
23702384
$date-picker-indicator-invalid-icon: $date-picker-indicator-icon !default;
23712385
$date-picker-indicator-invalid-icon-color: var(--#{$prefix}form-invalid-color) !default;
23722386
$date-picker-indicator-valid-icon: $date-picker-indicator-icon !default;
23732387
$date-picker-indicator-valid-icon-color: var(--#{$prefix}form-valid-color) !default;
23742388

2375-
$date-picker-indicator-icon-size: 1rem !default;
2376-
$date-picker-indicator-icon-size-sm: .875rem !default;
2377-
$date-picker-indicator-icon-size-lg: 1.25rem !default;
2389+
$date-picker-indicator-width-sm: 1rem !default;
2390+
$date-picker-indicator-width-lg: 1.5rem !default;
2391+
$date-picker-indicator-icon-size-sm: .875rem !default;
2392+
$date-picker-indicator-icon-size-lg: 1.25rem !default;
23782393

2394+
$date-picker-separator-width: 1.25rem !default;
2395+
$date-picker-separator-icon-size: 1rem !default;
23792396
$date-picker-separator-icon-color: var(--#{$prefix}tertiary-color) !default;
23802397
$date-picker-separator-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='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>") !default;
23812398
$date-picker-separator-icon-rtl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>") !default;
2382-
$date-picker-separator-icon-size: 1rem !default;
2399+
2400+
$date-picker-separator-width-sm: 1rem !default;
2401+
$date-picker-separator-width-lg: 1.55rem !default;
23832402
$date-picker-separator-icon-size-sm: .875rem !default;
23842403
$date-picker-separator-icon-size-lg: 1.25rem !default;
23852404

0 commit comments

Comments
 (0)