@atlaskit/select - npm Package Compare versions

Comparing version 16.4.0 to 16.5.0

dist/cjs/createSelect.js

@@ -22,2 +22,3 @@ "use strict";
 var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var defaultComponents = _interopRequireWildcard(require("./components"));
@@ -94,3 +95,10 @@ var _styles = _interopRequireDefault(require("./styles"));
           // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
+          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
+          placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isMulti &&
+          /*#__PURE__*/
+          // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
+          // Here we hijack the placeholder to include more info.
+          // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
+          // Ideally react-select should make use of the aria-multiselectable attribute.
+          _react.default.createElement(_visuallyHidden.default, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
         }));
@@ -97,0 +105,0 @@ }

dist/cjs/Select.js

@@ -12,3 +12,3 @@ "use strict";
 var packageName = "@atlaskit/select";
-var packageVersion = "16.4.0";
+var packageVersion = "16.5.0";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
@@ -15,0 +15,0 @@ exports.SelectWithoutAnalytics = SelectWithoutAnalytics;

dist/cjs/version.json

 {
 	"name": "@atlaskit/select",
-	"version": "16.4.0",
+	"version": "16.5.0",
 	"sideEffects": false
 }

dist/es2019/createSelect.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import isEqual from 'react-fast-compare';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import * as defaultComponents from './components';
@@ -63,3 +64,10 @@ import baseStyles from './styles';
         // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-        typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
+        typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
+        placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, isMulti &&
+        /*#__PURE__*/
+        // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
+        // Here we hijack the placeholder to include more info.
+        // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
+        // Ideally react-select should make use of the aria-multiselectable attribute.
+        React.createElement(VisuallyHidden, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
       }));
@@ -66,0 +74,0 @@ }

dist/es2019/Select.js

@@ -5,3 +5,3 @@ import Select from 'react-select';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.4.0";
+const packageVersion = "16.5.0";
 export const SelectWithoutAnalytics = createSelect(Select);
@@ -8,0 +8,0 @@ const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/es2019/version.json

 {
 	"name": "@atlaskit/select",
-	"version": "16.4.0",
+	"version": "16.5.0",
 	"sideEffects": false
 }

dist/esm/createSelect.js

@@ -19,2 +19,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import isEqual from 'react-fast-compare';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import * as defaultComponents from './components';
@@ -84,3 +85,10 @@ import baseStyles from './styles';
           // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
+          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
+          placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, isMulti &&
+          /*#__PURE__*/
+          // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
+          // Here we hijack the placeholder to include more info.
+          // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
+          // Ideally react-select should make use of the aria-multiselectable attribute.
+          React.createElement(VisuallyHidden, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
         }));
@@ -87,0 +95,0 @@ }

dist/esm/Select.js

@@ -5,3 +5,3 @@ import Select from 'react-select';
 var packageName = "@atlaskit/select";
-var packageVersion = "16.4.0";
+var packageVersion = "16.5.0";
 export var SelectWithoutAnalytics = createSelect(Select);
@@ -8,0 +8,0 @@ var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');

dist/esm/version.json

 {
 	"name": "@atlaskit/select",
-	"version": "16.4.0",
+	"version": "16.5.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/select",
-  "version": "16.4.0",
+  "version": "16.5.0",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Fixed alerts

SPDX disjunction

License

SPDX disjunction for an artifact's license information

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

509574

increased by0.51%

Lines of code

10739

increased by0.22%

Worsened metrics

Number of low license alerts

2

increased by100%

License quality

80

decreased by-20%

No dependency changes