Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinribeiro/toggle-tooltip
An accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
https://github.com/justinribeiro/toggle-tooltip
accessibility ada tooltip web-component
Last synced: 2 months ago
JSON representation
An accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
- Host: GitHub
- URL: https://github.com/justinribeiro/toggle-tooltip
- Owner: justinribeiro
- License: mit
- Created: 2021-06-03T20:32:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-12T18:45:18.000Z (about 1 year ago)
- Last Synced: 2024-05-02T05:38:44.217Z (8 months ago)
- Topics: accessibility, ada, tooltip, web-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@justinribeiro/toggle-tooltip
- Size: 289 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# toggle-tooltip
A small (8KB), accessible, fast, and WCAG 2.1 compliant toggle style tooltip web component using role=status.
## Features
1. WCAG 2.1 compliant:
2. Fast: no jank repaint (turn on paint flashing in DevTools...nada)
3. Screen reader friendly (interaction model allows explicit feedback)
4. Supports optional hover (which is also compliant with WCAG 1.4.13)
5. Basic styling with CSS custom properties
## Demo / Screen Reader
To see the tooltip in action within JAWS 2020, see
https://www.youtube.com/watch?v=PNH0RTB9alg
## Install with Tools
Install the component:
```sh
npm i @justinribeiro/toggle-tooltip
# or
yarn add @justinribeiro/toggle-tooltip
```
## Install with CDN
If you want the paste-and-go version, you can simply load it via CDN:
```html
```
## Usage
Fire it up:
```html
<script type="module">
import '@justinribeiro/toggle-tooltip/index.js';
ⓘ
I'm a tooltip!
```
See other uses in `demo/index.html`.
## Development
```
$ git clone [email protected]:justinribeiro/toggle-tooltip.git
$ cd toggle-tooltip
$ yarn install
$ yarn start
# run the tests
$ yarn test
```
## Properties
| Property | Attribute | Type | Default | Description |
|----------|-----------|-----------|---------------|--------------------------------------------------|
| `hover` | `hover` | `boolean` | false | Setting `hover` as attribute on component allows for the mouseover and
mouseout events to become active for this instance of the `toggle-tooltip`
Note: this mode is complaint with WCAG SC 1.4.13 Content on Hover or Focus
TODO: I suppose I could watch for the change and then add/remove the event
handlers...but I don't have a use case for the at the moment |
| `label` | `label` | `string` | "'more info'" | Define the internal button aria-label when an svg icon or other non-text
is used |
| `show` | `show` | `boolean` | "'more info'" | Define the internal button aria-label when an svg icon or other non-text
is used |
## Methods
| Method | Type | Description |
|---------|-------------------------------|--------------------------------------------------|
| `close` | `(noReFocus?: boolean): void` | Close the tooltip
**oReFocus**: Don't refocus to the button (probably because we
tabbed off and are moving through the document) |
| `open` | `(): void` | Open the tooltip and focus to it |
## Slots
| Name | Description |
|-----------|--------------------------------------------------|
| | Default slot injects into button value, useful for icon |
| `tooltip` | Any message or links you'd like in the tooltip status message |
## CSS Custom Properties
| Property | Default |
|--------------------------------------------|------------------|
| `--toggle-tooltip-button-background-color` | "transparent" |
| `--toggle-tooltip-button-border` | "none" |
| `--toggle-tooltip-button-padding` | 0 |
| `--toggle-tooltip-status-background-color` | "#fafafa" |
| `--toggle-tooltip-status-border` | "1px solid #ccc" |
| `--toggle-tooltip-status-border-radius` | "0.5rem" |
| `--toggle-tooltip-status-box-shadow` | "none" |
| `--toggle-tooltip-status-padding` | "1rem" |