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

package/lib/cjs/components/ListBox/Option.js

@@ -22,6 +22,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _listbox = require("@react-aria/listbox");
 var _CircleSmallIcon = _interopRequireDefault(require("mdi-react/CircleSmallIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -74,6 +75,12 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
+  var updateActiveDescendant = (0, _MultivaluesContext.useMultivaluesContext)();
+  (0, _react.useEffect)(function () {
+    if (isFocused && updateActiveDescendant) {
+      updateActiveDescendant(optionProps.id);
+    }
+  }, [isFocused, updateActiveDescendant]);
 
   /* Related to UIP-4992
    * Need to remove these properties to avoid errors in the console on the external app.

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

@@ -34,6 +34,7 @@ var _list = require("@react-stately/list");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
+var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -56,7 +57,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Stately.
  */
 var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context7;
+  var _context7, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -372,8 +373,14 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   })), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
+  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,
+      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
       role: 'combobox'
     },
@@ -395,7 +402,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     status: status,
     isRestrictiveMultivalues: !hasCustomValue
   });
-  return (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
+    value: setActiveDescendant
+  }, (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       setIsOpen(false);
       if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
@@ -430,7 +439,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     placement: placement,
     ref: popoverRef,
     style: style
-  }, listbox));
+  }, listbox)));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

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

@@ -149,6 +149,20 @@ test('multiple selection is enabled, option disappears after selection', functio
   secondOption.click();
   expect(secondOption).not.toBeInTheDocument();
 });
+test('updates aria attributes on option focus', 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);
+});
 test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = _testWrapper.screen.getByRole('combobox');

package/lib/cjs/context/MultivaluesContext/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultivaluesContext = exports.MultivaluesContext = void 0;
+var _react = require("react");
+var MultivaluesContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.MultivaluesContext = MultivaluesContext;
+var useMultivaluesContext = function useMultivaluesContext() {
+  return (0, _react.useContext)(MultivaluesContext);
+};
+exports.useMultivaluesContext = useMultivaluesContext;

package/lib/components/ListBox/Option.js

@@ -12,10 +12,11 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["item", "hasVirtualFocus"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef } from 'react';
 import { useOption } from '@react-aria/listbox';
 import CircleSmallIcon from 'mdi-react/CircleSmallIcon';
 import PropTypes from 'prop-types';
+import { useMultivaluesContext } from '../../context/MultivaluesContext';
 import { useStatusClasses } from '../../hooks';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box';
@@ -63,6 +64,12 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
+  var updateActiveDescendant = useMultivaluesContext();
+  useEffect(function () {
+    if (isFocused && updateActiveDescendant) {
+      updateActiveDescendant(optionProps.id);
+    }
+  }, [isFocused, updateActiveDescendant]);
 
   /* Related to UIP-4992
    * Need to remove these properties to avoid errors in the console on the external app.

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -27,6 +27,7 @@ import { useListState } from '@react-stately/list';
 import Clear from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
 import { Badge, Box, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { usePropWarning } from '../../hooks';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -45,7 +46,7 @@ import ListBox from '../ListBox';
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context7;
+  var _context7, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -361,8 +362,14 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    activeDescendant = _useState12[0],
+    setActiveDescendant = _useState12[1];
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
+      'aria-activedescendant': activeDescendant,
+      'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
       role: 'combobox'
     },
@@ -384,7 +391,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     status: status,
     isRestrictiveMultivalues: !hasCustomValue
   });
-  return ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
+  return ___EmotionJSX(MultivaluesContext.Provider, {
+    value: setActiveDescendant
+  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       setIsOpen(false);
       if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
@@ -419,7 +428,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, listbox));
+  }, listbox)));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

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

@@ -16,7 +16,7 @@ import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { Item, MultivaluesField, OverlayProvider } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
+import { fireEvent, getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   id: 1,
@@ -146,6 +146,20 @@ test('multiple selection is enabled, option disappears after selection', functio
   secondOption.click();
   expect(secondOption).not.toBeInTheDocument();
 });
+test('updates aria attributes on option focus', 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);
+});
 test('clicking an option renders badge with option name', function () {
   getComponent();
   var input = screen.getByRole('combobox');

package/lib/context/MultivaluesContext/index.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var MultivaluesContext = /*#__PURE__*/createContext(null);
+export var useMultivaluesContext = function useMultivaluesContext() {
+  return useContext(MultivaluesContext);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.5.3-alpha.1",
+  "version": "2.5.3-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",