@atlaskit/react-select 1.3.0 → 1.3.1

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/accessibility/index.js +2 -3
  3. package/dist/cjs/components/live-region.js +13 -6
  4. package/dist/es2019/accessibility/index.js +2 -3
  5. package/dist/es2019/components/live-region.js +13 -6
  6. package/dist/esm/accessibility/index.js +2 -3
  7. package/dist/esm/components/live-region.js +13 -6
  8. package/dist/types/accessibility/index.d.ts +0 -4
  9. package/dist/types-ts4.5/accessibility/index.d.ts +0 -4
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 1.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#162105](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162105)
8
+ [`4edf9a851c491`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4edf9a851c491) -
9
+ Improve the aria live for searching and reduce the live message when menu is open
10
+
3
11
  ## 1.3.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/accessibility/index.js CHANGED
@@ -53,15 +53,14 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
53
53
  selectValue = props.selectValue,
54
54
  isMulti = props.isMulti,
55
55
  isDisabled = props.isDisabled,
56
- isSelected = props.isSelected,
57
- isAppleDevice = props.isAppleDevice;
56
+ isSelected = props.isSelected;
58
57
  var getArrayIndex = function getArrayIndex(arr, item) {
59
58
  return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
60
59
  };
61
60
  if (context === 'value' && selectValue) {
62
61
  return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
63
62
  }
