https://github.com/rancoud/tag.js
https://github.com/rancoud/tag.js
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rancoud/tag.js
- Owner: rancoud
- License: mit
- Created: 2023-10-25T12:24:19.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-26T13:47:52.000Z (11 months ago)
- Last Synced: 2025-02-26T19:44:31.653Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# tag.js
[](https://github.com/rancoud/tag.js/actions/workflows/test.yml)
[](https://codecov.io/gh/rancoud/tag.js)
JS Tag Manager take care of your tags by validating inputs, use feedbacks and add accessibility.
Based on the work of [Orange a11y guidelines: Creating accessible "tags" 1/2](https://a11y-guidelines.orange.com/en/articles/tags/) and [Orange a11y guidelines: Creating accessible "tags" 2/2](https://a11y-guidelines.orange.com/en/articles/tags/2/).
## Installation
You need to download the js file from `dist` folder, then you can include it in your HTML at the end of your body.
```html
```
Then you need to add
```html
-
```
```js
var domRoot = document.getElementById("tag-dom");
var err = new Tag(domRoot);
if (err instanceof Error) {
console.error(err);
}
```
`Tag` accept second optional argument `window.screenReaderSpeak`, you can rely on [screen-reader-speak.js](https://github.com/rancoud/screen-reader-speak.js)
### Data on HTML
#### Mandatory
* `data-tag-form-input-id` input for new tag
* `data-tag-form-textarea-id` textarea where tags are already saved
* `data-tag-list-id` ul HTMLElement
* `data-tag-new-id` li which contains input for new tag
#### Optional
* `data-tag-aria-label` aria label
* `data-tag-srspeak-add` text for screen reader when add new tag
* `data-tag-srspeak-delete` text for screen reader when remove tag
* `data-tag-item-class` css value for tag
* `data-tag-li-class` css value for li
* `data-tag-new-keys` caracters used for separate words
## How to Dev
`npm test` or `docker buildx bake test` to test and coverage
`npm run build` or `docker buildx bake build` to create dist js file minified
`npm run jsdoc` or `docker buildx bake jsdoc` to generate documentation
`npm run eslint` or `docker buildx bake lint` to run eslint
`npm run eslint:fix` to run eslint and fix files