-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
506 lines (470 loc) · 27.2 KB
/
Copy pathindex.html
File metadata and controls
506 lines (470 loc) · 27.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Accessible maternity leave timeline calculator. Computes Pregnancy Disability Leave (PDL), Family Medical Leave (FML), California Family Rights Act (CFRA), waiting period, sick, vacation, and Lincoln Financial disability dates from simple inputs.">
<!-- Security headers (meta-tag equivalents where available).
CSP deliberately denies everything by default and only allows same-origin
scripts, styles, images, and fonts. No inline scripts, no inline styles,
no external resources, no network requests, no embedding via iframe. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'none'; base-uri 'none'; form-action 'none'; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<title>Maternity Leave Timeline Calculator — Accessible Prototype</title>
<script src="theme-loader.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#main" class="skip">Skip to main content</a>
<div class="page">
<header class="masthead">
<div class="masthead-top">
<p class="eyebrow">UC Systemwide Prototype · Accessibility Replacement for .xlsm Tool</p>
<div class="masthead-controls">
<button type="button" id="themeToggle" class="theme-toggle"
aria-label="Switch to dark mode" aria-pressed="false">
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20 15.5A8 8 0 1 1 8.5 4a7 7 0 0 0 11.5 11.5z"></path>
</svg>
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
</svg>
<span class="theme-toggle-label">Dark mode</span>
</button>
<button type="button" id="dwellToggle" class="theme-toggle"
aria-pressed="false" aria-describedby="dwellToggle-desc">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
<path d="M12 7v5l3 3"></path>
</svg>
<span class="dwell-toggle-label">Dwell: off</span>
</button>
<button type="button" id="dwellInfoBtn" class="info-btn"
aria-expanded="false"
aria-controls="dwellInfoNote"
aria-label="About dwell clicking">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
<div class="dwell-time-field" id="dwellTimeField" hidden>
<label for="dwellTime" class="dwell-time-label">Seconds</label>
<button type="button" id="dwellTimeMinus" class="dwell-stepper dwell-time-btn"
aria-label="−: decrease dwell time by 1 second">−</button>
<input type="number" id="dwellTime" inputmode="numeric"
min="1" max="60" step="1" value="3"
aria-describedby="dwellTime-desc">
<button type="button" id="dwellTimePlus" class="dwell-stepper dwell-time-btn"
aria-label="+: increase dwell time by 1 second">+</button>
</div>
</div>
</div>
<!-- Descriptions for the dwell controls above (linked by
aria-describedby, so DOM position is irrelevant). They live
outside the controls flex row because an absolutely positioned
.sr-only span takes its static position at the row's right edge,
which pushed 1px past the viewport on narrow screens. -->
<span id="dwellToggle-desc" class="sr-only">When on, resting the
pointer on a button, link, or form control for the dwell time
activates it without clicking.</span>
<span id="dwellTime-desc" class="sr-only">Dwell time in seconds
before a hovered control activates. 1 to 60. Default 3.</span>
<div id="dwellInfoNote" class="info-note dwell-info-note" role="note"
aria-live="polite" aria-atomic="true" hidden>
<p><strong>Dwell clicking:</strong> hold the pointer still on a control
to activate it; no click needed. Made for mobility accommodations:
mouse hover, eye-gaze or head-tracking pointers, and switch-driven
pointer control. Adjustable delay of 1 to 60 seconds; moving away
cancels. Dropdowns expand into dwellable lists; date and number fields
gain step buttons that repeat while you rest on them.</p>
<p>Also suits gaze selection on AR headsets and press-and-hold on
mobile touch screens.</p>
</div>
<h1>Maternity Leave Timeline Calculator</h1>
<p class="lede">
This tool is designed to help you estimate and plan your pregnancy leave.
Your actual time-off, pay, and benefits will depend on applicable laws, UC
policies, and collective bargaining agreements. For guidance specific to
your situation, please consult your Leave Specialist.
</p>
<p class="staff-note">
This tool applies to staff and postdocs (select your employee type below).
It does not apply to faculty or residents.
</p>
</header>
<main id="main" class="grid">
<!-- =============== FORM =============== -->
<aside class="form-panel" aria-labelledby="form-heading">
<h2 id="form-heading" class="panel-heading">Your information</h2>
<p class="required-note">
Fields marked <span aria-hidden="true" class="required-marker">*</span>
<span class="sr-only">(required)</span> are required.
</p>
<!-- Error summary: list of all validation problems. Announced ONCE,
by moving focus to the container on show (tabindex="-1") — the
single announcement channel. No role="alert" here and none on
the inline field messages, so screen readers are not hit with
the same errors three times; each inline message is instead
read in context via the field's aria-describedby. Each link
jumps to and focuses the corresponding field. -->
<div id="errorSummary" class="error-summary"
aria-labelledby="errorSummaryHeading" tabindex="-1" hidden>
<h3 id="errorSummaryHeading" class="error-summary-heading">
<span class="error-summary-icon" aria-hidden="true">⚠</span>
There is a problem with your information
</h3>
<p id="errorSummaryIntro" class="error-summary-intro">
Please fix the following before calculating the timeline:
</p>
<ul id="errorSummaryList" class="error-summary-list"
aria-labelledby="errorSummaryIntro"></ul>
</div>
<form id="calcForm" novalidate>
<fieldset>
<legend>Employee type</legend>
<fieldset class="radio-group">
<legend>Which best describes your appointment?</legend>
<label class="radio">
<input type="radio" name="employeeType" value="staff" checked>
<span>Staff</span>
</label>
<label class="radio">
<input type="radio" name="employeeType" value="postdoc">
<span>Postdoc</span>
</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Key dates</legend>
<div class="field">
<label for="lastDay">Leave start date <span class="req" aria-hidden="true">*</span></label>
<input type="date" id="lastDay" name="lastDay" required
aria-required="true" aria-describedby="lastDay-hint lastDay-err">
<span class="hint" id="lastDay-hint">The first day of your leave. Variable employees: pick the actual first day off, not necessarily the day after your last shift. <span class="postdoc-only">Postdocs typically begin leave 2 weeks before the estimated due date.</span></span>
<span class="err-msg" id="lastDay-err" hidden></span>
</div>
<div class="field">
<label for="dueDate">Estimated due date <span class="req" aria-hidden="true">*</span></label>
<input type="date" id="dueDate" name="dueDate" required
aria-required="true" aria-describedby="dueDate-hint dueDate-err">
<span class="hint" id="dueDate-hint">From your physician. Used when actual birth date is unknown.</span>
<span class="err-msg" id="dueDate-err" hidden></span>
</div>
<div class="row">
<div class="field">
<label for="actualBirth">Actual birth date</label>
<input type="date" id="actualBirth" name="actualBirth"
aria-describedby="actualBirth-hint">
<span class="hint" id="actualBirth-hint">Optional.</span>
</div>
<div class="field">
<label for="returnDate">Estimated return to work</label>
<input type="date" id="returnDate" name="returnDate"
aria-describedby="returnDate-hint">
<span class="hint" id="returnDate-hint">Optional.</span>
</div>
</div>
<div class="field">
<label for="deliveryType">Delivery type <span class="req" aria-hidden="true">*</span></label>
<select id="deliveryType" name="deliveryType" required
aria-required="true" aria-live="polite"
aria-describedby="deliveryType-hint deliveryType-err">
<option value="">Select one…</option>
<option value="Natural">Natural birth (42-day PDL)</option>
<option value="C-section">C-section (56-day PDL)</option>
</select>
<span class="hint" id="deliveryType-hint">Determines typical Pregnancy Disability Leave length.</span>
<span class="err-msg" id="deliveryType-err" hidden></span>
</div>
<fieldset class="radio-group" aria-describedby="lincDisability-hint">
<legend><span class="staff-only">Will you be applying for disability leave through Lincoln Financial Group?</span><span class="postdoc-only">Will you be applying for short-term disability (STD) through The Standard?</span></legend>
<label class="radio">
<input type="radio" name="lincolnDisability" value="yes" checked>
<span><span class="staff-only">Yes, I will be applying for disability leave through Lincoln Financial Group</span><span class="postdoc-only">Yes, I will be applying for short-term disability through The Standard</span></span>
</label>
<label class="radio">
<input type="radio" name="lincolnDisability" value="no">
<span><span class="staff-only">No, I will not be applying for disability leave through Lincoln Financial Group</span><span class="postdoc-only">No, I will not be applying for short-term disability through The Standard</span></span>
</label>
<span class="hint" id="lincDisability-hint"><span class="staff-only">If yes, a disability waiting period applies. If no, the waiting period and Lincoln Financial income are omitted.</span><span class="postdoc-only">If yes, a 7-day waiting period applies. If no, the waiting period and STD income are omitted — and sick leave can be used during disability leave since you are not using disability benefits.</span></span>
</fieldset>
</fieldset>
<fieldset>
<legend>Work schedule</legend>
<fieldset class="radio-group" aria-describedby="schedule-hint">
<legend>Employee schedule type</legend>
<label class="radio">
<input type="radio" name="scheduleType" value="regular" checked>
<span>Regular (40 hr/wk, 5 days × 8 hours)</span>
</label>
<label class="radio">
<input type="radio" name="scheduleType" value="variable">
<span>Variable schedule (3 × 12, 4 × 10, etc.)</span>
</label>
</fieldset>
<span class="hint" id="schedule-hint">
Regular employees max out at 22 working days of sick usage; variable employees max out at 30 calendar days based on their schedule.
</span>
<div class="sub-fields" id="variableFields" hidden>
<div class="row">
<div class="field">
<label for="hoursPerDay">Hours per day</label>
<input type="number" id="hoursPerDay" name="hoursPerDay"
min="1" max="24" step="0.5" value="12"
aria-describedby="hoursPerDay-err">
<span class="err-msg" id="hoursPerDay-err" hidden></span>
</div>
<div class="field">
<label for="daysPerWeek">Days per week</label>
<input type="number" id="daysPerWeek" name="daysPerWeek"
min="1" max="7" step="1" value="3"
aria-describedby="daysPerWeek-err">
<span class="err-msg" id="daysPerWeek-err" hidden></span>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Leave balances</legend>
<div class="field">
<label for="sickHours">Total sick hours <span class="req" aria-hidden="true">*</span></label>
<input type="number" id="sickHours" name="sickHours" min="0" step="1" required
aria-required="true" aria-describedby="sickHours-hint sickHours-err">
<span class="hint" id="sickHours-hint">Enter total accrued sick hours. The tool converts to working days based on your schedule. <span class="postdoc-only">Postdocs: sick leave can be used during disability leave only while you are not receiving disability (STD) benefits — the tool applies sick leave before STD income begins.</span></span>
<span class="err-msg" id="sickHours-err" hidden></span>
</div>
<div class="field">
<label for="vacHours"><span class="staff-only">Total vacation hours</span><span class="postdoc-only">Total VAC/PTO hours</span></label>
<input type="number" id="vacHours" name="vacHours" min="0" step="1"
aria-describedby="vacHours-hint">
<span class="hint" id="vacHours-hint">Optional. Used only if sick hours don't cover the waiting period <em>and</em> you elect to use the balance below.</span>
</div>
<fieldset class="radio-group">
<legend>If sick leave doesn't cover the waiting period</legend>
<label class="radio">
<input type="radio" name="fallbackStrategy" value="vacation" checked>
<span><span class="staff-only">Use vacation balance, then go without pay</span><span class="postdoc-only">Use VAC/PTO balance, then go without pay</span></span>
</label>
<label class="radio">
<input type="radio" name="fallbackStrategy" value="lns">
<span><span class="staff-only">Go without pay (don't use vacation)</span><span class="postdoc-only">Go without pay (don't use VAC/PTO)</span></span>
</label>
</fieldset>
<div class="field" id="waitingPeriodField">
<label for="waitingPeriod">Disability waiting period (days)</label>
<select id="waitingPeriod" name="waitingPeriod">
<option value="14" selected>14 days (standard)</option>
</select>
<span class="hint"><span class="staff-only">Lincoln Financial plan waiting period.</span><span class="postdoc-only">The Standard STD plan waiting period for postdocs.</span></span>
</div>
</fieldset>
<fieldset>
<legend>Additional leave</legend>
<p class="field-note"><strong>PDL</strong> (Pregnancy Disability Leave) is automatic for California pregnancy.</p>
<div class="field-group-header">
<span class="field-group-title">FMLA / CFRA</span>
<button type="button" id="fmlaCfraInfoBtn" class="info-btn"
aria-expanded="false"
aria-controls="fmlaCfraInfoNote"
aria-label="About FMLA/CFRA eligibility">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
</div>
<div id="fmlaCfraInfoNote" class="info-note" role="note"
aria-live="polite" aria-atomic="true" hidden>
<p>The federal <strong>FMLA</strong> (Family and Medical Leave Act) and
California's <strong>CFRA</strong> (California Family Rights Act)
each provide up to <strong>12 weeks</strong> of job-protected leave. To
qualify you must have at least <strong>12 months of service</strong> and
have worked <strong>1,250 hours</strong> in the prior 12 months.</p>
<p>Most UC employees who meet the FMLA threshold also meet CFRA. For
pregnancy and bonding, FMLA generally runs alongside PDL and CFRA, so
confirm your specific timeline with your campus Leave Specialist.</p>
<p class="postdoc-only"><strong>Postdocs:</strong> you do <strong>not</strong>
need to be FMLA/CFRA eligible to receive PPFL. If you are not
FMLA/CFRA eligible, the leave is a personal leave paid through PPFL —
no departmental approval is needed. If you are FMLA/CFRA eligible,
sick leave may not be used for pay during family leave — only PPFL or
VAC/PTO.</p>
</div>
<div class="field">
<span class="hint" id="elig-hint">See the info button above for eligibility details.</span>
<label class="check">
<input type="checkbox" id="eligFMLCFRA" name="eligFMLCFRA"
aria-describedby="elig-hint">
<span>I am eligible for FMLA/CFRA</span>
</label>
</div>
<div class="spacer-s"></div>
<div class="field-group-header">
<span class="field-group-title"><span class="staff-only">Pay for Family Care and Bonding (PFCB)</span><span class="postdoc-only">Postdoc Paid Family Leave (PPFL)</span></span>
<button type="button" id="pfcbInfoBtn" class="info-btn"
aria-expanded="false"
aria-controls="pfcbInfoNote"
aria-label="About PFCB / PPFL eligibility">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
</div>
<div id="pfcbInfoNote" class="info-note" role="note"
aria-live="polite" aria-atomic="true" hidden>
<p class="staff-only">You can use PFCB only when you're on approved Family and Medical
Leave for taking care of a seriously ill family member, bonding with a
new child, or certain military-related reasons — and only if you take
that leave in full-week blocks. You cannot use PFCB for your own
medical condition or pregnancy disability.</p>
<p class="postdoc-only">Postdocs are eligible for <strong>8 weeks of
PPFL</strong> and do <strong>not</strong> need to be FMLA/CFRA
eligible. If you are not FMLA/CFRA eligible, the leave is a personal
leave paid through PPFL — no departmental approval is needed. PPFL is
<strong>per birth</strong> and may be taken any time up until the
child's first birthday. If you are FMLA/CFRA eligible, sick leave may
not be used for pay during family leave — only PPFL or VAC/PTO.</p>
</div>
<div class="row">
<div class="field">
<label for="pfcbWeeks"><span class="staff-only">PFCB weeks</span><span class="postdoc-only">PPFL weeks</span></label>
<input type="number" id="pfcbWeeks" name="pfcbWeeks" min="0" max="8" step="1"
aria-describedby="pfcbWeeks-hint pfcbWeeks-err">
<span class="hint" id="pfcbWeeks-hint"><span class="staff-only">Pay for Family Care and Bonding. Enter weeks (UC standard is up to 8).</span><span class="postdoc-only">Postdoc Paid Family Leave. Enter weeks (up to 8 per birth).</span></span>
<span class="err-msg" id="pfcbWeeks-err" hidden></span>
</div>
<div class="field">
<label for="pfcbStart"><span class="staff-only">PFCB begin date</span><span class="postdoc-only">PPFL begin date</span></label>
<input type="date" id="pfcbStart" name="pfcbStart"
aria-describedby="pfcbStart-hint">
<span class="hint" id="pfcbStart-hint">Optional — defaults to the day after PDL ends.</span>
</div>
</div>
<div id="cclSection" class="staff-only">
<div class="field-group-header">
<span class="field-group-title">Child Caring Leave (CCL)</span>
<button type="button" id="cclInfoBtn" class="info-btn"
aria-expanded="false"
aria-controls="cclInfoNote"
aria-label="About CCL eligibility">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
</div>
<div id="cclInfoNote" class="info-note" role="note"
aria-live="polite" aria-atomic="true" hidden>
<p><strong>Not everyone is eligible for CCL.</strong> Eligibility depends
on your employment classification and, for represented employees, the
terms of your union contract. Please check with your Union contract or
your campus Leave Specialist for more details.</p>
<p><strong>How long?</strong> Up to <strong>14 weeks</strong> after
FMLA/CFRA ends, or up to <strong>26 weeks</strong> if you are not
eligible for FMLA/CFRA.</p>
</div>
<div class="row">
<div class="field">
<label for="cclWeeks">CCL weeks</label>
<input type="number" id="cclWeeks" name="cclWeeks" min="0" max="26" step="1"
aria-describedby="cclWeeks-hint cclWeeks-err">
<span class="hint" id="cclWeeks-hint">Leave blank or 0 to skip. See the info button above for the week limits.</span>
<span class="err-msg" id="cclWeeks-err" hidden></span>
</div>
<div class="field">
<label for="cclAnchor">CCL starts after</label>
<select id="cclAnchor" name="cclAnchor" aria-live="polite"
aria-describedby="cclAnchor-hint">
<option value="pdl">End of PDL</option>
<option value="fml">End of FML</option>
<option value="cfra">End of CFRA</option>
</select>
<span class="hint" id="cclAnchor-hint">Varies by campus — check with your local HR.</span>
</div>
</div>
</div><!-- /#cclSection -->
</fieldset>
<div class="btn-row">
<button type="submit" class="btn-primary">Calculate timeline</button>
<button type="button" id="resetBtn" class="btn-secondary">Reset</button>
<button type="button" id="printBtn" class="btn-secondary">Print</button>
<button type="button" id="pdfBtn" class="btn-secondary">Save as PDF</button>
</div>
</form>
</aside>
<!-- =============== RESULTS =============== -->
<section class="results" aria-labelledby="results-heading">
<h2 id="results-heading">Your timeline</h2>
<div id="statusLive" class="sr-only" aria-live="polite" aria-atomic="true"></div>
<div id="resultsEmpty" class="empty">
Fill in the required fields on the left and select <strong>Calculate timeline</strong>
to see your leave schedule.
</div>
<div id="resultsContent" hidden>
<div class="callout" id="summaryCallout"></div>
<details class="accordion" id="timelineAccordion" open>
<summary>
<h3 id="events-heading">Leave events</h3>
<span class="accordion-toggle-label" aria-hidden="true">Show / hide</span>
</summary>
<div class="accordion-body">
<ul class="timeline" id="timelineList" aria-labelledby="events-heading"></ul>
</div>
</details>
<details class="accordion" id="calendarAccordion">
<summary>
<h3 id="cal-heading">Monthly calendar view</h3>
<span class="accordion-toggle-label" aria-hidden="true">Show / hide</span>
</summary>
<div class="accordion-body">
<div class="legend" aria-label="Calendar legend">
<span><span class="sw sw-pdl"></span>PDL</span>
<span><span class="sw sw-fml"></span>FML</span>
<span><span class="sw sw-cfra"></span>CFRA</span>
<span><span class="sw sw-linc"></span><span class="staff-only">Lincoln Financial</span><span class="postdoc-only">The Standard (STD)</span></span>
<span><span class="sw sw-wait"></span>Waiting period</span>
<span><span class="sw sw-pfcb"></span><span class="staff-only">PFCB</span><span class="postdoc-only">PPFL</span></span>
<span class="staff-only"><span class="sw sw-ccl"></span>CCL</span>
<span><span class="sw sw-sick sw-bordered"></span>Sick day</span>
<span><span class="sw sw-vac sw-bordered"></span><span class="staff-only">Vacation day</span><span class="postdoc-only">VAC/PTO day</span></span>
<span><span class="sw sw-lns sw-bordered"></span>Leave, no salary</span>
<span><span class="sw sw-holiday sw-bordered"></span>★ Holiday</span>
</div>
<div class="cal-cols" role="group" aria-label="Calendar column layout">
<span class="cal-cols-label" id="calColsLabel">Columns:</span>
<button type="button" class="cal-cols-btn" id="calCols1" aria-pressed="false">1 column</button>
<button type="button" class="cal-cols-btn" id="calCols2" aria-pressed="true">2 columns</button>
</div>
<div class="cal-wrap cols-2" id="calendars" aria-labelledby="cal-heading"></div>
</div>
</details>
</div>
<aside class="disclaimer" role="note">
<p><strong>Prototype disclaimer.</strong> This tool is a work-in-progress
accessibility prototype that replaces an Excel (.xlsm) worksheet. It is
<em>not</em> an application for, or a guarantee of, disability benefits through
Lincoln Financial or any other carrier. Always confirm your specific plan
details, eligibility, and dates with your campus HR Leave Administration office.</p>
<p class="mb-0">The calendar uses the
<strong>UCOP systemwide holiday calendar</strong> as its authoritative
baseline for 2023–2026 and projects 2027 from standard UC observation
rules. It also includes Winter Curtailment days commonly observed across
UC campuses (UCOP, UCB, UCD, UCI, UCLA, UCM, UCR, UCSD, UCSF, UCSB, UCSC).
Because individual locations may add or remove days in a given year —
especially around winter curtailment — verify specific dates with your
local HR if they fall inside your leave window.</p>
</aside>
</section>
</main>
</div><!-- /.page -->
<script src="app.js" defer></script>
</body>
</html>