@atlaskit/react-select - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

 # @atlaskit/react-select
 
+## 1.3.1
+
+### Patch Changes
+
+- [#162105](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162105)
+  [`4edf9a851c491`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4edf9a851c491) -
+  Improve the aria live for searching and reduce the live message when menu is open
+
 ## 1.3.0
@@ -4,0 +12,0 @@

dist/cjs/accessibility/index.js

@@ -56,4 +56,3 @@ "use strict";
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -65,3 +64,3 @@ return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
@@ -68,0 +67,0 @@ // don't announce not selected for single selection

dist/cjs/components/live-region.js

@@ -60,2 +60,6 @@ "use strict";
     var message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
@@ -79,2 +83,6 @@ var option = ariaSelection.option,
       var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !_label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       var onChangeProps = _objectSpread({
@@ -90,3 +98,3 @@ // multiSelected items are usually items that have already been selected
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   var prevInputValue = (0, _react.useRef)('');
@@ -97,8 +105,7 @@ var ariaFocused = (0, _react.useMemo)(function () {
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
@@ -113,3 +120,2 @@ var onFocusProps = {
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice,
         isMulti: isMulti
@@ -119,4 +125,5 @@ };
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   var ariaResults = (0, _react.useMemo)(function () {
@@ -123,0 +130,0 @@ var resultsMsg = '';

dist/es2019/accessibility/index.js

@@ -53,4 +53,3 @@ import { fg } from '@atlaskit/platform-feature-flags';
       isDisabled,
-      isSelected,
-      isAppleDevice
+      isSelected
     } = props;
@@ -61,3 +60,3 @@ const getArrayIndex = (arr, item) => arr && arr.length ? `(${arr.indexOf(item) + 1} of ${arr.length})` : '';
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       const disabled = isDisabled ? ' disabled' : '';
@@ -64,0 +63,0 @@ // don't announce not selected for single selection

dist/es2019/components/live-region.js

@@ -57,2 +57,6 @@ /**
     let message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
@@ -76,2 +80,6 @@ const {
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       const onChangeProps = {
@@ -88,3 +96,3 @@ // multiSelected items are usually items that have already been selected
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   const prevInputValue = useRef('');
@@ -95,8 +103,7 @@ const ariaFocused = useMemo(() => {
     const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
@@ -111,3 +118,2 @@ const onFocusProps = {
         selectValue,
-        isAppleDevice,
         isMulti
@@ -117,4 +123,5 @@ };
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   const ariaResults = useMemo(() => {
@@ -121,0 +128,0 @@ let resultsMsg = '';

dist/esm/accessibility/index.js

@@ -50,4 +50,3 @@ import { fg } from '@atlaskit/platform-feature-flags';
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -59,3 +58,3 @@ return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
@@ -62,0 +61,0 @@ // don't announce not selected for single selection

dist/esm/components/live-region.js

@@ -55,2 +55,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     var message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
@@ -74,2 +78,6 @@ var option = ariaSelection.option,
       var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !_label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       var onChangeProps = _objectSpread({
@@ -85,3 +93,3 @@ // multiSelected items are usually items that have already been selected
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   var prevInputValue = useRef('');
@@ -92,8 +100,7 @@ var ariaFocused = useMemo(function () {
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
@@ -108,3 +115,2 @@ var onFocusProps = {
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice,
         isMulti: isMulti
@@ -114,4 +120,5 @@ };
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   var ariaResults = useMemo(function () {
@@ -118,0 +125,0 @@ var resultsMsg = '';

dist/types-ts4.5/accessibility/index.d.ts

@@ -94,6 +94,2 @@ import type { AriaAttributes } from 'react';
     /**
-     * Boolean indicating whether user uses Apple device
-     */
-    isAppleDevice: boolean;
-    /**
      * Boolean value of selectProp isMulti
@@ -100,0 +96,0 @@ */

dist/types/accessibility/index.d.ts

@@ -94,6 +94,2 @@ import type { AriaAttributes } from 'react';
     /**
-     * Boolean indicating whether user uses Apple device
-     */
-    isAppleDevice: boolean;
-    /**
      * Boolean value of selectProp isMulti
@@ -100,0 +96,0 @@ */

package.json

 {
 	"name": "@atlaskit/react-select",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
@@ -5,0 +5,0 @@ "author": "Atlassian Pty Ltd",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

772008

increased by0.11%

Lines of code

18512

increased by0.05%

No dependency changes