@lion/ui 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/components/calendar/src/LionCalendar.js +121 -65
  2. package/components/calendar/src/calendarStyle.js +25 -1
  3. package/components/calendar/src/utils/createDay.js +2 -0
  4. package/components/calendar/src/utils/dayTemplate.js +19 -32
  5. package/components/calendar/src/utils/getDayMonthYear.js +28 -0
  6. package/components/calendar/test/lion-calendar.test.js +118 -108
  7. package/components/calendar/test/utils/dayTemplate.test.js +8 -4
  8. package/components/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js +210 -126
  9. package/components/calendar/test-helpers/DayObject.js +2 -2
  10. package/components/calendar/types/day.ts +1 -0
  11. package/components/input-datepicker/src/LionInputDatepicker.js +34 -2
  12. package/components/input-file/src/LionInputFile.js +5 -7
  13. package/components/input-file/test/lion-input-file.test.js +4 -0
  14. package/custom-elements.json +323 -31
  15. package/dist-types/components/calendar/src/LionCalendar.d.ts +22 -15
  16. package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
  17. package/dist-types/components/calendar/src/calendarStyle.d.ts.map +1 -1
  18. package/dist-types/components/calendar/src/utils/createDay.d.ts +2 -1
  19. package/dist-types/components/calendar/src/utils/createDay.d.ts.map +1 -1
  20. package/dist-types/components/calendar/src/utils/dayTemplate.d.ts.map +1 -1
  21. package/dist-types/components/calendar/src/utils/getDayMonthYear.d.ts +13 -0
  22. package/dist-types/components/calendar/src/utils/getDayMonthYear.d.ts.map +1 -0
  23. package/dist-types/components/calendar/types/day.d.ts +1 -0
  24. package/dist-types/components/calendar/types/day.d.ts.map +1 -1
  25. package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +6 -0
  26. package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts.map +1 -1
  27. package/dist-types/components/input-file/src/LionInputFile.d.ts +6 -0
  28. package/dist-types/components/input-file/src/LionInputFile.d.ts.map +1 -1
  29. package/dist-types/tsconfig.tsbuildinfo +1 -1
  30. package/docs/components/calendar/use-cases.md +39 -0
  31. package/docs/components/checkbox-group/overview.md +2 -2
  32. package/docs/components/collapsible/overview.md +1 -1
  33. package/docs/components/combobox/overview.md +1 -1
  34. package/docs/components/combobox/use-cases.md +1 -1
  35. package/docs/components/dialog/overview.md +1 -1
  36. package/docs/components/fieldset/overview.md +5 -5
  37. package/docs/components/form/overview.md +3 -3
  38. package/docs/components/icon/use-cases.md +1 -1
  39. package/docs/components/input/overview.md +1 -1
  40. package/docs/components/input-amount/overview.md +3 -3
  41. package/docs/components/input-date/overview.md +3 -3
  42. package/docs/components/input-datepicker/overview.md +5 -5
  43. package/docs/components/input-datepicker/use-cases.md +2 -0
  44. package/docs/components/input-email/overview.md +2 -2
  45. package/docs/components/input-file/overview.md +1 -1
  46. package/docs/components/input-iban/overview.md +2 -2
  47. package/docs/components/input-range/overview.md +2 -2
  48. package/docs/components/input-stepper/overview.md +1 -1
  49. package/docs/components/input-tel/overview.md +1 -1
  50. package/docs/components/input-tel/use-cases.md +6 -6
  51. package/docs/components/input-tel-dropdown/overview.md +1 -1
  52. package/docs/components/radio-group/overview.md +3 -3
  53. package/docs/components/select-rich/use-cases.md +1 -1
  54. package/docs/components/tabs/examples.md +1 -1
  55. package/docs/fundamentals/index.md +4 -4
  56. package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
  57. package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
  58. package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
  59. package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
  60. package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
  61. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  62. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  63. package/docs/fundamentals/rationales/accessibility.md +1 -1
  64. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  65. package/docs/fundamentals/systems/core/overview.md +1 -1
  66. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  67. package/docs/fundamentals/systems/form/model-value.md +1 -1
  68. package/docs/fundamentals/systems/form/overview.md +28 -28
  69. package/docs/fundamentals/systems/form/validate.md +1 -1
  70. package/docs/fundamentals/systems/localize/overview.md +4 -4
  71. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  72. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  73. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  74. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  75. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  76. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  77. package/docs/guides/how-to/create-a-form.md +4 -4
  78. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  79. package/docs/guides/index.md +8 -8
  80. package/docs/guides/principles/index.md +5 -5
  81. package/docs/guides/principles/styling.md +1 -1
  82. package/package.json +1 -1
