@atlaskit/react-select 2.0.6 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 2.0.7
+
+### Patch Changes
+
+- [#131835](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131835)
+  [`11b3a9f6a407e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b3a9f6a407e) -
+  [Popup Select] Improve assistive technology support by reducing reliance on live regions.
+
 ## 2.0.6
 
 ### Patch Changes

package/dist/cjs/components/live-region.js

@@ -127,17 +127,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = (0, _react.useMemo)(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        var resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue: inputValue,
-          resultsMessage: resultsMessage
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -164,9 +160,9 @@ var LiveRegion = function LiveRegion(props) {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-selection"
-  }, ariaSelected), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+  }, ariaSelected), (0, _react2.jsx)("span", {
     id: "aria-results"
-  }, ariaResults), (0, _react2.jsx)("span", {
+  }, ariaResults), !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     id: "aria-focused"
   }, ariaFocused), (0, _react2.jsx)("span", {
     id: "aria-guidance"

package/dist/cjs/select.js

@@ -829,7 +829,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = (0, _utils.cleanValue)(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1614,6 +1614,26 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/_react.default.createElement(_menu.MenuPlacer, (0, _extends2.default)({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1636,7 +1656,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1648,10 +1667,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

package/dist/es2019/components/live-region.js

@@ -123,17 +123,13 @@ const LiveRegion = props => {
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      const shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        const resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue,
-          resultsMessage
-        });
-      }
+      const resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue,
+        resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -160,9 +156,9 @@ const LiveRegion = props => {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   const ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
-  }, ariaSelected), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+  }, ariaSelected), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-guidance"

package/dist/es2019/select.js

@@ -805,7 +805,7 @@ export default class Select extends Component {
     this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       const focusableOptionsWithIds = this.getFocusableOptionsWithIds();
       const focusableOptions = this.buildFocusableOptions();
       const optionIndex = focusableOptions.indexOf(this.state.selectValue[0]);
@@ -1647,6 +1647,26 @@ export default class Select extends Component {
       menuPosition,
       menuShouldScrollIntoView
     };
+    const calculateListboxLabel = () => {
+      var _this$inputRef;
+      // First in name calculation, overwrites aria-label
+      if (labelId) {
+        return {
+          'aria-labelledby': labelId
+        };
+      }
+      // Second in name calcuation, overwrites everything else except aria-labelledby
+      if (label) {
+        return {
+          'aria-label': label
+        };
+      }
+      // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+      // will most likely not have an accessible name
+      return {
+        'aria-labelledby': ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')
+      };
+    };
     const menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), ({
       ref,
       placerProps: {
@@ -1670,31 +1690,25 @@ export default class Select extends Component {
       onTopArrive: onMenuScrollToTop,
       onBottomArrive: onMenuScrollToBottom,
       lockEnabled: menuShouldBlockScroll
-    }, scrollTargetRef => {
-      var _this$inputRef;
-      return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
-        innerRef: instance => {
-          this.getMenuListRef(instance);
-          scrollTargetRef(instance);
-        },
-        innerProps: {
-          role: 'listbox',
-          'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
-          id: this.getElementId('listbox'),
-          ...(testId && {
-            'data-testid': `${testId}-select--listbox`
-          }),
-          // add aditional label on listbox when ff is on
-          ...(fg('design_system_select-a11y-improvement') && {
-            'aria-label': label,
-            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')}`
-          })
-        },
-        isLoading: isLoading,
-        maxHeight: maxHeight,
-        focusedOption: focusedOption
-      }), menuUI);
-    })));
+    }, scrollTargetRef => /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+      innerRef: instance => {
+        this.getMenuListRef(instance);
+        scrollTargetRef(instance);
+      },
+      innerProps: {
+        role: 'listbox',
+        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+        id: this.getElementId('listbox'),
+        ...(testId && {
+          'data-testid': `${testId}-select--listbox`
+        }),
+        // add aditional label on listbox when ff is on
+        ...(fg('design_system_select-a11y-improvement') && calculateListboxLabel())
+      },
+      isLoading: isLoading,
+      maxHeight: maxHeight,
+      focusedOption: focusedOption
+    }), menuUI))));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked

package/dist/esm/components/live-region.js

@@ -120,17 +120,13 @@ var LiveRegion = function LiveRegion(props) {
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
-      var shouldAnnounceAvailableResults = !focusableOptions.length;
-      if (shouldAnnounceAvailableResults && fg('design_system_select-a11y-improvement') || !fg('design_system_select-a11y-improvement')) {
-        // only announce no option results when ff is on
-        var resultsMessage = screenReaderStatus({
-          count: focusableOptions.length
-        });
-        resultsMsg = messages.onFilter({
-          inputValue: inputValue,
-          resultsMessage: resultsMessage
-        });
-      }
+      var resultsMessage = screenReaderStatus({
+        count: focusableOptions.length
+      });
+      resultsMsg = messages.onFilter({
+        inputValue: inputValue,
+        resultsMessage: resultsMessage
+      });
     }
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
@@ -157,9 +153,9 @@ var LiveRegion = function LiveRegion(props) {
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
   var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
-  }, ariaSelected), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
+  }, ariaSelected), jsx("span", {
     id: "aria-results"
-  }, ariaResults), jsx("span", {
+  }, ariaResults), !fg('design_system_select-a11y-improvement') && jsx(React.Fragment, null, jsx("span", {
     id: "aria-focused"
   }, ariaFocused), jsx("span", {
     id: "aria-guidance"

package/dist/esm/select.js

@@ -820,7 +820,7 @@ var Select = /*#__PURE__*/function (_Component) {
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
     _this.state.selectValue = cleanValue(_props.value);
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
-    if (_props.menuIsOpen && _this.state.selectValue.length) {
+    if (_props.menuIsOpen) {
       var focusableOptionsWithIds = _this.getFocusableOptionsWithIds();
       var focusableOptions = _this.buildFocusableOptions();
       var optionIndex = focusableOptions.indexOf(_this.state.selectValue[0]);
@@ -1605,6 +1605,26 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
+      var calculateListboxLabel = function calculateListboxLabel() {
+        var _this4$inputRef;
+        // First in name calculation, overwrites aria-label
+        if (labelId) {
+          return {
+            'aria-labelledby': labelId
+          };
+        }
+        // Second in name calcuation, overwrites everything else except aria-labelledby
+        if (label) {
+          return {
+            'aria-label': label
+          };
+        }
+        // Fallback if no label or labelId is provided, might catch label via <label for> otherwise
+        // will most likely not have an accessible name
+        return {
+          'aria-labelledby': ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input')
+        };
+      };
       var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
@@ -1627,7 +1647,6 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          var _this4$inputRef;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1639,10 +1658,7 @@ var Select = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, testId && {
               'data-testid': "".concat(testId, "-select--listbox")
-            }), fg('design_system_select-a11y-improvement') && {
-              'aria-label': label,
-              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'))
-            }),
+            }), fg('design_system_select-a11y-improvement') && calculateListboxLabel()),
             isLoading: isLoading,
             maxHeight: maxHeight,
             focusedOption: focusedOption

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.0.6",
+	"version": "2.0.7",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,9 +30,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",