Skip to content

Release v3.3.1

Choose a tag to compare

@uvarov-frontend uvarov-frontend released this 23 Aug 20:05
· 11 commits to main since this release

Three headline features: motion, a week view you can swipe and fold, and an accessibility pass that touched nearly every element the calendar renders.

123 (2)

Highlights

  • Animated transitions. The new animation option, off by default. Arrows and year paging slide, view switches cross-fade, folding has a curve of its own. Tune duration and easing globally or per group — slide, fade, collapse. prefers-reduced-motion is honoured without asking.
  • A week at a time. type: 'week' renders a single week and steps week by week; context.displayWeekDate tells you which one is on screen.
  • Swipe navigation. enableSwipe pages months, weeks and the year list with mouse, touch or pen. The grid follows the pointer, commits on distance or velocity, and stops exactly where the arrows stop.
  • Collapse to a week. enableCollapse folds a month down to the week holding the selected date — click the grabber or drag it — and unfolds it back.
  • Accessibility, properly. ARIA now describes what the calendar actually is. The date grid is a single tab stop instead of one per day, with the arrow keys walking the cells. Focus is no longer stolen on init or dropped while paging, and a closed inputMode popup leaves the accessibility tree entirely. Checked against axe-core, Pa11y, IBM Equal Access and html-validate.
  • Partial aria labels. labels.arrowNext and labels.arrowPrev accept a subset now — change one string without redeclaring the other two.

Upgrade notes

Nothing breaks at the API level, but the rendered DOM changed. Worth a look if you style or test against it:

  • root element: role="application"role="group", or role="dialog" in inputMode; tabindex 0-1
  • aria-selected moved from the date button onto its [data-vc-date] gridcell
  • week numbers render as <b> unless onClickWeekNumber is set
  • with onClickWeekDay, the weekday header wraps a button — new styles.weekDayBtn key
  • the date grid keeps one tab stop, so Tab no longer walks every date
  • time fields are plain <div> wrappers now, and the sliders no longer carry a name
  • role="toolbar"role="group" in headers, role="region"role="group" on multiple columns
  • the weekday row is 24px tall to meet the WCAG target size, making calendars ~6px taller
  • layouts gained a week key
  • enableCollapse pairs with default and week only

PRs

  • #430 feat: add animated transitions between calendar views
  • #431 feat: add week calendar type with collapse and swipe gestures
  • #432 fix(a11y): improve calendar accessibility and demo semantics