Svelvet 10.0 — New Features for accessibility and improved performance

Introduction

Svelvet version 10.0 is here and we are excited to share the latest updates to the popular node-based UI component library. This upgrade features major advancements in Svelvet’s push to improve the user experience and increase performance by persisting state across the application. Another major priority for the team in this version was to enhance seamless accessibility for a broader user base. Keyboard navigation across the canvas has been refined, and new functionalities added for more inclusive and optimal user interaction. Additionally, to address the accessibility needs of visually impaired users, a new high-contrast menu component has been developed to allow users to choose a user interface color theme that suits their needs or create a totally custom theme. Through these improvements, Svelvet 10.0 underscores our dedication to enabling developers to create more dynamic, accessible and amazing applications for more users.

New Features

Persistent Canvas State

To ensure that canvas data in the application is consistent across page refreshes and to make for more seamless navigation, the team has made substantial progress in the development of persistent state. Users of Svelvet have been requesting this feature for some time, and with this latest update we are excited to put this powerful capability at their fingertips. By utilizing local storage, this reliable client-side solution makes Svelvet even more responsive. Attributes in the canvas are now capable of being saved and reloaded, allowing for a more consistent and performant user experience. Stay tuned, as the Svelvet team is actively working on developing additional attributes of the canvas to persistent state going forward.

Keyboard Accessibility Enhancements

This version of Svelvet brings improvements and added functionality to accessible keyboard navigation. In a dynamic and interactive user interface application, it’s crucial to have a robust system for navigating and manipulating the application environment. The Svelvet team took on this challenge by refining existing navigation and greatly expanding what users can accomplish with the keyboard alone. This push towards more accessible and broader capabilities will benefit users with motor disabilities, facilitate alternative input devices and increase efficiency for all users.

High-Contrast Theme Component

In continuation of our commitment to making Svelvet more accessible, this release introduces a brand new controller component tailored specifically for the benefit of the visually impaired community. Visual impairment consists of a wide spectrum of conditions and degrees that require different assistive user interface enhancements for different conditions. In response to these needs, a new high-contrast theme component was developed, enabling a wide range of settings designed to meet the standards and requirements of our visually impaired users. In addition to the built-in themes, users can also create completely custom themes to meet their specific needs or desires.

Installation

Svelvet 10.0 offers more performance and customizability than ever before. The new version is available now as an npm package.

To install, run the command below using npm:

npm install svelvet

Or yarn:

yarn add svelvet

Check out our docs to see these features in more detail, along with everything else Svelvet has to offer!

The Svelvet 10.0 Team

Isaac Bocage | Linkedin | Github

Solomon Moon | Linkedin | Github

Mayson Lee | Linkedin | Github

Julian Bos| Linkedin | Github