0.2.2 • Published 6 months ago
smooth-tab v0.2.2
SmoothTab
The goal of this project is to provide a nicer-looking and animated replacement for the browser-native accessibility outline. Pressing tab in the browser will cause the outline smoothly move to the new position.
Since this reticle is overlaid on top of the entire page, it should not ever have a segment that appears cut off. A smooth animation will help the user track the position of the reticle as it is changing. The reticle styles can be overridden easily using CSS.
Features
- Animates the reticle between focusable elements when pressing tab or clicking.
- Resizes the reticle to cover the extents of the focused element
- Keeps the reticle on top of the focused element when scolling.
Installation
Using NPM
$ npm install smooth-tabimport SmoothTab from 'smooth-tab';
import './styles.css' from 'smooth-tab';
new SmoothTab().init();Directly In Browser Using CDN and ESM
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/smooth-tab@latest/dist/style.css">
<script type="module">
import smooth-tab from 'https://cdn.jsdelivr.net/npm/smooth-tab@latest/+esm';
new SmoothTab().init();
</script>
...
</head>Development
You can get involved in development for this project! Feel free to submit issues and start a discussion. This project is in its infancy and is not feature complete, fully accessible, or tested.
Start the development environment with:
# pnpm
$ pnpm install
$ pnpm dev
# npm
$ npm install
$ npm run dev