package/components/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js CHANGED
@@ -52,434 +52,518 @@ export default html`
52
52
  <tbody>
53
53
  <tr role="row">
54
54
  <td class="calendar__day-cell" role="gridcell" start-of-last-week>
55
- <button
56
- aria-label="25 November 2018 Sunday"
55
+ <div
56
+ role="button"
57
+ aria-disabled="false"
57
58
  aria-pressed="false"
58
59
  class="calendar__day-button"
59
60
  tabindex="-1"
60
61
  >
61
62
  <span class="calendar__day-button__text">25</span>
62
- </button>
63
+ <span class="u-sr-only"> November 2018 Sunday</span>
64
+ </div>
63
65
  </td>
64
66
  <td class="calendar__day-cell" role="gridcell">
65
- <button
66
- aria-label="26 November 2018 Monday"
67
+ <div
68
+ role="button"
69
+ aria-disabled="false"
67
70
  aria-pressed="false"
68
71
  class="calendar__day-button"
69
72
  tabindex="-1"
70
73
  >
71
74
  <span class="calendar__day-button__text">26</span>
72
- </button>
75
+ <span class="u-sr-only"> November 2018 Monday </span>
76
+ </div>
73
77
  </td>
74
78
  <td class="calendar__day-cell" role="gridcell">
75
- <button
76
- aria-label="27 November 2018 Tuesday"
79
+ <div
80
+ role="button"
81
+ aria-disabled="false"
77
82
  aria-pressed="false"
78
83
  class="calendar__day-button"
79
84
  tabindex="-1"
80
85
  >
81
86
  <span class="calendar__day-button__text">27</span>
82
- </button>
87
+ <span class="u-sr-only"> November 2018 Tuesday </span>
88
+ </div>
83
89
  </td>
84
90
  <td class="calendar__day-cell" role="gridcell">
85
- <button
86
- aria-label="28 November 2018 Wednesday"
91
+ <div
92
+ role="button"
93
+ aria-disabled="false"
87
94
  aria-pressed="false"
88
95
  class="calendar__day-button"
89
96
  tabindex="-1"
90
97
  >
91
98
  <span class="calendar__day-button__text">28</span>
92
- </button>
99
+ <span class="u-sr-only"> November 2018 Wednesday </span>
100
+ </div>
93
101
  </td>
94
102
  <td class="calendar__day-cell" role="gridcell">
95
- <button
96
- aria-label="29 November 2018 Thursday"
103
+ <div
104
+ role="button"
105
+ aria-disabled="false"
97
106
  aria-pressed="false"
98
107
  class="calendar__day-button"
99
108
  tabindex="-1"
100
109
  >
101
110
  <span class="calendar__day-button__text">29</span>
102
- </button>
111
+ <span class="u-sr-only"> November 2018 Thursday </span>
112
+ </div>
103
113
  </td>
104
114
  <td class="calendar__day-cell" role="gridcell" last-day>
105
- <button
106
- aria-label="30 November 2018 Friday"
115
+ <div
116
+ role="button"
117
+ aria-disabled="false"
107
118
  aria-pressed="false"
108
119
  class="calendar__day-button"
109
120
  tabindex="-1"
110
121
  >
111
122
  <span class="calendar__day-button__text">30</span>
112
- </button>
123
+ <span class="u-sr-only"> November 2018 Friday </span>
124
+ </div>
113
125
  </td>
114
126
  <td class="calendar__day-cell" role="gridcell" end-of-first-week first-day>
115
- <button
116
- aria-label="1 December 2018 Saturday"
127
+ <div
128
+ role="button"
129
+ aria-disabled="false"
117
130
  aria-pressed="false"
118
131
  class="calendar__day-button"
119
132
  tabindex="-1"
120
133
  >
121
134
  <span class="calendar__day-button__text">1</span>
122
- </button>
135
+ <span class="u-sr-only"> December 2018 Saturday </span>
136
+ </div>
123
137
  </td>
124
138
  </tr>
125
139
  <tr role="row">
126
140
  <td class="calendar__day-cell" role="gridcell" start-of-first-full-week>
127
- <button
128
- aria-label="2 December 2018 Sunday"
141
+ <div
142
+ role="button"
143
+ aria-disabled="false"
129
144
  aria-pressed="false"
130
145
  class="calendar__day-button"
131
146
  tabindex="-1"
132
147
  >
133
148
  <span class="calendar__day-button__text">2</span>
134
- </button>
149
+ <span class="u-sr-only"> December 2018 Sunday </span>
150
+ </div>
135
151
  </td>
136
152
  <td class="calendar__day-cell" role="gridcell">
137
- <button
138
- aria-label="3 December 2018 Monday"
153
+ <div
154
+ role="button"
155
+ aria-disabled="false"
139
156
  aria-pressed="false"
140
157
  class="calendar__day-button"
141
158
  tabindex="-1"
142
159
  >
143
160
  <span class="calendar__day-button__text">3</span>
144
- </button>
161
+ <span class="u-sr-only"> December 2018 Monday </span>
162
+ </div>
145
163
  </td>
146
164
  <td class="calendar__day-cell" role="gridcell">
147
- <button
148
- aria-label="4 December 2018 Tuesday"
165
+ <div
166
+ role="button"
167
+ aria-disabled="false"
149
168
  aria-pressed="false"
150
169
  class="calendar__day-button"
151
170
  tabindex="-1"
152
171
  >
153
172
  <span class="calendar__day-button__text">4</span>
154
- </button>
173
+ <span class="u-sr-only"> December 2018 Tuesday </span>
174
+ </div>
155
175
  </td>
156
176
  <td class="calendar__day-cell" role="gridcell">
157
- <button
158
- aria-label="5 December 2018 Wednesday"
177
+ <div
178
+ role="button"
179
+ aria-disabled="false"
159
180
  aria-pressed="false"
160
181
  class="calendar__day-button"
161
182
  tabindex="-1"
162
183
  >
163
184
  <span class="calendar__day-button__text">5</span>
164
- </button>
185
+ <span class="u-sr-only"> December 2018 Wednesday </span>
186
+ </div>
165
187
  </td>
166
188
  <td class="calendar__day-cell" role="gridcell">
167
- <button
168
- aria-label="6 December 2018 Thursday"
189
+ <div
190
+ role="button"
191
+ aria-disabled="false"
169
192
  aria-pressed="false"
170
193
  class="calendar__day-button"
171
194
  tabindex="-1"
172
195
  >
173
196
  <span class="calendar__day-button__text">6</span>
174
- </button>
197
+ <span class="u-sr-only"> December 2018 Thursday </span>
198
+ </div>
175
199
  </td>
176
200
  <td class="calendar__day-cell" role="gridcell">
177
- <button
178
- aria-label="7 December 2018 Friday"
201
+ <div
202
+ role="button"
203
+ aria-disabled="false"
179
204
  aria-pressed="false"
180
205
  class="calendar__day-button"
181
206
  tabindex="-1"
182
207
  >
183
208
  <span class="calendar__day-button__text">7</span>
184
- </button>
209
+ <span class="u-sr-only"> December 2018 Friday </span>
210
+ </div>
185
211
  </td>
186
212
  <td class="calendar__day-cell" role="gridcell">
187
- <button
188
- aria-label="8 December 2018 Saturday"
213
+ <div
214
+ role="button"
215
+ aria-disabled="false"
189
216
  aria-pressed="false"
190
217
  class="calendar__day-button"
191
218
  tabindex="-1"
192
219
  >
193
220
  <span class="calendar__day-button__text">8</span>
194
- </button>
221
+ <span class="u-sr-only"> December 2018 Saturday </span>
222
+ </div>
195
223
  </td>
196
224
  </tr>
197
225
  <tr role="row">
198
226
  <td class="calendar__day-cell" role="gridcell">
199
- <button
200
- aria-label="9 December 2018 Sunday"
227
+ <div
228
+ role="button"
229
+ aria-disabled="false"
201
230
  aria-pressed="false"
202
231
  class="calendar__day-button"
203
232
  tabindex="-1"
204
233
  >
205
234
  <span class="calendar__day-button__text">9</span>
206
- </button>
235
+ <span class="u-sr-only"> December 2018 Sunday </span>
236
+ </div>
207
237
  </td>
208
238
  <td class="calendar__day-cell" role="gridcell">
209
- <button
210
- aria-label="10 December 2018 Monday"
239
+ <div
240
+ role="button"
241
+ aria-disabled="false"
211
242
  aria-pressed="false"
212
243
  class="calendar__day-button"
213
244
  tabindex="-1"
214
245
  >
215
246
  <span class="calendar__day-button__text">10</span>
216
- </button>
247
+ <span class="u-sr-only"> December 2018 Monday </span>
248
+ </div>
217
249
  </td>
218
250
  <td class="calendar__day-cell" role="gridcell">
219
- <button
220
- aria-label="11 December 2018 Tuesday"
251
+ <div
252
+ role="button"
253
+ aria-disabled="false"
221
254
  aria-pressed="false"
222
255
  class="calendar__day-button"
223
256
  tabindex="-1"
224
257
  >
225
258
  <span class="calendar__day-button__text">11</span>
226
- </button>
259
+ <span class="u-sr-only"> December 2018 Tuesday </span>
260
+ </div>
227
261
  </td>
228
262
  <td class="calendar__day-cell" role="gridcell">
229
- <button
230
- aria-label="12 December 2018 Wednesday"
263
+ <div
264
+ role="button"
265
+ aria-disabled="false"
231
266
  aria-pressed="false"
232
267
  class="calendar__day-button"
233
268
  tabindex="-1"
234
269
  >
235
270
  <span class="calendar__day-button__text">12</span>
236
- </button>
271
+ <span class="u-sr-only"> December 2018 Wednesday </span>
272
+ </div>
237
273
  </td>
238
274
  <td class="calendar__day-cell" role="gridcell">
239
- <button
240
- aria-label="13 December 2018 Thursday"
275
+ <div
276
+ role="button"
277
+ aria-disabled="false"
241
278
  aria-pressed="false"
242
279
  class="calendar__day-button"
243
280
  tabindex="-1"
244
281
  >
245
282
  <span class="calendar__day-button__text">13</span>
246
- </button>
283
+ <span class="u-sr-only"> December 2018 Thursday </span>
284
+ </div>
247
285
  </td>
248
286
  <td class="calendar__day-cell" role="gridcell">
249
- <button
250
- aria-label="14 December 2018 Friday"
287
+ <div
288
+ role="button"
289
+ aria-disabled="false"
251
290
  aria-pressed="false"
252
291
  class="calendar__day-button"
253
292
  tabindex="-1"
254
293
  >
255
294
  <span class="calendar__day-button__text">14</span>
256
- </button>
295
+ <span class="u-sr-only"> December 2018 Friday </span>
296
+ </div>
257
297
  </td>
258
298
  <td class="calendar__day-cell" role="gridcell">
259
- <button
260
- aria-label="15 December 2018 Saturday"
299
+ <div
300
+ role="button"
301
+ aria-disabled="false"
261
302
  aria-pressed="false"
262
303
  class="calendar__day-button"
263
304
  tabindex="-1"
264
305
  >
265
306
  <span class="calendar__day-button__text">15</span>
266
- </button>
307
+ <span class="u-sr-only"> December 2018 Saturday </span>
308
+ </div>
267
309
  </td>
268
310
  </tr>
269
311
  <tr role="row">
270
312
  <td class="calendar__day-cell" role="gridcell">
271
- <button
272
- aria-label="16 December 2018 Sunday"
313
+ <div
314
+ role="button"
315
+ aria-disabled="false"
273
316
  aria-pressed="false"
274
317
  class="calendar__day-button"
275
318
  tabindex="-1"
276
319
  >
277
320
  <span class="calendar__day-button__text">16</span>
278
- </button>
321
+ <span class="u-sr-only"> December 2018 Sunday </span>
322
+ </div>
279
323
  </td>
280
324
  <td class="calendar__day-cell" role="gridcell">
281
- <button
282
- aria-label="17 December 2018 Monday"
325
+ <div
326
+ role="button"
327
+ aria-disabled="false"
283
328
  aria-pressed="false"
284
329
  class="calendar__day-button"
285
330
  tabindex="-1"
286
331
  >
287
332
  <span class="calendar__day-button__text">17</span>
288
- </button>
333
+ <span class="u-sr-only"> December 2018 Monday </span>
334
+ </div>
289
335
  </td>
290
336
  <td class="calendar__day-cell" role="gridcell">
291
- <button
292
- aria-label="18 December 2018 Tuesday"
337
+ <div
338
+ role="button"
339
+ aria-disabled="false"
293
340
  aria-pressed="false"
294
341
  class="calendar__day-button"
295
342
  tabindex="-1"
296
343
  >
297
344
  <span class="calendar__day-button__text">18</span>
298
- </button>
345
+ <span class="u-sr-only"> December 2018 Tuesday </span>
346
+ </div>
299
347
  </td>
300
348
  <td class="calendar__day-cell" role="gridcell">
301
- <button
302
- aria-label="19 December 2018 Wednesday"
349
+ <div
350
+ role="button"
351
+ aria-disabled="false"
303
352
  aria-pressed="false"
304
353
  class="calendar__day-button"
305
354
  tabindex="-1"
306
355
  >
307
356
  <span class="calendar__day-button__text">19</span>
308
- </button>
357
+ <span class="u-sr-only"> December 2018 Wednesday </span>
358
+ </div>
309
359
  </td>
310
360
  <td class="calendar__day-cell" role="gridcell">
311
- <button
312
- aria-label="20 December 2018 Thursday"
361
+ <div
362
+ role="button"
363
+ aria-disabled="false"
313
364
  aria-pressed="false"
314
365
  class="calendar__day-button"
315
366
  tabindex="-1"
316
367
  >
317
368
  <span class="calendar__day-button__text">20</span>
318
- </button>
369
+ <span class="u-sr-only"> December 2018 Thursday </span>
370
+ </div>
319
371
  </td>
320
372
  <td class="calendar__day-cell" role="gridcell">
321
- <button
322
- aria-label="21 December 2018 Friday"
373
+ <div
374
+ role="button"
375
+ aria-disabled="false"
323
376
  aria-pressed="false"
324
377
  class="calendar__day-button"
325
378
  tabindex="-1"
326
379
  >
327
380
  <span class="calendar__day-button__text">21</span>
328
- </button>
381
+ <span class="u-sr-only"> December 2018 Friday </span>
382
+ </div>
329
383
  </td>
330
384
  <td class="calendar__day-cell" role="gridcell">
331
- <button
332
- aria-label="22 December 2018 Saturday"
385
+ <div
386
+ role="button"
387
+ aria-disabled="false"
333
388
  aria-pressed="false"
334
389
  class="calendar__day-button"
335
390
  tabindex="-1"
336
391
  >
337
392
  <span class="calendar__day-button__text">22</span>
338
- </button>
393
+ <span class="u-sr-only"> December 2018 Saturday </span>
394
+ </div>
339
395
  </td>
340
396
  </tr>
341
397
  <tr role="row">
342
398
  <td class="calendar__day-cell" role="gridcell">
343
- <button
344
- aria-label="23 December 2018 Sunday"
399
+ <div
400
+ role="button"
401
+ aria-disabled="false"
345
402
  aria-pressed="false"
346
403
  class="calendar__day-button"
347
404
  tabindex="-1"
348
405
  >
349
406
  <span class="calendar__day-button__text">23</span>
350
- </button>
407
+ <span class="u-sr-only"> December 2018 Sunday </span>
408
+ </div>
351
409
  </td>
352
410
  <td class="calendar__day-cell" role="gridcell">
353
- <button
354
- aria-label="24 December 2018 Monday"
411
+ <div
412
+ role="button"
413
+ aria-disabled="false"
355
414
  aria-pressed="false"
356
415
  class="calendar__day-button"
357
416
  tabindex="-1"
358
417
  >
359
418
  <span class="calendar__day-button__text">24</span>
360
- </button>
419
+ <span class="u-sr-only"> December 2018 Monday </span>
420
+ </div>
361
421
  </td>
362
422
  <td class="calendar__day-cell" role="gridcell">
363
- <button
364
- aria-label="25 December 2018 Tuesday"
423
+ <div
424
+ role="button"
425
+ aria-disabled="false"
365
426
  aria-pressed="false"
366
427
  class="calendar__day-button"
367
428
  tabindex="-1"
368
429
  >
369
430
  <span class="calendar__day-button__text">25</span>
370
- </button>
431
+ <span class="u-sr-only"> December 2018 Tuesday </span>
432
+ </div>
371
433
  </td>
372
434
  <td class="calendar__day-cell" role="gridcell">
373
- <button
374
- aria-label="26 December 2018 Wednesday"
435
+ <div
436
+ role="button"
437
+ aria-disabled="false"
375
438
  aria-pressed="false"
376
439
  class="calendar__day-button"
377
440
  tabindex="-1"
378
441
  >
379
442
  <span class="calendar__day-button__text">26</span>
380
- </button>
443
+ <span class="u-sr-only"> December 2018 Wednesday </span>
444
+ </div>
381
445
  </td>
382
446
  <td class="calendar__day-cell" role="gridcell">
383
- <button
384
- aria-label="27 December 2018 Thursday"
447
+ <div
448
+ role="button"
449
+ aria-disabled="false"
385
450
  aria-pressed="false"
386
451
  class="calendar__day-button"
387
452
  tabindex="-1"
388
453
  >
389
454
  <span class="calendar__day-button__text">27</span>
390
- </button>
455
+ <span class="u-sr-only"> December 2018 Thursday </span>
456
+ </div>
391
457
  </td>
392
458
  <td class="calendar__day-cell" role="gridcell">
393
- <button
394
- aria-label="28 December 2018 Friday"
459
+ <div
460
+ role="button"
461
+ aria-disabled="false"
395
462
  aria-pressed="false"
396
463
  class="calendar__day-button"
397
464
  tabindex="-1"
398
465
  >
399
466
  <span class="calendar__day-button__text">28</span>
400
- </button>
467
+ <span class="u-sr-only"> December 2018 Friday </span>
468
+ </div>
401
469
  </td>
402
470
  <td class="calendar__day-cell" role="gridcell" end-of-last-full-week>
403
- <button
404
- aria-label="29 December 2018 Saturday"
471
+ <div
472
+ role="button"
473
+ aria-disabled="false"
405
474
  aria-pressed="false"
406
475
  class="calendar__day-button"
407
476
  tabindex="-1"
408
477
  >
409
478
  <span class="calendar__day-button__text">29</span>
410
- </button>
479
+ <span class="u-sr-only"> December 2018 Saturday </span>
480
+ </div>
411
481
  </td>
412
482
  </tr>
413
483
  <tr role="row">
414
484
  <td class="calendar__day-cell" role="gridcell" start-of-last-week>
415
- <button
416
- aria-label="30 December 2018 Sunday"
485
+ <div
486
+ role="button"
487
+ aria-disabled="false"
417
488
  aria-pressed="false"
418
489
  class="calendar__day-button"
419
490
  tabindex="-1"
420
491
  >
421
492
  <span class="calendar__day-button__text">30</span>
422
- </button>
493
+ <span class="u-sr-only"> December 2018 Sunday </span>
494
+ </div>
423
495
  </td>
424
496
  <td class="calendar__day-cell" last-day role="gridcell">
425
- <button
426
- aria-label="31 December 2018 Monday"
497
+ <div
498
+ role="button"
499
+ aria-disabled="false"
427
500
  aria-pressed="false"
428
501
  class="calendar__day-button"
429
502
  tabindex="-1"
430
503
  >
431
504
  <span class="calendar__day-button__text">31</span>
432
- </button>
505
+ <span class="u-sr-only"> December 2018 Monday </span>
506
+ </div>
433
507
  </td>
434
508
  <td class="calendar__day-cell" role="gridcell" first-day>
435
- <button
436
- aria-label="1 January 2019 Tuesday"
509
+ <div
510
+ role="button"
511
+ aria-disabled="false"
437
512
  aria-pressed="false"
438
513
  class="calendar__day-button"
439
514
  tabindex="-1"
440
515
  >
441
516
  <span class="calendar__day-button__text">1</span>
442
- </button>
517
+ <span class="u-sr-only"> January 2019 Tuesday </span>
518
+ </div>
443
519
  </td>
444
520
  <td class="calendar__day-cell" role="gridcell">
445
- <button
446
- aria-label="2 January 2019 Wednesday"
521
+ <div
522
+ role="button"
523
+ aria-disabled="false"
447
524
  aria-pressed="false"
448
525
  class="calendar__day-button"
449
526
  tabindex="-1"
450
527
  >
451
528
  <span class="calendar__day-button__text">2</span>
452
- </button>
529
+ <span class="u-sr-only"> January 2019 Wednesday </span>
530
+ </div>
453
531
  </td>
454
532
  <td class="calendar__day-cell" role="gridcell">
455
- <button
456
- aria-label="3 January 2019 Thursday"
533
+ <div
534
+ role="button"
535
+ aria-disabled="false"
457
536
  aria-pressed="false"
458
537
  class="calendar__day-button"
459
538
  tabindex="-1"
460
539
  >
461
540
  <span class="calendar__day-button__text">3</span>
462
- </button>
541
+ <span class="u-sr-only"> January 2019 Thursday </span>
542
+ </div>
463
543
  </td>
464
544
  <td class="calendar__day-cell" role="gridcell">
465
- <button
466
- aria-label="4 January 2019 Friday"
545
+ <div
546
+ role="button"
547
+ aria-disabled="false"
467
548
  aria-pressed="false"
468
549
  class="calendar__day-button"
469
550
  tabindex="-1"
470
551
  >
471
552
  <span class="calendar__day-button__text">4</span>
472
- </button>
553
+ <span class="u-sr-only"> January 2019 Friday </span>
554
+ </div>
473
555
  </td>
474
556
  <td class="calendar__day-cell" role="gridcell" end-of-first-week>
475
- <button
476
- aria-label="5 January 2019 Saturday"
557
+ <div
558
+ role="button"
559
+ aria-disabled="false"
477
560
  aria-pressed="false"
478
561
  class="calendar__day-button"
479
562
  tabindex="-1"
480
563
  >
481
564
  <span class="calendar__day-button__text">5</span>
482
- </button>
565
+ <span class="u-sr-only"> January 2019 Saturday </span>
566
+ </div>
483
567
  </td>
484
568
  </tr>
485
569
  </tbody>