react-tag-autocomplete - npm Package Compare versions

Comparing version 6.0.0-beta.4 to 6.0.0-beta.5

CHANGELOG.md

@@ -11,2 +11,3 @@ # Changelog
 - Added `removeButtonText` option to configure the selected tag remove button title attribute
+- Refactored `ariaLabel` option to `ariaLabelText` to match other text options
 - Refactored `placeholder` option to `placeholderText` to match other text options
@@ -24,2 +25,6 @@ - Refactored keyboard event handlers to use `KeyboardEvent.key`
 
+## 5.13.0
+
+- Added `ariaLabel` option ([Herdismaria](https://github.com/Herdismaria))
+
 ## 5.12.1
@@ -26,0 +31,0 @@

dist/ReactTags.cjs.js

@@ -77,3 +77,3 @@ 'use strict';
   render () {
-    const { id, query, placeholderText, expanded, classNames, inputAttributes, inputEventHandlers, index } = this.props;
+    const { id, query, ariaLabelText, placeholderText, expanded, classNames, inputAttributes, inputEventHandlers, index } = this.props;
 
@@ -83,3 +83,3 @@ return (
         React.createElement( 'input', Object.assign({},
-          inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? `${id}-${index}` : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
+          inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabelText || placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? `${id}-${index}` : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: this.sizer, style: SIZER_STYLES }, query || placeholderText)
@@ -381,3 +381,3 @@ )
           React.createElement( Input, Object.assign({},
-            this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText })),
+            this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText, ariaLabelText: this.props.ariaLabelText })),
           React.createElement( Suggestions, Object.assign({},
@@ -416,2 +416,3 @@ this.state, { id: this.props.id, ref: this.suggestions, classNames: this.props.classNames, expanded: expanded, addTag: this.addTag.bind(this), suggestionComponent: this.props.suggestionComponent }))
   placeholderText: PropTypes.string,
+  ariaLabelText: PropTypes.string,
   removeButtonText: PropTypes.string,
@@ -418,0 +419,0 @@ noSuggestionsText: PropTypes.string,

dist/ReactTags.esm.js

@@ -73,3 +73,3 @@ import React from 'react';
   render () {
-    const { id, query, placeholderText, expanded, classNames, inputAttributes, inputEventHandlers, index } = this.props;
+    const { id, query, ariaLabelText, placeholderText, expanded, classNames, inputAttributes, inputEventHandlers, index } = this.props;
 
@@ -79,3 +79,3 @@ return (
         React.createElement( 'input', Object.assign({},
-          inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? `${id}-${index}` : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
+          inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabelText || placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? `${id}-${index}` : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: this.sizer, style: SIZER_STYLES }, query || placeholderText)
@@ -377,3 +377,3 @@ )
           React.createElement( Input, Object.assign({},
-            this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText })),
+            this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText, ariaLabelText: this.props.ariaLabelText })),
           React.createElement( Suggestions, Object.assign({},
@@ -412,2 +412,3 @@ this.state, { id: this.props.id, ref: this.suggestions, classNames: this.props.classNames, expanded: expanded, addTag: this.addTag.bind(this), suggestionComponent: this.props.suggestionComponent }))
   placeholderText: PropTypes.string,
+  ariaLabelText: PropTypes.string,
   removeButtonText: PropTypes.string,
@@ -414,0 +415,0 @@ noSuggestionsText: PropTypes.string,

dist/ReactTags.umd.js

@@ -91,2 +91,3 @@ (function (global, factory) {
       var query = ref.query;
+      var ariaLabelText = ref.ariaLabelText;
       var placeholderText = ref.placeholderText;
@@ -102,3 +103,3 @@ var expanded = ref.expanded;
           React.createElement( 'input', Object.assign({},
-            inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? (id + "-" + index) : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
+            inputAttributes, inputEventHandlers, { ref: this.input, value: query, placeholder: placeholderText, className: classNames.searchInput, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabelText || placeholderText, 'aria-owns': id, 'aria-activedescendant': index > -1 ? (id + "-" + index) : null, 'aria-expanded': expanded, style: { width: this.state.inputWidth } })),
           React.createElement( 'div', { ref: this.sizer, style: SIZER_STYLES }, query || placeholderText)
@@ -429,3 +430,3 @@ )
             React.createElement( Input, Object.assign({},
-              this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText })),
+              this.state, { id: this.props.id, ref: this.input, classNames: this.props.classNames, inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, autoresize: this.props.autoresize, expanded: expanded, placeholderText: this.props.placeholderText, ariaLabelText: this.props.ariaLabelText })),
             React.createElement( Suggestions, Object.assign({},
@@ -466,2 +467,3 @@ this.state, { id: this.props.id, ref: this.suggestions, classNames: this.props.classNames, expanded: expanded, addTag: this.addTag.bind(this), suggestionComponent: this.props.suggestionComponent }))
     placeholderText: PropTypes.string,
+    ariaLabelText: PropTypes.string,
     removeButtonText: PropTypes.string,
@@ -468,0 +470,0 @@ noSuggestionsText: PropTypes.string,

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -37,3 +37,4 @@ "main": "dist/ReactTags.cjs.js",
     "Serhiy Yefremenko",
-    "Paul Shannon"
+    "Paul Shannon",
+    "Herdis Maria"
   ],
@@ -48,22 +49,22 @@ "license": "MIT",
   "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.0",
+    "@rollup/plugin-replace": "^2.3.0",
     "coveralls": "^3.0.0",
-    "jasmine": "^3.3.0",
-    "jsdom": "^15.1.0",
-    "nyc": "^14.1.0",
+    "jasmine": "^3.5.0",
+    "jsdom": "^16.1.0",
+    "nyc": "^15.0.0",
     "prop-types": "^15.7.0",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
-    "rollup": "^1.22.0",
-    "rollup-plugin-buble": "^0.19.6",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.1.0",
+    "rollup": "^1.30.0",
     "rollup-plugin-serve": "^1.0.0",
-    "rollup-plugin-uglify": "^6.0.0",
-    "sinon": "^7.3.0",
-    "standard": "^12.0.0"
+    "rollup-plugin-terser": "^5.2.0",
+    "sinon": "^8.1.0",
+    "standard": "^14.3.0"
   },
   "engines": {
-    "node": ">= 8.15.0"
+    "node": ">= 10.0.0"
   }
 }

README.md

@@ -85,2 +85,3 @@ # React Tag Autocomplete
 - [`placeholderText`](#placeholdertext-optional)
+- [`ariaLabelText`](#arialabeltext-optional)
 - [`removeButtonText`](#removeButtontext-optional)
@@ -143,2 +144,6 @@ - [`noSuggestionsText`](#noSuggestionsText-optional)
 
+#### ariaLabelText (optional)
+
+The aria-label string for the input. Defaults to placeholder string.
+
 #### removeButtonText (optional)
@@ -302,4 +307,5 @@
 - The `placeholder` option has been renamed `placeholderText`
+- The `ariaLabel` option has been renamed `ariaLabelText`
 - The `delimiterChars` option has been removed, use the `delimiters` option instead.
 - The `clearInputOnDelete` option has been removed and is now the default behaviour
 - The `autofocus` option has been removed.

No alert changes

Improved metrics

Total package byte prevSize

59718

increased by1.27%

Lines of code

1147

increased by0.35%

Number of lines in readme file

309

increased by1.98%

No dependency changes