v.0.32.19 released - including major accessibility improvements, support for Vite/Astro, and more!

[endigo9740]

https://github.com/Brain-Bones/skeleton/releases/tag/0.32.19

Hey everyone, the Skeleton team is thrilled to announce a new major update to Skeleton. This represents the single largest update since the libraries public release! A special shoutout to everyone that contributed and helped make this happen!

Summary

♿ Major updates to a11y (accessibility) for near every component!
⚡ Official support for for Vite + Svelte!
🚀 Official support for Astro
✴️ Docs updated to support the latest SvelteKit updates
🤝 Improvements for guides and contributor information
🤘Plus lots more!

Major Updates

These are the largest and most far reaching updates.

Accessibility (a11y) - #41

This helps move Skeleton from very few a11y features, to near full support for all ARIA specs. You can view the list of changes per component in the Issue linked above. However, here’s the most notable changes:

• All relevant components now react to tab focus, per the ARIA spec
• All relevant components now have keyboard shortcuts, per the ARIA spec
• All relevant components now include attributes requires per the ARIA spec.
• See the individual ARIA specs linked below under each respective component in the ticket. These are also included as part of each component’s documentation page!
• A handful of components have been refactored or rebuilt. This was done to fulfill semantic element a11y requirements for some components. (ex: we were overusing <nav>).
• The most notable component changes are:
  • Accordion - rebuilt to take advantage of details/summary elements and native open/close
  • List/ListItem/NavItem - rebuilt to meet semantic element requirements. Also note the NavItem component has now been merged into the ListItem. NavItem has been thrown into a figurative volcano.
  • LightSwitch - redesigned and recreated as a toggle to follow modern conventions.

Decouple Skeleton from SvelteKit - #68

A small number of components were built with SvelteKit-only features, such as Svelte-only lifecycle hooks. This was preventing the library from working in other Svelte-supported app frameworks. The main culprits were:

• Menu - was using a SvelteKit-only lifecycle hook, now uses a Svelte alternative (onMount)
• LightSwitch - this used a Menu prior, so same bug. The redesign/refactor nixed this issue.
• CodeBlock - the way we’re importing Highlight.js does no play well with ESM-style imports. This was our biggest offender as far as bugs, so we've opted to remove it from the package temporarily and will aim to reinstate in the next release.

Alongside these updates we now offer official support and documentation for the following:

• Vite + Svelte (ticket) - Skeleton should now work on any Vite project configured with Svelte. Plus guided instruction is included from the homepage through multiple guide pages (see tabbed sections on each)
• Astro (ticket) - Same as above, guided instruction has been added including a dedicated “Usage with Astro” page section.

Updated SvelteKit to next.405+ - #96

Full explanation by Rich Harris: sveltejs/kit#5748

The SvelteKit team released a series of breaking updates for SvelteKit recently. This changes how routes and load methods work in SvelteKit. Thankfully they rolled out a migration tool to make it easier to update your projects. All documentation in Skeleton will accommodate for this.

For contributors, note the following changes:

• /routes/__layout.svelte → /routes/+layout.svelte
• /routes/index.svelte → /routes/+page.svelte
• /src/app.css → /src/app.postcss
• All page routes now follow a new convention:
  • Was: /routes/docs/contributions.svelte
  • Now: /routes/docs/contributions/+page.svelte

Minor Updates

Smaller but useful updates!

Alert Design Refresh - #141

We've provided a design refresh to the Alert component. This now has better color contrast and a unique style.

Improved Hover Styles - #124

Global improvements to hover states and styling for all relevant components.

Added SEO Metatags in app.html HTML Header - #99

And improvement to improve natural search traffic to Skeleton. More eyeballs means more users and more contributors!

BUGFIX: Avatars w/ Images Not Rounded - #80

BUGFIX: Added Step Component Package Export - #102 | #103

Prevents the error seen for the above ticket in this release.

For Contributors

This update comes with a whole array of improvements that should aid contributors.

Updates to the Contributor Guide - View the Guide

This includes improved information for getting started to make it easier to make your first contribution. As well as details new branch and naming conventions we recommend for all contributors going forward.

New dev Branch Introduced

As noted in the #contributors channel, all PRs going forward will go to the dev branch. It gives us buffer between in-progress dev updates and the production branch, allowing us to hotpatch master if we need to. When you begin testing, do so on this branch.

Update node_modules

Due to to dependencies updates as part of “Major Updates → SvelteKit next.405+” please make sure you update your node_modules. The fastest way may be to delete the directory and run npm install. Failure to do so means you may see errors when starting your dev server.

New Default Server Port - #114

SvelteKit’s previous default for the local dev server (npm run dev) was port 3000. So you would browse to the following in your browser:

http://localhost:3000/

However, new versions of SvelteKit now default to Vite’s web server instead and use its default port - port 5173. Essentially just use swap to this going forward:

http://localhost:5173/

Prettier Linting Updates- #70

We’ve had Prettier setup since we created the project, but had not been taking advantage of it. @niktek helped update and whip it the config into shape. FYI formatting can be skipped via // prettier-ignore statements. This will be very helpful with multiple people touching the code!

Package Update to Support Vitest for PNPM - #67

TThis should help any contributors using pnpm in the future.

SVGs Reorganized (docs only for now) - #121

We've introduced a new component to managed SVG icons within the Skeleton docs. Note this is not publically available to you yet, but once we complete our testing period you can expect to see it added.

Added a chore/* Branch Convention - #92

Per @niktek suggestion. Works like feat/* or bugfix/*. The Contribution guide was updated to note this and includes other guidance for getting started, such as the dev branch updates, etc.

Vitest Config and Testing Improvements - #144 | #146

We've made improvements to the Vitest configuration and each individual component's tests. There's more work to be done, but this is a great first step in improving automated test coverage.

BUGFIX: Vitest Tests Failing - #127