@pingux/astro 2.14.0-alpha.1 → 2.14.0-alpha.2

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -102,6 +102,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var toggleItems = function toggleItems(keys) {
     setItems((0, _filter["default"])(initialItems).call(initialItems, function (item) {
       var _context;
@@ -173,10 +177,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -200,6 +204,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, []);
   (0, _react.useEffect)(function () {
     if (onOpenChange) onOpenChange(isOpen);
+    if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
     var _context3, _context4;
@@ -415,10 +420,6 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       id: "emptyKeysState"
     }, "Nothing Selected");
   };
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    activeDescendant = _useState12[0],
-    setActiveDescendant = _useState12[1];
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -163,6 +163,24 @@ test('updates aria attributes on option focus', function () {
   expect(input).toHaveAttribute('aria-expanded', 'true');
   expect(input).toHaveAttribute('aria-controls', listbox.id);
 });
+test('updates aria attributes on popover closing after options were focused', function () {
+  getComponent();
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  expect(input).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(input, {
+    key: 'ArrowDown'
+  });
+  var options = _testWrapper.screen.getAllByRole('option');
+  var listbox = _testWrapper.screen.getByRole('listbox');
+  expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+  expect(input).toHaveAttribute('aria-expanded', 'true');
+  expect(input).toHaveAttribute('aria-controls', listbox.id);
+  _userEvent["default"].click(document.body);
+  expect(input).toHaveAttribute('aria-activedescendant', '');
+  expect(input).toHaveAttribute('aria-expanded', 'false');
+  expect(input).not.toHaveAttribute('aria-controls');
+});
 test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = _testWrapper.screen.getByRole('combobox');

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -90,6 +90,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var toggleItems = function toggleItems(keys) {
     setItems(_filterInstanceProperty(initialItems).call(initialItems, function (item) {
       var _context;
@@ -161,10 +165,10 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -188,6 +192,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   useEffect(function () {
     if (onOpenChange) onOpenChange(isOpen);
+    if (!isOpen) setActiveDescendant('');
   }, [isOpen]);
   var addNewBadgeFromInput = function addNewBadgeFromInput(inputValue) {
     var _context3, _context4;
@@ -403,10 +408,6 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       id: "emptyKeysState"
     }, "Nothing Selected");
   };
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    activeDescendant = _useState12[0],
-    setActiveDescendant = _useState12[1];
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -160,6 +160,24 @@ test('updates aria attributes on option focus', function () {
   expect(input).toHaveAttribute('aria-expanded', 'true');
   expect(input).toHaveAttribute('aria-controls', listbox.id);
 });
+test('updates aria attributes on popover closing after options were focused', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  fireEvent.keyDown(input, {
+    key: 'ArrowDown'
+  });
+  var options = screen.getAllByRole('option');
+  var listbox = screen.getByRole('listbox');
+  expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+  expect(input).toHaveAttribute('aria-expanded', 'true');
+  expect(input).toHaveAttribute('aria-controls', listbox.id);
+  userEvent.click(document.body);
+  expect(input).toHaveAttribute('aria-activedescendant', '');
+  expect(input).toHaveAttribute('aria-expanded', 'false');
+  expect(input).not.toHaveAttribute('aria-controls');
+});
 test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = screen.getByRole('combobox');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.14.0-alpha.1",
+  "version": "2.14.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",