64
- if (context === 'menu' && isAppleDevice) {
63
+ if (context === 'menu') {
65
64
  var disabled = isDisabled ? ' disabled' : '';
66
65
  // don't announce not selected for single selection
67
66
  var notSelectedStatus = !isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' not selected';
package/dist/cjs/components/live-region.js CHANGED
@@ -57,6 +57,10 @@ var LiveRegion = function LiveRegion(props) {
57
57
  // Update aria live selected option when prop changes
58
58
  var ariaSelected = (0, _react.useMemo)(function () {
59
59
  var message = '';
60
+ if (isA11yImprovementEnabled && menuIsOpen) {
61
+ // we don't need to have selected message when the menu is open
62
+ return '';
63
+ }
60
64
  if (ariaSelection && messages.onChange) {
61
65
  var option = ariaSelection.option,
62
66
  selectedOptions = ariaSelection.options,
@@ -75,6 +79,10 @@ var LiveRegion = function LiveRegion(props) {
75
79
  // If there are multiple items from the action then return an array of labels
76
80
  var multiSelected = selectedOptions || removedValues || undefined;
77
81
  var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
82
+ if (isA11yImprovementEnabled && !_label && !labels.length) {
83
+ // return empty string if no labels provided
84
+ return '';
85
+ }
78
86
  var onChangeProps = _objectSpread({
79
87
  // multiSelected items are usually items that have already been selected
80
88
  // or set by the user as a default value so we assume they are not disabled
@@ -85,18 +93,17 @@ var LiveRegion = function LiveRegion(props) {
85
93
  message = messages.onChange(onChangeProps);
86
94
  }
87
95
  return message;
88
- }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
96
+ }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
89
97
  var prevInputValue = (0, _react.useRef)('');
90
98
  var ariaFocused = (0, _react.useMemo)(function () {
91
99
  var focusMsg = '';
92
100
  var focused = focusedOption || focusedValue;
93
101
  var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
94
- if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
95
- // only announce focus option when searching when ff is on,
102
+ if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
103
+ // only announce focus option when searching when ff is on and the input value changed
96
104
  // for safari, we will announce for all
97
105
  return '';
98
106
  }
99
- prevInputValue.current = inputValue;
100
107
  if (focused && messages.onFocus) {
101
108
  var onFocusProps = {
102
109
  focused: focused,
@@ -106,13 +113,13 @@ var LiveRegion = function LiveRegion(props) {
106
113
  options: focusableOptions,
107
114
  context: focused === focusedOption ? 'menu' : 'value',
108
115
  selectValue: selectValue,
109
- isAppleDevice: isAppleDevice,
110
116
  isMulti: isMulti
111
117
  };
112
118
  focusMsg = messages.onFocus(onFocusProps);
113
119
  }
120
+ prevInputValue.current = inputValue;
114
121
  return focusMsg;
115
- }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
122
+ }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
116
123
  var ariaResults = (0, _react.useMemo)(function () {
117
124
  var resultsMsg = '';
118
125
  if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
package/dist/es2019/accessibility/index.js CHANGED
@@ -50,14 +50,13 @@ export const defaultAriaLiveMessages = {
50
50
  selectValue,
51
51
  isMulti,
52
52
  isDisabled,
53
- isSelected,
54
- isAppleDevice
53
+ isSelected
55
54
  } = props;
56
55
  const getArrayIndex = (arr, item) => arr && arr.length ? `(${arr.indexOf(item) + 1} of ${arr.length})` : '';
57
56
  if (context === 'value' && selectValue) {
58
57
  return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
59
58
  }
60
- if (context === 'menu' && isAppleDevice) {
59
+ if (context === 'menu') {
61
60
  const disabled = isDisabled ? ' disabled' : '';
62
61
  // don't announce not selected for single selection
63
62
  const notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
package/dist/es2019/components/live-region.js CHANGED
@@ -54,6 +54,10 @@ const LiveRegion = props => {
54
54
  // Update aria live selected option when prop changes
55
55
  const ariaSelected = useMemo(() => {
56
56
  let message = '';
57
+ if (isA11yImprovementEnabled && menuIsOpen) {
58
+ // we don't need to have selected message when the menu is open
59
+ return '';
60
+ }
57
61
  if (ariaSelection && messages.onChange) {
58
62
  const {
59
63
  option,
@@ -72,6 +76,10 @@ const LiveRegion = props => {
72
76
  // If there are multiple items from the action then return an array of labels
73
77
  const multiSelected = selectedOptions || removedValues || undefined;
74
78
  const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
79
+ if (isA11yImprovementEnabled && !label && !labels.length) {
80
+ // return empty string if no labels provided
81
+ return '';
82
+ }
75
83
  const onChangeProps = {
76
84
  // multiSelected items are usually items that have already been selected
77
85
  // or set by the user as a default value so we assume they are not disabled
@@ -83,18 +91,17 @@ const LiveRegion = props => {
83
91
  message = messages.onChange(onChangeProps);
84
92
  }
85
93
  return message;
86
- }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
94
+ }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
87
95
  const prevInputValue = useRef('');
88
96
  const ariaFocused = useMemo(() => {
89
97
  let focusMsg = '';
90
98
  const focused = focusedOption || focusedValue;
91
99
  const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
92
- if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
93
- // only announce focus option when searching when ff is on,
100
+ if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
101
+ // only announce focus option when searching when ff is on and the input value changed
94
102
  // for safari, we will announce for all
95
103
  return '';
96
104
  }
97
- prevInputValue.current = inputValue;
98
105
  if (focused && messages.onFocus) {
99
106
  const onFocusProps = {
100
107
  focused,
@@ -104,13 +111,13 @@ const LiveRegion = props => {
104
111
  options: focusableOptions,
105
112
  context: focused === focusedOption ? 'menu' : 'value',
106
113
  selectValue,
107
- isAppleDevice,
108
114
  isMulti
109
115
  };
110
116
  focusMsg = messages.onFocus(onFocusProps);
111
117
  }
118
+ prevInputValue.current = inputValue;
112
119
  return focusMsg;
113
- }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
120
+ }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
114
121
  const ariaResults = useMemo(() => {
115
122
  let resultsMsg = '';
116
123
  if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
package/dist/esm/accessibility/index.js CHANGED
@@ -47,15 +47,14 @@ export var defaultAriaLiveMessages = {
47
47
  selectValue = props.selectValue,
48
48
  isMulti = props.isMulti,
49
49
  isDisabled = props.isDisabled,
50
- isSelected = props.isSelected,
51
- isAppleDevice = props.isAppleDevice;
50
+ isSelected = props.isSelected;
52
51
  var getArrayIndex = function getArrayIndex(arr, item) {
53
52
  return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
54
53
  };
55
54
  if (context === 'value' && selectValue) {
56
55
  return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
57
56
  }
58
- if (context === 'menu' && isAppleDevice) {
57
+ if (context === 'menu') {
59
58
  var disabled = isDisabled ? ' disabled' : '';
60
59
  // don't announce not selected for single selection
61
60
  var notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';
package/dist/esm/components/live-region.js CHANGED
@@ -52,6 +52,10 @@ var LiveRegion = function LiveRegion(props) {
52
52
  // Update aria live selected option when prop changes
53
53
  var ariaSelected = useMemo(function () {
54
54
  var message = '';
55
+ if (isA11yImprovementEnabled && menuIsOpen) {
56
+ // we don't need to have selected message when the menu is open
57
+ return '';
58
+ }
55
59
  if (ariaSelection && messages.onChange) {
56
60
  var option = ariaSelection.option,
57
61
  selectedOptions = ariaSelection.options,
@@ -70,6 +74,10 @@ var LiveRegion = function LiveRegion(props) {
70
74
  // If there are multiple items from the action then return an array of labels
71
75
  var multiSelected = selectedOptions || removedValues || undefined;
72
76
  var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
77
+ if (isA11yImprovementEnabled && !_label && !labels.length) {
78
+ // return empty string if no labels provided
79
+ return '';
80
+ }
73
81
  var onChangeProps = _objectSpread({
74
82
  // multiSelected items are usually items that have already been selected
75
83
  // or set by the user as a default value so we assume they are not disabled
@@ -80,18 +88,17 @@ var LiveRegion = function LiveRegion(props) {
80
88
  message = messages.onChange(onChangeProps);
81
89
  }
82
90
  return message;
83
- }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
91
+ }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
84
92
  var prevInputValue = useRef('');
85
93
  var ariaFocused = useMemo(function () {
86
94
  var focusMsg = '';
87
95
  var focused = focusedOption || focusedValue;
88
96
  var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
89
- if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
90
- // only announce focus option when searching when ff is on,
97
+ if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
98
+ // only announce focus option when searching when ff is on and the input value changed
91
99
  // for safari, we will announce for all
92
100
  return '';
93
101
  }
94
- prevInputValue.current = inputValue;
95
102
  if (focused && messages.onFocus) {
96
103
  var onFocusProps = {
97
104
  focused: focused,
@@ -101,13 +108,13 @@ var LiveRegion = function LiveRegion(props) {
101
108
  options: focusableOptions,
102
109
  context: focused === focusedOption ? 'menu' : 'value',
103
110
  selectValue: selectValue,
104
- isAppleDevice: isAppleDevice,
105
111
  isMulti: isMulti
106
112
  };
107
113
  focusMsg = messages.onFocus(onFocusProps);
108
114
  }
115
+ prevInputValue.current = inputValue;
109
116
  return focusMsg;
110
- }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
117
+ }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
111
118
  var ariaResults = useMemo(function () {
112
119
  var resultsMsg = '';
113
120
  if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
package/dist/types/accessibility/index.d.ts CHANGED
@@ -90,10 +90,6 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
90
90
  * selected option(s) of the Select
91
91
  */
92
92
  selectValue: Options<Option>;
93
- /**
94
- * Boolean indicating whether user uses Apple device
95
- */
96
- isAppleDevice: boolean;
97
93
  /**
98
94
  * Boolean value of selectProp isMulti
99
95
  */
package/dist/types-ts4.5/accessibility/index.d.ts CHANGED
@@ -90,10 +90,6 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
90
90
  * selected option(s) of the Select
91
91
  */
92
92
  selectValue: Options<Option>;
93
- /**
94
- * Boolean indicating whether user uses Apple device
95
- */
96
- isAppleDevice: boolean;
97
93
  /**
98
94
  * Boolean value of selectProp isMulti
99
95
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "description": "A forked version of react-select to only be used in atlaskit/select",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",