@atlaskit/select 20.0.7 → 20.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/PopupSelect/PopupSelect.js +8 -3
  3. package/dist/cjs/Select.js +1 -1
  4. package/dist/es2019/PopupSelect/PopupSelect.js +9 -3
  5. package/dist/es2019/Select.js +1 -1
  6. package/dist/esm/PopupSelect/PopupSelect.js +9 -3
  7. package/dist/esm/Select.js +1 -1
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/select
2
2
 
3
+ ## 20.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#131835](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131835)
8
+ [`11b3a9f6a407e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b3a9f6a407e) -
9
+ [Popup Select] Improve assistive technology support by reducing reliance on live regions.
10
+ - Updated dependencies
11
+
3
12
  ## 20.0.7
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/PopupSelect/PopupSelect.js CHANGED
@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
34
34
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
35
35
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
36
36
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
37
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
37
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
38
38
  /**
39
39
  * Are we rendering on the client or server?
40
40
  */
@@ -355,6 +355,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
355
355
  if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
356
356
  var _this$selectRef2;
357
357
  if (providedAriaLabel) {
358
+ // I might want to use a comma instead of a period here, when the feature flag is removed.
358
359
  ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
359
360
  }
360
361
  (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
@@ -369,7 +370,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
369
370
  return option === focused;
370
371
  })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
371
372
  var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
372
- var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName) : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
373
+ var ariaLabelText = (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
373
374
  // Option LABEL focused, 1 of 8. 8 results available.
374
375
  // Use Up and Down to choose options, press Enter to select the currently focused option,
375
376
  // press Escape to exit the menu.
@@ -389,7 +390,11 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
389
390
  ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
390
391
  ariaLiveMessage = ariaLabelText;
391
392
  }
392
- updateInputAriaLabel(ariaLabelText);
393
+ // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
394
+ // will include the first option in the initial announcement.
395
+ if (!(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || (0, _deviceCheck.isSafari)() && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
396
+ updateInputAriaLabel(ariaLabelText);
397
+ }
393
398
  return ariaLiveMessage;
394
399
  }
395
400
  return ariaLiveMessage;
package/dist/cjs/Select.js CHANGED
@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
11
11
  /* eslint-disable @repo/internal/react/require-jsdoc */
12
12
 
13
13
  var packageName = "@atlaskit/select";
14
- var packageVersion = "20.0.7";
14
+ var packageVersion = "20.0.8";
15
15
  var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
16
16
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
17
17
  var Select = (0, _analyticsNext.withAnalyticsContext)({
package/dist/es2019/PopupSelect/PopupSelect.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
3
4
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
4
5
  import React, { PureComponent } from 'react';
5
6
  import { bind } from 'bind-event-listener';
@@ -7,7 +8,7 @@ import { createPortal } from 'react-dom';
7
8
  import FocusLock from 'react-focus-lock';
8
9
  import { Manager, Popper, Reference } from 'react-popper';
9
10
  import { shallowEqualObjects } from 'shallow-equal';
10
- import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
11
+ import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
11
12
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
12
13
  import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { mergeStyles } from '@atlaskit/react-select';
@@ -333,6 +334,7 @@ export default class PopupSelect extends PureComponent {
333
334
  if ((_this$selectRef = this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef$selec3 = _this$selectRef.select) !== null && _this$selectRef$selec3 !== void 0 && _this$selectRef$selec3.inputRef) {
334
335
  var _this$selectRef2, _this$selectRef2$sele;
335
336
  if (providedAriaLabel) {
337
+ // I might want to use a comma instead of a period here, when the feature flag is removed.
336
338
  ariaLabelText = `${providedAriaLabel}. ${ariaLabelText}`;
337
339
  }
338
340
  (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select.inputRef) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.setAttribute('aria-label', ariaLabelText);
@@ -347,7 +349,7 @@ export default class PopupSelect extends PureComponent {
347
349
  const totalLength = options === null || options === void 0 ? void 0 : options.length;
348
350
  const optionIndex = (_options$findIndex = options === null || options === void 0 ? void 0 : options.findIndex(option => option === focused)) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
349
351
  const optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
350
- const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
352
+ const ariaLabelText = fg('design_system_select-a11y-improvement') ? `${optionName}, (${optionIndex + 1} of ${totalLength})` : `Option ${optionName} focused, ${optionIndex + 1} of ${totalLength}.
351
353
  ${totalLength} results available.
352
354
  ${ariaLabelSuffix}
353
355
  `;
@@ -370,7 +372,11 @@ export default class PopupSelect extends PureComponent {
370
372
  ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
371
373
  ariaLiveMessage = ariaLabelText;
372
374
  }
373
- updateInputAriaLabel(ariaLabelText);
375
+ // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
376
+ // will include the first option in the initial announcement.
377
+ if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
378
+ updateInputAriaLabel(ariaLabelText);
379
+ }
374
380
  return ariaLiveMessage;
375
381
  }
376
382
  return ariaLiveMessage;
package/dist/es2019/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  const packageName = "@atlaskit/select";
6
- const packageVersion = "20.0.7";
6
+ const packageVersion = "20.0.8";
7
7
  export const SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  const Select = withAnalyticsContext({
package/dist/esm/PopupSelect/PopupSelect.js CHANGED
@@ -11,6 +11,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
11
11
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
12
12
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
13
13
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
14
+ /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
14
15
  // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
15
16
  import React, { PureComponent } from 'react';
16
17
  import { bind } from 'bind-event-listener';
@@ -18,7 +19,7 @@ import { createPortal } from 'react-dom';
18
19
  import FocusLock from 'react-focus-lock';
19
20
  import { Manager, Popper, Reference } from 'react-popper';
20
21
  import { shallowEqualObjects } from 'shallow-equal';
21
- import { isAppleDevice } from '@atlaskit/ds-lib/device-check';
22
+ import { isAppleDevice, isSafari } from '@atlaskit/ds-lib/device-check';
22
23
  import { IdProvider } from '@atlaskit/ds-lib/use-id';
23
24
  import { fg } from '@atlaskit/platform-feature-flags';
24
25
  import { mergeStyles } from '@atlaskit/react-select';
@@ -346,6 +347,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
346
347
  if ((_this$selectRef = _this.selectRef) !== null && _this$selectRef !== void 0 && (_this$selectRef = _this$selectRef.select) !== null && _this$selectRef !== void 0 && _this$selectRef.inputRef) {
347
348
  var _this$selectRef2;
348
349
  if (providedAriaLabel) {
350
+ // I might want to use a comma instead of a period here, when the feature flag is removed.
349
351
  ariaLabelText = "".concat(providedAriaLabel, ". ").concat(ariaLabelText);
350
352
  }
351
353
  (_this$selectRef2 = _this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select.inputRef) === null || _this$selectRef2 === void 0 || _this$selectRef2.setAttribute('aria-label', ariaLabelText);
@@ -360,7 +362,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
360
362
  return option === focused;
361
363
  })) !== null && _options$findIndex !== void 0 ? _options$findIndex : 0;
362
364
  var optionName = typeof (props === null || props === void 0 ? void 0 : props.getOptionLabel) === 'function' ? props.getOptionLabel(focused) : focused.label;
363
- var ariaLabelText = fg('design_system_select-a11y-improvement') ? "".concat(optionName) : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
365
+ var ariaLabelText = fg('design_system_select-a11y-improvement') ? "".concat(optionName, ", (").concat(optionIndex + 1, " of ").concat(totalLength, ")") : "Option ".concat(optionName, " focused, ").concat(optionIndex + 1, " of ").concat(totalLength, ".\n\t\t\t").concat(totalLength, " results available.\n\t\t\t").concat(ariaLabelSuffix, "\n\t\t\t");
364
366
  // Option LABEL focused, 1 of 8. 8 results available.
365
367
  // Use Up and Down to choose options, press Enter to select the currently focused option,
366
368
  // press Escape to exit the menu.
@@ -380,7 +382,11 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
380
382
  ariaLabelText = generateNoGroupsAriaText(onFocusProps, ariaLabelSuffix);
381
383
  ariaLiveMessage = ariaLabelText;
382
384
  }
383
- updateInputAriaLabel(ariaLabelText);
385
+ // Safari still does not announce the first option when menu is opened, so forcing a change to the input label
386
+ // will include the first option in the initial announcement.
387
+ if (!fg('design_system_select-a11y-improvement') || isSafari() && fg('design_system_select-a11y-improvement')) {
388
+ updateInputAriaLabel(ariaLabelText);
389
+ }
384
390
  return ariaLiveMessage;
385
391
  }
386
392
  return ariaLiveMessage;
package/dist/esm/Select.js CHANGED
@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
3
3
  import AsyncSelect from '@atlaskit/react-select/async';
4
4
  import createSelect from './createSelect';
5
5
  var packageName = "@atlaskit/select";
6
- var packageVersion = "20.0.7";
6
+ var packageVersion = "20.0.8";
7
7
  export var SelectWithoutAnalytics = createSelect(AsyncSelect);
8
8
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
9
9
  var Select = withAnalyticsContext({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/select",
3
- "version": "20.0.7",
3
+ "version": "20.0.8",
4
4
  "description": "Select allows users to make a single selection or multiple selections from a list of options.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
43
43
  "dependencies": {
44
44
  "@atlaskit/analytics-next": "^11.0.0",
45
45
  "@atlaskit/ds-lib": "^4.0.0",
46
- "@atlaskit/icon": "^25.0.0",
46
+ "@atlaskit/icon": "^25.1.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/primitives": "^14.2.0",
49
49
  "@atlaskit/react-select": "^2.0.0",
@@ -74,7 +74,7 @@
74
74
  "@atlaskit/form": "^12.0.0",
75
75
  "@atlaskit/link": "^3.0.0",
76
76
  "@atlaskit/logo": "^16.0.0",
77
- "@atlaskit/modal-dialog": "^13.4.0",
77
+ "@atlaskit/modal-dialog": "^14.0.0",
78
78
  "@atlaskit/radio": "^8.0.0",
79
79
  "@atlaskit/section-message": "^8.2.0",
80
80
  "@atlaskit/ssr": "^0.4.0",
@@ -82,7 +82,7 @@
82
82
  "@testing-library/user-event": "^14.4.3",
83
83
  "ast-types": "^0.13.3",
84
84
  "jest-in-case": "^1.0.2",
85
- "jscodeshift": "^0.16.1",
85
+ "jscodeshift": "^17.0.0",
86
86
  "react-dom": "^18.2.0",
87
87
  "react-select-event": "^5.5.0",
88
88
  "typescript": "~5.4.2"