react-tag-autocomplete - npm Package Compare versions

Comparing version 5.12.1 to 5.13.0

CHANGELOG.md

 # Changelog
 
+## 5.13.0
+
+- Added `ariaLabel` option ([Herdismaria](https://github.com/Herdismaria))
+
 ## 5.12.1
@@ -4,0 +8,0 @@

dist-es5/Input.js

@@ -23,3 +23,3 @@ 'use strict'
 
-var Input = (function (superclass) {
+var Input = /*@__PURE__*/(function (superclass) {
   function Input (props) {
@@ -89,2 +89,3 @@ superclass.call(this, props)
     var selectedIndex = ref.selectedIndex;
+    var ariaLabel = ref.ariaLabel;
 
@@ -94,3 +95,3 @@ return (
         React.createElement( 'input', Object.assign({},
-          inputAttributes, inputEventHandlers, { ref: function (c) { this$1.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? (listboxId + "-" + selectedIndex) : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
+          inputAttributes, inputEventHandlers, { ref: function (c) { this$1.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabel || placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? (listboxId + "-" + selectedIndex) : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: function (c) { this$1.sizer = c }, style: SIZER_STYLES }, query || placeholder)
@@ -97,0 +98,0 @@ )

dist-es5/ReactTags.js

@@ -30,3 +30,3 @@ 'use strict'
 
-var ReactTags = (function (superclass) {
+var ReactTags = /*@__PURE__*/(function (superclass) {
   function ReactTags (props) {
@@ -47,3 +47,3 @@ superclass.call(this, props)
       // <https://github.com/facebook/react/issues/13835>
-      onChange: function () {},
+      onChange: function () { },
       onBlur: this.handleBlur.bind(this),
@@ -212,4 +212,6 @@ onFocus: this.handleFocus.bind(this),
         React.createElement( 'div', { className: this.state.classNames.search },
-          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: function (c) { this$1.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
-          React.createElement( Suggestions, Object.assign({}, this.state, { ref: function (c) { this$1.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
+          React.createElement( Input, Object.assign({},
+            this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: function (c) { this$1.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder, ariaLabel: this.props.ariaLabel })),
+          React.createElement( Suggestions, Object.assign({},
+            this.state, { ref: function (c) { this$1.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
         )
@@ -246,2 +248,3 @@ )
   placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   noSuggestionsText: PropTypes.string,
@@ -248,0 +251,0 @@ suggestions: PropTypes.arrayOf(PropTypes.object),

dist-es5/Suggestions.js

@@ -35,3 +35,3 @@ 'use strict'
 
-var Suggestions = (function (superclass) {
+var Suggestions = /*@__PURE__*/(function (superclass) {
   function Suggestions (props) {
@@ -38,0 +38,0 @@ superclass.call(this, props)

dist-es6/Input.js

@@ -69,3 +69,3 @@ 'use strict'
   render () {
-    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex, ariaLabel } = this.props
 
@@ -75,3 +75,3 @@ return (
         React.createElement( 'input', Object.assign({},
-          inputAttributes, inputEventHandlers, { ref: (c) => { this.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
+          inputAttributes, inputEventHandlers, { ref: (c) => { this.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': ariaLabel || placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: (c) => { this.sizer = c }, style: SIZER_STYLES }, query || placeholder)
@@ -78,0 +78,0 @@ )

dist-es6/ReactTags.js

@@ -46,3 +46,3 @@ 'use strict'
       // <https://github.com/facebook/react/issues/13835>
-      onChange: () => {},
+      onChange: () => { },
       onBlur: this.handleBlur.bind(this),
@@ -199,4 +199,6 @@ onFocus: this.handleFocus.bind(this),
         React.createElement( 'div', { className: this.state.classNames.search },
-          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
-          React.createElement( Suggestions, Object.assign({}, this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
+          React.createElement( Input, Object.assign({},
+            this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder, ariaLabel: this.props.ariaLabel })),
+          React.createElement( Suggestions, Object.assign({},
+            this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
         )
@@ -231,2 +233,3 @@ )
   placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   noSuggestionsText: PropTypes.string,
@@ -233,0 +236,0 @@ suggestions: PropTypes.arrayOf(PropTypes.object),

lib/Input.js

@@ -69,3 +69,3 @@ 'use strict'
   render () {
-    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex, ariaLabel } = this.props
 
@@ -82,7 +82,8 @@ return (
           aria-autocomplete='list'
-          aria-label={placeholder}
+          aria-label={ariaLabel || placeholder}
           aria-owns={listboxId}
           aria-activedescendant={selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null}
           aria-expanded={expandable}
-          style={{ width: this.state.inputWidth }} />
+          style={{ width: this.state.inputWidth }}
+        />
         <div ref={(c) => { this.sizer = c }} style={SIZER_STYLES}>{query || placeholder}</div>
@@ -89,0 +90,0 @@ </div>

lib/ReactTags.js

@@ -46,3 +46,3 @@ 'use strict'
       // <https://github.com/facebook/react/issues/13835>
-      onChange: () => {},
+      onChange: () => { },
       onBlur: this.handleBlur.bind(this),
@@ -188,3 +188,4 @@ onFocus: this.handleFocus.bind(this),
         classNames={this.state.classNames}
-        onDelete={this.deleteTag.bind(this, i)} />
+        onDelete={this.deleteTag.bind(this, i)}
+      />
     ))
@@ -203,3 +204,4 @@
         <div className={this.state.classNames.search}>
-          <Input {...this.state}
+          <Input
+            {...this.state}
             inputAttributes={this.props.inputAttributes}
@@ -212,4 +214,7 @@ inputEventHandlers={this.inputEventHandlers}
             expandable={expandable}
-            placeholder={this.props.placeholder} />
-          <Suggestions {...this.state}
+            placeholder={this.props.placeholder}
+            ariaLabel={this.props.ariaLabel}
+          />
+          <Suggestions
+            {...this.state}
             ref={(c) => { this.suggestions = c }}
@@ -222,3 +227,4 @@ listboxId={listboxId}
             addTag={this.addTag.bind(this)}
-            maxSuggestionsLength={this.props.maxSuggestionsLength} />
+            maxSuggestionsLength={this.props.maxSuggestionsLength}
+          />
         </div>
@@ -253,2 +259,3 @@ </div>
   placeholder: PropTypes.string,
+  ariaLabel: PropTypes.string,
   noSuggestionsText: PropTypes.string,
@@ -255,0 +262,0 @@ suggestions: PropTypes.arrayOf(PropTypes.object),

lib/Suggestions.js

@@ -80,3 +80,4 @@ 'use strict'
           aria-disabled={item.disabled === true}
-          onMouseDown={this.handleMouseDown.bind(this, item)}>
+          onMouseDown={this.handleMouseDown.bind(this, item)}
+        >
           {item.disableMarkIt ? item.name
@@ -83,0 +84,0 @@ : <span dangerouslySetInnerHTML={markIt(item.name, this.props.query, item.markInput)} />}

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "5.12.1",
+  "version": "5.13.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -36,3 +36,4 @@ "main": "dist-es5/ReactTags.js",
     "Serhiy Yefremenko",
-    "Paul Shannon"
+    "Paul Shannon",
+    "Herdis Maria"
   ],
@@ -47,17 +48,18 @@ "license": "MIT",
   "devDependencies": {
-    "buble": "^0.17.0",
-    "buble-loader": "^0.4.1",
+    "buble": "^0.20.0",
+    "buble-loader": "^0.5.0",
     "coveralls": "^3.0.0",
-    "jasmine": "^3.3.0",
-    "jsdom": "^14.0.0",
-    "keycode": "^2.1.2",
-    "nyc": "^13.3.0",
+    "jasmine": "^3.5.0",
+    "jsdom": "^16.2.0",
+    "keycode": "^2.2.0",
+    "nyc": "^15.0.0",
     "prop-types": "^15.7.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "sinon": "^7.3.0",
-    "standard": "^12.0.1",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "sinon": "^9.0.0",
+    "standard": "^14.3.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.10.0"
   }
 }

README.md

@@ -83,2 +83,3 @@ # React Tag Autocomplete
 - [`placeholder`](#placeholder-optional)
+- [`ariaLabel`](#ariaLabel-optional)
 - [`noSuggestionsText`](#noSuggestionsText-optional)
@@ -139,2 +140,6 @@ - [`autofocus`](#autofocus-optional)
 
+#### ariaLabel (optional)
+
+The aria-label string for the input. Defaults to placeholder string.
+
 #### noSuggestionsText (optional)
@@ -141,0 +146,0 @@

No alert changes

Improved metrics

Total package byte prevSize

90913

increased by62.04%

Number of package files

24

increased by50%

Lines of code

1159

increased by1.4%

Number of lines in readme file

316

increased by1.61%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes