{"_id":"@accessible-components/tag-input","_rev":"4-bcd839aa3ce9bbed53f7f22ffb629d45","name":"@accessible-components/tag-input","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@accessible-components/tag-input","version":"0.1.1","private":false,"description":"Simple and accessible component for creating tags.","author":{"name":"Sergei Kriger","url":"https://sergeikriger.com/"},"homepage":"https://github.com/accessible-components/tag-input","repository":{"type":"git","url":"git+https://github.com/accessible-components/tag-input.git"},"bugs":{"url":"https://github.com/accessible-components/tag-input/issues"},"main":"./build/tag-input.js","license":"MIT","keywords":["tags","tag input","accessibility","a11y"],"scripts":{"start":"gulp","build":"gulp build","serve:build":"gulp serveBuild","clean":"gulp clean","release":"standard-version"},"devDependencies":{"@babel/core":"^7.12.7","@babel/preset-env":"^7.12.7","browser-sync":"^2.26.13","del":"^5.1.0","gulp":"^4.0.2","gulp-autoprefixer":"^7.0.1","gulp-babel":"^8.0.0","gulp-clean-css":"^4.3.0","gulp-concat":"^2.6.1","gulp-header":"^2.0.9","gulp-rename":"^2.0.0","gulp-replace":"^1.0.0","gulp-terser":"^2.0.0","standard-version":"^9.0.0"},"resolutions":{"yargs-parser":"^20.2.4"},"gitHead":"96691cf9c02045cece5e2e128ca82ae935089e5a","_id":"@accessible-components/tag-input@0.1.1","_nodeVersion":"12.11.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FfWWlY/gJBDPpCNpV9tivniZ/+i0iFBwpLHchB4gwS0BcIQphY/7OaDtLl+XIKrCV8p7ge4b3xj3UC8Let9OAA==","shasum":"12f783babbfde762c288f268e763600d608e18cc","tarball":"https://registry.npmjs.org/@accessible-components/tag-input/-/tag-input-0.1.1.tgz","fileCount":8,"unpackedSize":49914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu338CRA9TVsSAnZWagAABmsP/0yWicIBMG5hCh/HTHDh\n/sb0cELHLWzDl48XRqYOOWpXAX1TG0R8nQiWDHL4uPKbGRPn+Z58eKpic4ZJ\n7dSkNAf0XE07Vewc/n3hPHHxPYLrphuOlkl8IJQW8/5V90K1vvmg3ZiU1RyI\n9/7K07pl+Fob11Lrv0QA9IhrT4jEGX+fGuP0zi9TaxwriuhN4idX/+1WG+tc\nPdQ55oW5XP/TtKJ/1QTQcfObLKy+TGwjpIXXUBu/FAxfF6VN0M0W4JVdQBBo\njEXY0GY1NACOXLYzEcXgh/kzC9fuwYQByFm5YPKaXqiqkgluvVxl+7c/KS7U\nV8iKN2fxwIrlfisw+m0P/oPWd1bfJW40YakpRSe4uHKUavRR83qY8NfZUMbi\nwhc/tJDAm6xTCaITJJpOnrEZW0rdBYVVkqrK0YLL9twJWsSUSu9Nr2l/8UNA\ndmp8CQIg75a4iyth7lkcQhenyi2S/I5VNDp+Si6zxzKYgectR4SHqDZqnTyo\nDcC7mp2m6Aqi7tFwmGdHPwdL0r0ONulX27FB4vCKpFHWkvwUStALucp3CJAj\nyJwjGWdyjId/gTIyLBnH+Q8Qs4cj78XJvo9i90kIikWS5fk9+0lIinOHh/iL\n1WOlxOz+8p91s4LGfZRYOWp5668kQdrZe2hhqmfVaTvFnR+4TItuwJOw94W9\npabu\r\n=pPSJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlQt7n7Z8WwBXzz9GO4+H2smMj0YLD/uQ8sHpQqDvE6AiBYkGrUfm2eGJ4A7Mq5qUkrMg3L0QbjCjo/HUM1KmwpMw=="}]},"_npmUser":{"name":"sergeikriger","email":"info@sergeikriger.com"},"directories":{},"maintainers":[{"name":"sergeikriger","email":"info@sergeikriger.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tag-input_0.1.1_1606123003704_0.7723729079848689"},"_hasShrinkwrap":false},"0.2.0":{"name":"@accessible-components/tag-input","version":"0.2.0","private":false,"description":"Simple and accessible component for creating tags.","author":{"name":"Sergei Kriger","url":"https://sergeikriger.com/"},"homepage":"https://github.com/accessible-components/tag-input","repository":{"type":"git","url":"git+https://github.com/accessible-components/tag-input.git"},"bugs":{"url":"https://github.com/accessible-components/tag-input/issues"},"main":"./build/tag-input.js","license":"MIT","keywords":["tags","tag input","accessibility","a11y"],"scripts":{"start":"gulp","build":"gulp build","serve:build":"gulp serveBuild","clean":"gulp clean","release":"standard-version"},"devDependencies":{"@babel/core":"^7.12.7","@babel/preset-env":"^7.12.7","browser-sync":"^2.26.13","del":"^5.1.0","gulp":"^4.0.2","gulp-autoprefixer":"^7.0.1","gulp-babel":"^8.0.0","gulp-clean-css":"^4.3.0","gulp-concat":"^2.6.1","gulp-header":"^2.0.9","gulp-rename":"^2.0.0","gulp-replace":"^1.0.0","gulp-terser":"^2.0.0","standard-version":"^9.0.0"},"resolutions":{"yargs-parser":"^20.2.4"},"gitHead":"755885dea33d6f6849a87c8791bb3908f5b6b254","_id":"@accessible-components/tag-input@0.2.0","_nodeVersion":"12.11.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-RXlJUqYGDVjZWBRJF1w3X9qLpp1Y17NrIO2UpmytoYiBVjBDO3xuytql4lf88ZsclU27mkmWpiRxpNMtOe2QkA==","shasum":"72cda788537ff7f8b30958bcb927e9f0e94c3d0d","tarball":"https://registry.npmjs.org/@accessible-components/tag-input/-/tag-input-0.2.0.tgz","fileCount":8,"unpackedSize":54399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvLTPCRA9TVsSAnZWagAARVQP/iadzbefGoYvrIFY/1wf\nqJKWwAiwAYxkZYiB80q0Gcxky4P7KgC1SS+mAdtCM54H+PH3zGnsirkMeYdx\n5e9rE9OaTTrCrAfZHE+pyOmIrQhwbkvaOTyIJouyRhVWfqEH5SgZtqPQO8AE\nXck8T7g1y5r9EthVGBZnztBotJpYe7vFbmaSd6Cc8wsuq74dFGgt11/uUc3z\nKrix+JdBQi3zAHrUydZkjA3yHMP0zpeIqS+7FN926uIrbKT97HW8QrYCtjNz\ndqaUxqjXJV61ZgRADLKiifzfrDmcXOepuoyoXVCyxTtEuzyeeC0lwS+w3aQZ\ns/uoG+XywNKeYiBz2njiZQZVMt6T4g8SO5z9MV3GPgBIHGbLdjRt3sht4QOf\nYibxxAK+1BOMt0ki48XebUgUTQ4JhQN0gsQ2q+x0PpxpmiSzHbDi7nVhvMVi\n0dYN1eYgK2TYL/lWom+at9jUmh0C9U+rKmfsTi0WZT6YbgkjaymcVWs+4kbS\ndDGHng96a8teD/EtxAE4nwK0phIQo9cG2TAg4Lg8dV4BCMC4Yx8JBjFvxYkg\nmyXzB4LGRFJE6iXAxvMO7CHJnN6UWrEp75+18Eij5mrrERJJlE4diI5duznL\ngQdrNEFez1041UwTyICm5wNYhvGfdZYrRvo8R4alK/fBUv0XlcvssXhHvv7T\nsNTX\r\n=5F1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEa/s8m9Gl+Ik0mVxoeS/90bbNXYYGY7T4FDTb16udO/AiBN3/GdmOCq4+1awW7beZOT304t6f3+rOJvXP2GX9F4hQ=="}]},"_npmUser":{"name":"sergeikriger","email":"info@sergeikriger.com"},"directories":{},"maintainers":[{"name":"sergeikriger","email":"info@sergeikriger.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tag-input_0.2.0_1606202575170_0.5588969088204534"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-23T08:30:43.228Z","0.1.0":"2020-11-23T08:30:43.637Z","modified":"2022-04-04T11:07:05.275Z","0.1.1":"2020-11-23T09:16:43.843Z","0.2.0":"2020-11-24T07:22:55.336Z"},"maintainers":[{"name":"sergeikriger","email":"info@sergeikriger.com"}],"description":"Simple and accessible component for creating tags.","homepage":"https://github.com/accessible-components/tag-input","keywords":["tags","tag input","accessibility","a11y"],"repository":{"type":"git","url":"git+https://github.com/accessible-components/tag-input.git"},"author":{"name":"Sergei Kriger","url":"https://sergeikriger.com/"},"bugs":{"url":"https://github.com/accessible-components/tag-input/issues"},"license":"MIT","readme":"# Tag Input\n\n[![npm version](https://img.shields.io/npm/v/@accessible-components/tag-input)](https://www.npmjs.com/package/@accessible-components/tag-input)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/accessible-components/tag-input/blob/master/LICENSE.md)\n[![License](https://img.shields.io/badge/accessibility-AA-limegreen)](https://www.w3.org/WAI/WCAG21/quickref/)\n\n\nSimple and accessible component for creating tags. Check out a [demo page](https://tag-input.netlify.app/).\n\n## Features\n\n* Tags can be added both manually and dynamically.\n* Fully accessible for keyboard and assistive technologies.\n* Cusomisable styles.\n\n![TagInput in action](./assets/demo-simple.gif)\n\n## Browser support\n\nAll modern browsers. _IE11_ is not supported.\n\n### Tested in\n\n| OS | Browser | Screen reader |\n| -- | ------- | ------------- |\n| macOS | Safari | VoiceOver |\n| iOS | Safari | VoiceOver |\n| Windows | Chrome | JAWS |\n| Windows | Firefox | NVDA |\n| Android | Chrome | Talkback |\n\n## Installation\n\n### `npm`\n\n```\nnpm install @accessible-components/tag-input\n```\n\nThen import `build/tag-input.min.js` and `build/tag-input.min.css` from `node_modules`.\n\n### Static sites\n\nCopy `build/tag-input.min.js` and `build/tag-input.min.css` to your project and include them in your HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"./path/to/file/tag-input.min.css\" />\n...\n<script src=\"./path/to/file/tag-input.min.js\"></script>\n```\n\n### Locally\n\n```\ngit clone https://github.com/accessible-components/tag-input.git\ncd tag-input/\nnpm install\nnpm start\n```\n\nOpen http://localhost:8080/ in your browser to open the demo page.\n\n## Keyboard support\n\nOnce focused on the input field, following keyboard shortcuts are available:\n\n| Shortcut | Input field | Tag selected | Action |\n| -------- | ----------- | ------------ | ------ |\n| `ArrowLeft`, `ArrowRight` | Empty | - | Navigate through tags if they exist. Selected tag is visually highlighted as well as anounced for screen reader users.  |\n| `Delete` | Empty | No | Deletes the last tag. |\n| `Enter` | Empty | Yes | Makes selected tag editable. |\n| `ESC` | Empty | Yes | Resets edited tag (before it saved) to the prevous state. |\n| `Enter`, `Tab` | Filled | No | Creates a new tag. |\n\n### Some thoughts to `Backspace` key\n\nAlthough, many similar tag input components use `Backspace` key for deleting tags (if an input field is empty), after testing `TagInput` with blind users we decided not to support this shortcut because of following reasons:\n\n* Many screen reader users once focused on the input field want to be sure that it's empty (often some sample text is already prefilled). For that instead of reading the content they simply delete it with `Backspace` key, so using this key for other actions may confuse screen reader users.\n\n* Some of the blind testers used devices with so called _Perkins Style Braille Keyboard_ where `SwipeLeft` triggers `Backspace`, wich may cause unexpected behaviour.\n\nFor deleting tags use `Delete` key.\n\n## Accessibility\n\n`TagInput` is fully accessible for a keyboard, screen readers and other assistive technologies. It was tested by people who use these technologies on everyday basis.\n\n## Usage\n\nCreate an empty element:\n\n```html\n<div id=\"colors\"></div>\n```\n\nCreate `TagInput` instance:\n\n```js\nconst colors = document.getElementById('colors');\n\nconst colorsTagInput = new TagInput(colors, {\n  tags: ['red', 'green', 'blue'],\n  label: 'Colors',\n  placeholder: 'Add colors',\n  // other options\n\n  onTagAdd: (tag, tags) => {\n    // do something\n  },\n  onTagRemove: (tag, tags) => {\n    // do something\n  },\n  onTagUpdate: (oldTag, newTag, tags) => {\n    // do something\n  },\n});\n```\n\n### Custom styles\n\nYou can easily adjust `TagInput` styles.\n\n![TagInput in action](./assets/demo-custom-styles.png)\n\nTo change colors you can simply update following CSS custom variables:\n\n```css\n.tag-input {\n  /* input */\n  --text: inherit;\n  --bg: #fff;\n  --bg-disabled: #f9f9f9;\n  --border: rgba(121, 121, 121, 0.23);\n  --border-hover: rgba(121, 121, 121, 0.4);\n  --border-focus: rgba(45, 146, 255, 0.7);\n  --border-focus-light: rgba(190, 221, 255, 0.5);\n\n  /* tag */\n  --tag-text: #164172;\n  --tag-bg: #e5f1ff;\n  --tag-border: #e5f1ff;\n  --tag-remove-button: transparent;\n  --tag-remove-icon: #2e91fd;\n\n  ...\n}\n```\n\n> See all CSS properties in `tag-input.css`.\n\nTo update other styles (`paddings`, `margins` etc.), you may simply override css styles. `TagInput` has following HTML structure:\n\n```html\n<div class=\"tag-input-container\">\n  <label class=\"tag-input-label\">Colors</label>\n  <div class=\"tag-input\">\n    <div class=\"tag-input__tag\">\n      <span class=\"tag-input__text\">red</span> <!-- Shown -->\n      <input class=\"tag-input__edit\" /> <!-- Hidden -->\n      <button class=\"tag-input__remove\">\n        <svg class=\"tag-input__remove-icon\">...</svg>\n      </button>\n    </div>\n    <div class=\"tag-input__tag tag-input__tag--editable\">\n      <span class=\"tag-input__text\">green</span> <!-- Hidden -->\n      <input class=\"tag-input__edit\" /> <!-- Shown -->\n      <button class=\"tag-input__remove\">\n        <svg class=\"tag-input__remove-icon\">...</svg>\n      </button>\n    </div>\n    <div class=\"tag-input__tag\">\n      <span class=\"tag-input__text\">blue</span> <!-- Shown -->\n      <input class=\"tag-input__edit\" /> <!-- Hidden -->\n      <button class=\"tag-input__remove\">\n        <svg class=\"tag-input__remove-icon\">...</svg>\n      </button>\n    </div>\n    <input class=\"tag-input__input\" placeholder=\"Add colors\" />\n  </div>\n</div>\n```\n\n## Options\n\n| Option | Type | Default | Description |\n| ------ | ---- | ------- | ----------- |\n| **tags** | `String[]` | `[]` | Tags provided on initialization. |\n| **prefix** | `Type` | `tag-input` | Unique prefix for class names and IDs inside the component. |\n| **disabled** | `Boolean` | `false` | `disabled` attribute for the input element. Also makes tags not editable. |\n| **name** | `String` | `tag-input` | `name` atribute for the input field to be accessed on form submit. |\n| **placeholder** | `String` | `Add tags` | `placeholder` attribute for the input element. |\n| **label** | `String` | `Tags` | Label text. |\n| **hiddenLabel** | `Boolean` | `false` | Hides the label visually, but keeps it accessible for screen readers. |\n| **onInit** | `Function` | `undefined` | Runs after tag input init. Parameters: `tags` (list of tags). |\n| **onTagAdd** | `Function` | `undefined` | Runs after a new tag was added. Parameters: `tag` (added tag), `tags` (list of tags after adding). |\n| **onTagUpdate** | `Function` | `undefined` | Runs after a tag was updated. Parameters: `oldTag` (a tag before update), `newTag` (a tag after update), `tags` (list of tags after updating). |\n| **onTagRemove** | `Function` | `undefined` | Runs after a tag was removed. Parameters: `tag` (removed tag), `tags` (list of tags after removing). |\n| **ariaTag** | `String` | `Tag {{TAG}}.` | Adds `aria-label` to the tag element. |\n| **ariaEditTag** | `String` | `Edit tag.` | Adds label text to the editable tag. |\n| **ariaDeleteTag** | `String` | `Delete tag {{TAG}}.` | Adds `aria-label` to the tag delete button. |\n| **ariaTagAdded** | `String` | `Tag {{TAG}} added.` | Will be pronounced to screen reader users after a new tag was created. |\n| **ariaTagUpdated** | `String` | `Tag updated to {{TAG}}.` | Will be pronounced to screen reader users after a tag was updated. |\n| **ariaTagDeleted** | `String` | `Tag {{TAG}} deleted.` | Will be pronounced to screen reader users after a tag was deleted. |\n| **ariaTagSelected** | `String` | `Tag {{TAG}} selected. Press enter to edit, delete to delete.` | Will be pronounced to screen reader users after a tag was selected (by bavigating with arrow keys). |\n| **ariaNoTagsSelected** | `String` | `No tags selected.` | Will be pronounced to screen reader users after a selected tag was unselected (by clicking on ESC key, for example). |\n| **ariaInputLabel** | `String` | `{{TAGS}} tags. Use left and right arrow keys to navigate, enter or tab to create, delete to delete tags.` | Will be pronounced to screen reader users once the input element is focused. |\n\n> Options with prefix `aria` add ARIA attributes to some elements with instructions and other valueable info for screen reader users. ARIA text is not visible.\n\n> Please keep placeholder text such as `{{TAG}}` or `{{TAGS}}` as it is. It will be replaced with proper text.\n\n## Methods\n\n| Method | Argument | Return | Description |\n| ------ | ----------- | -------- | ------ |\n| **addTag** | `String` | `undefined` | Adds a new tag. No duplicates allowed. |\n| **removeTag** | `String` | `undefined` | Removes a tag if it exists. |\n| **getTags** | - | `String[]` | Gets the tag array. |\n\n## Contributing\n\nEveryone is welcome to contribute.\n\n* If you found a bug or have an idea how to improve the component, please submit an [issue](https://github.com/accessible-components/tag-input/issues).\n* You may test our component on different devices and give us your feedback.\n\n## Ideas for the next features\n\n* Min/max tags specified vis options.\n* Custom tag validation before `addTag`\n* Tag autocomplete\n* Custome _remove tag_ icon provided via options.\n* Translate ARIA and other text and provide downloadable JSON files with translations.\n\n## License\n\n[MIT](LICENSE.md)\n","readmeFilename":"README.md"}