@atlaskit/avatar-group 9.3.2 → 9.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 9.3.4
+
+### Patch Changes
+
+- [`cb7033c5b72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb7033c5b72) - keyboard arrow (UP and DOWN) support in avatar-group popup component
+
+## 9.3.3
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
 ## 9.3.2
 
 ### Patch Changes

package/dist/cjs/components/avatar-group-item.js

@@ -1,28 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _menu = require("@atlaskit/menu");
+var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 var _excluded = ["href", "onClick"],
   _excluded2 = ["children"];
-var AvatarGroupItem = function AvatarGroupItem(_ref) {
-  var avatar = _ref.avatar,
-    onAvatarClick = _ref.onAvatarClick,
-    testId = _ref.testId,
-    index = _ref.index;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var AvatarGroupItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var avatar = props.avatar,
+    onAvatarClick = props.onAvatarClick,
+    testId = props.testId,
+    index = props.index;
   var href = avatar.href,
     onClick = avatar.onClick,
     rest = (0, _objectWithoutProperties2.default)(avatar, _excluded);
-  var CustomComponent = function CustomComponent(_ref2) {
-    var children = _ref2.children,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
+  var CustomComponent = function CustomComponent(_ref) {
+    var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     return /*#__PURE__*/_react.default.createElement("span", props, children);
   };
@@ -37,6 +43,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
   var callback = onClick || onAvatarClick;
   if (href) {
     return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
+      ref: (0, _mergeRefs.default)([ref, itemRef]),
       href: href,
       target: avatar.target,
       rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
@@ -49,6 +56,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
+      ref: (0, _mergeRefs.default)([ref, itemRef]),
       onClick: function onClick(event) {
         return callback && callback(event, undefined, index);
       },
@@ -61,7 +69,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
     component: CustomComponent,
     testId: testId
   }, avatar.name);
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = AvatarGroupItem;

package/dist/cjs/components/avatar-group.js

@@ -17,6 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
 var _grid = _interopRequireDefault(require("./grid"));
+var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _moreIndicator = _interopRequireDefault(require("./more-indicator"));
 var _stack = _interopRequireDefault(require("./stack"));
 var _utils = require("./utils");
@@ -122,7 +123,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       shouldFlip: true,
       zIndex: _constants.layers.modal(),
       content: function content() {
-        return (0, _react2.jsx)(_menu.PopupMenuGroup, {
+        return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_menu.PopupMenuGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
@@ -138,7 +139,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
           // This index holds the true index,
           // adding up the index of non-overflowed avatars and overflowed avatars.
           index + max);
-        })));
+        }))));
       },
       trigger: function trigger(triggerProps) {
         return renderMoreButton(_objectSpread(_objectSpread({}, triggerProps), {}, {

package/dist/cjs/components/internal/components/focus-manager.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FocusManagerContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _handleFocus = _interopRequireDefault(require("../utiles/handle-focus"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+var FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
+  menuItemRefs: [],
+  registerRef: _noop.default
+});
+
+/**
+ * Focus manager logic
+ */
+exports.FocusManagerContext = FocusManagerContext;
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children;
+  var menuItemRefs = (0, _react.useRef)([]);
+  var registerRef = (0, _react.useCallback)(function (ref) {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+
+  // set focus and intentionally rebinding listener and clean up listener on each render
+  (0, _react.useEffect)(function () {
+    (0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: (0, _handleFocus.default)(menuItemRefs.current)
+    });
+    var unbind = function unbind() {
+      (0, _bindEventListener.bind)(window, {
+        type: 'keydown',
+        listener: (0, _handleFocus.default)(menuItemRefs.current)
+      });
+    };
+    return unbind;
+  }, []);
+  var contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef: registerRef
+  };
+  return /*#__PURE__*/_react.default.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var _default = FocusManager;
+exports.default = _default;

package/dist/cjs/components/internal/hooks/use-register-item-with-focus-manager.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _focusManager = require("../components/focus-manager");
+// The refs stored in the context are used to programatically
+// control focus on a user navigates using the keyboard.
+function useRegisterItemWithFocusManager() {
+  var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
+    registerRef = _useContext.registerRef;
+  var itemRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+var _default = useRegisterItemWithFocusManager;
+exports.default = _default;

package/dist/cjs/components/internal/utiles/handle-focus.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = handleFocus;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _keycodes = require("@atlaskit/ds-lib/keycodes");
+var _actionMap;
+var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
+
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx + 1 < refs.length) {
+    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+    currentFocusedIdx++;
+  }
+};
+
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx > 0) {
+    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+    currentFocusedIdx--;
+  }
+};
+function handleFocus(refs) {
+  return function (e) {
+    var currentFocusedIdx = refs.findIndex(function (el) {
+      var _document$activeEleme;
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    var action = actionMap[e.key];
+    switch (action) {
+      case 'next':
+        if (currentFocusedIdx < refs.length - 1) {
+          e.preventDefault();
+          var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+          _nextFocusableElement && _nextFocusableElement.focus();
+        }
+        break;
+      case 'prev':
+        if (currentFocusedIdx > 0) {
+          e.preventDefault();
+          var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+          _prevFocusableElement && _prevFocusableElement.focus();
+        }
+        break;
+      case 'first':
+        e.preventDefault();
+        // Search for first non-disabled element if first element is disabled
+        var nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
+        break;
+      case 'last':
+        e.preventDefault();
+        // Search for last non-disabled element if last element is disabled
+        var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
+        break;
+      default:
+        return;
+    }
+  };
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.3.2",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/es2019/components/avatar-group-item.js

@@ -1,18 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Avatar from '@atlaskit/avatar';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
-const AvatarGroupItem = ({
-  avatar,
-  onAvatarClick,
-  testId,
-  index
-}) => {
+import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
+const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    avatar,
+    onAvatarClick,
+    testId,
+    index
+  } = props;
   const {
     href,
     onClick,
     ...rest
   } = avatar;
+  const itemRef = useRegisterItemWithFocusManager();
   const CustomComponent = ({
     children,
     ...props
@@ -31,6 +35,7 @@ const AvatarGroupItem = ({
   const callback = onClick || onAvatarClick;
   if (href) {
     return /*#__PURE__*/React.createElement(LinkItem, {
+      ref: mergeRefs([ref, itemRef]),
       href: href,
       target: avatar.target,
       rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
@@ -41,6 +46,7 @@ const AvatarGroupItem = ({
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/React.createElement(ButtonItem, {
+      ref: mergeRefs([ref, itemRef]),
       onClick: event => callback && callback(event, undefined, index),
       iconBefore: AvatarIcon,
       testId: testId
@@ -51,7 +57,7 @@ const AvatarGroupItem = ({
     component: CustomComponent,
     testId: testId
   }, avatar.name);
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AvatarGroupItem;

package/dist/es2019/components/avatar-group.js

@@ -9,6 +9,7 @@ import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import Grid from './grid';
+import FocusManager from './internal/components/focus-manager';
 import MoreIndicator from './more-indicator';
 import Stack from './stack';
 import { composeUniqueKey } from './utils';
@@ -97,7 +98,7 @@ const AvatarGroup = ({
       rootBoundary: rootBoundary,
       shouldFlip: true,
       zIndex: layers.modal(),
-      content: () => jsx(PopupMenuGroup, {
+      content: () => jsx(FocusManager, null, jsx(PopupMenuGroup, {
         onClick: e => e.stopPropagation(),
         minWidth: 250,
         maxHeight: 300
@@ -109,7 +110,7 @@ const AvatarGroup = ({
       },
       // This index holds the true index,
       // adding up the index of non-overflowed avatars and overflowed avatars.
-      index + max)))),
+      index + max))))),
       trigger: triggerProps => renderMoreButton({
         ...triggerProps,
         onClick: () => setIsOpen(!isOpen)

package/dist/es2019/components/internal/components/focus-manager.js

@@ -0,0 +1,54 @@
+import React, { createContext, useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import __noop from '@atlaskit/ds-lib/noop';
+import handleFocus from '../utiles/handle-focus';
+
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export const FocusManagerContext = /*#__PURE__*/createContext({
+  menuItemRefs: [],
+  registerRef: __noop
+});
+
+/**
+ * Focus manager logic
+ */
+const FocusManager = ({
+  children
+}) => {
+  const menuItemRefs = useRef([]);
+  const registerRef = useCallback(ref => {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+
+  // set focus and intentionally rebinding listener and clean up listener on each render
+  useEffect(() => {
+    bind(window, {
+      type: 'keydown',
+      listener: handleFocus(menuItemRefs.current)
+    });
+    const unbind = () => {
+      bind(window, {
+        type: 'keydown',
+        listener: handleFocus(menuItemRefs.current)
+      });
+    };
+    return unbind;
+  }, []);
+  const contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef
+  };
+  return /*#__PURE__*/React.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export default FocusManager;

package/dist/es2019/components/internal/hooks/use-register-item-with-focus-manager.js

@@ -0,0 +1,18 @@
+import { useContext, useEffect, useRef } from 'react';
+import { FocusManagerContext } from '../components/focus-manager';
+
+// The refs stored in the context are used to programatically
+// control focus on a user navigates using the keyboard.
+function useRegisterItemWithFocusManager() {
+  const {
+    registerRef
+  } = useContext(FocusManagerContext);
+  const itemRef = useRef(null);
+  useEffect(() => {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+export default useRegisterItemWithFocusManager;

package/dist/es2019/components/internal/utiles/handle-focus.js

@@ -0,0 +1,78 @@
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+const actionMap = {
+  [KEY_DOWN]: 'next',
+  [KEY_UP]: 'prev',
+  [KEY_HOME]: 'first',
+  [KEY_END]: 'last'
+};
+
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+const getNextFocusableElement = (refs, currentFocusedIdx) => {
+  while (currentFocusedIdx + 1 < refs.length) {
+    const isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+    currentFocusedIdx++;
+  }
+};
+
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+const getPrevFocusableElement = (refs, currentFocusedIdx) => {
+  while (currentFocusedIdx > 0) {
+    const isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+    currentFocusedIdx--;
+  }
+};
+export default function handleFocus(refs) {
+  return e => {
+    const currentFocusedIdx = refs.findIndex(el => {
+      var _document$activeEleme;
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    const action = actionMap[e.key];
+    switch (action) {
+      case 'next':
+        if (currentFocusedIdx < refs.length - 1) {
+          e.preventDefault();
+          const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+          nextFocusableElement && nextFocusableElement.focus();
+        }
+        break;
+      case 'prev':
+        if (currentFocusedIdx > 0) {
+          e.preventDefault();
+          const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+          prevFocusableElement && prevFocusableElement.focus();
+        }
+        break;
+      case 'first':
+        e.preventDefault();
+        // Search for first non-disabled element if first element is disabled
+        const nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
+        break;
+      case 'last':
+        e.preventDefault();
+        // Search for last non-disabled element if last element is disabled
+        const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
+        break;
+      default:
+        return;
+    }
+  };
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.3.2",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/esm/components/avatar-group-item.js

@@ -2,20 +2,23 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["href", "onClick"],
   _excluded2 = ["children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Avatar from '@atlaskit/avatar';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
-var AvatarGroupItem = function AvatarGroupItem(_ref) {
-  var avatar = _ref.avatar,
-    onAvatarClick = _ref.onAvatarClick,
-    testId = _ref.testId,
-    index = _ref.index;
+import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
+var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var avatar = props.avatar,
+    onAvatarClick = props.onAvatarClick,
+    testId = props.testId,
+    index = props.index;
   var href = avatar.href,
     onClick = avatar.onClick,
     rest = _objectWithoutProperties(avatar, _excluded);
-  var CustomComponent = function CustomComponent(_ref2) {
-    var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+  var itemRef = useRegisterItemWithFocusManager();
+  var CustomComponent = function CustomComponent(_ref) {
+    var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded2);
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     return /*#__PURE__*/React.createElement("span", props, children);
   };
@@ -30,6 +33,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
   var callback = onClick || onAvatarClick;
   if (href) {
     return /*#__PURE__*/React.createElement(LinkItem, {
+      ref: mergeRefs([ref, itemRef]),
       href: href,
       target: avatar.target,
       rel: avatar.target === '_blank' ? 'noopener noreferrer' : undefined,
@@ -42,6 +46,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
   }
   if (typeof callback === 'function') {
     return /*#__PURE__*/React.createElement(ButtonItem, {
+      ref: mergeRefs([ref, itemRef]),
       onClick: function onClick(event) {
         return callback && callback(event, undefined, index);
       },
@@ -54,7 +59,7 @@ var AvatarGroupItem = function AvatarGroupItem(_ref) {
     component: CustomComponent,
     testId: testId
   }, avatar.name);
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AvatarGroupItem;

package/dist/esm/components/avatar-group.js

@@ -13,6 +13,7 @@ import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import AvatarGroupItem from './avatar-group-item';
 import Grid from './grid';
+import FocusManager from './internal/components/focus-manager';
 import MoreIndicator from './more-indicator';
 import Stack from './stack';
 import { composeUniqueKey } from './utils';
@@ -116,7 +117,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       shouldFlip: true,
       zIndex: layers.modal(),
       content: function content() {
-        return jsx(PopupMenuGroup, {
+        return jsx(FocusManager, null, jsx(PopupMenuGroup, {
           onClick: function onClick(e) {
             return e.stopPropagation();
           },
@@ -132,7 +133,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
           // This index holds the true index,
           // adding up the index of non-overflowed avatars and overflowed avatars.
           index + max);
-        })));
+        }))));
       },
       trigger: function trigger(triggerProps) {
         return renderMoreButton(_objectSpread(_objectSpread({}, triggerProps), {}, {

package/dist/esm/components/internal/components/focus-manager.js

@@ -0,0 +1,53 @@
+import React, { createContext, useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import __noop from '@atlaskit/ds-lib/noop';
+import handleFocus from '../utiles/handle-focus';
+
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export var FocusManagerContext = /*#__PURE__*/createContext({
+  menuItemRefs: [],
+  registerRef: __noop
+});
+
+/**
+ * Focus manager logic
+ */
+var FocusManager = function FocusManager(_ref) {
+  var children = _ref.children;
+  var menuItemRefs = useRef([]);
+  var registerRef = useCallback(function (ref) {
+    if (ref && !menuItemRefs.current.includes(ref)) {
+      menuItemRefs.current.push(ref);
+    }
+  }, []);
+
+  // set focus and intentionally rebinding listener and clean up listener on each render
+  useEffect(function () {
+    bind(window, {
+      type: 'keydown',
+      listener: handleFocus(menuItemRefs.current)
+    });
+    var unbind = function unbind() {
+      bind(window, {
+        type: 'keydown',
+        listener: handleFocus(menuItemRefs.current)
+      });
+    };
+    return unbind;
+  }, []);
+  var contextValue = {
+    menuItemRefs: menuItemRefs.current,
+    registerRef: registerRef
+  };
+  return /*#__PURE__*/React.createElement(FocusManagerContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export default FocusManager;

package/dist/esm/components/internal/hooks/use-register-item-with-focus-manager.js

@@ -0,0 +1,17 @@
+import { useContext, useEffect, useRef } from 'react';
+import { FocusManagerContext } from '../components/focus-manager';
+
+// The refs stored in the context are used to programatically
+// control focus on a user navigates using the keyboard.
+function useRegisterItemWithFocusManager() {
+  var _useContext = useContext(FocusManagerContext),
+    registerRef = _useContext.registerRef;
+  var itemRef = useRef(null);
+  useEffect(function () {
+    if (itemRef.current !== null) {
+      registerRef(itemRef.current);
+    }
+  }, [registerRef]);
+  return itemRef;
+}
+export default useRegisterItemWithFocusManager;

package/dist/esm/components/internal/utiles/handle-focus.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _actionMap;
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
+
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx + 1 < refs.length) {
+    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+    currentFocusedIdx++;
+  }
+};
+
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx > 0) {
+    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+    currentFocusedIdx--;
+  }
+};
+export default function handleFocus(refs) {
+  return function (e) {
+    var currentFocusedIdx = refs.findIndex(function (el) {
+      var _document$activeEleme;
+      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+    });
+    var action = actionMap[e.key];
+    switch (action) {
+      case 'next':
+        if (currentFocusedIdx < refs.length - 1) {
+          e.preventDefault();
+          var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+          _nextFocusableElement && _nextFocusableElement.focus();
+        }
+        break;
+      case 'prev':
+        if (currentFocusedIdx > 0) {
+          e.preventDefault();
+          var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+          _prevFocusableElement && _prevFocusableElement.focus();
+        }
+        break;
+      case 'first':
+        e.preventDefault();
+        // Search for first non-disabled element if first element is disabled
+        var nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
+        break;
+      case 'last':
+        e.preventDefault();
+        // Search for last non-disabled element if last element is disabled
+        var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
+        break;
+      default:
+        return;
+    }
+  };
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "9.3.2",
+	"version": "9.3.4",
 	"sideEffects": false
 }

package/dist/types/components/avatar-group-item.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import { AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupItemProps {
     avatar: AvatarProps;
@@ -8,5 +8,5 @@ export interface AvatarGroupItemProps {
     onAvatarClick?: onAvatarClickHandler;
     testId?: string;
 }
-declare const AvatarGroupItem: FC<AvatarGroupItemProps>;
+declare const AvatarGroupItem: React.ForwardRefExoticComponent<AvatarGroupItemProps & React.RefAttributes<HTMLElement>>;
 export default AvatarGroupItem;

package/dist/types/components/internal/components/focus-manager.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+import { FocusableElement } from '../../types';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export declare const FocusManagerContext: React.Context<{
+    menuItemRefs: FocusableElement[];
+    registerRef: (ref: FocusableElement) => void;
+}>;
+/**
+ * Focus manager logic
+ */
+declare const FocusManager: FC<{
+    children: ReactNode;
+}>;
+export default FocusManager;

package/dist/types/components/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FocusableElement } from '../../types';
+declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+export default useRegisterItemWithFocusManager;

package/dist/types/components/internal/utiles/handle-focus.d.ts

@@ -0,0 +1,2 @@
+import { FocusableElement } from '../../types';
+export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;

package/dist/types/components/types.d.ts

@@ -18,3 +18,5 @@ export interface AvatarGroupOverrides {
     };
 }
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type Action = 'next' | 'prev' | 'first' | 'last';

package/dist/types-ts4.5/components/avatar-group-item.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import { AvatarProps, onAvatarClickHandler } from './types';
 export interface AvatarGroupItemProps {
     avatar: AvatarProps;
@@ -8,5 +8,5 @@ export interface AvatarGroupItemProps {
     onAvatarClick?: onAvatarClickHandler;
     testId?: string;
 }
-declare const AvatarGroupItem: FC<AvatarGroupItemProps>;
+declare const AvatarGroupItem: React.ForwardRefExoticComponent<AvatarGroupItemProps & React.RefAttributes<HTMLElement>>;
 export default AvatarGroupItem;

package/dist/types-ts4.5/components/internal/components/focus-manager.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+import { FocusableElement } from '../../types';
+/**
+ *
+ *
+ * Context provider which maintains the list of focusable elements and a method to
+ * register new menu items.
+ * This list drives the keyboard navgation of the menu.
+ *
+ */
+export declare const FocusManagerContext: React.Context<{
+    menuItemRefs: FocusableElement[];
+    registerRef: (ref: FocusableElement) => void;
+}>;
+/**
+ * Focus manager logic
+ */
+declare const FocusManager: FC<{
+    children: ReactNode;
+}>;
+export default FocusManager;

package/dist/types-ts4.5/components/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FocusableElement } from '../../types';
+declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/components/internal/utiles/handle-focus.d.ts

@@ -0,0 +1,2 @@
+import { FocusableElement } from '../../types';
+export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;

package/dist/types-ts4.5/components/types.d.ts

@@ -18,3 +18,5 @@ export interface AvatarGroupOverrides {
     };
 }
 export type onAvatarClickHandler = (event: React.MouseEvent, analyticsEvent: AnalyticsEvent | undefined, index: number) => void;
+export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type Action = 'next' | 'prev' | 'first' | 'last';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar-group",
-  "version": "9.3.2",
+  "version": "9.3.4",
   "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,13 +35,15 @@
   },
   "dependencies": {
     "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/menu": "^1.7.0",
     "@atlaskit/popup": "^1.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@emotion/react": "^11.7.1",
+    "bind-event-listener": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -54,7 +56,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.6.0",
@@ -63,6 +65,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",
+    "jest-axe": "^4.0.0",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",