@atlaskit/avatar-group 12.10.12 → 12.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar-group
 
+## 12.11.0
+
+### Minor Changes
+
+- [`032135d12186b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/032135d12186b) -
+  Top-layer: fix initial focus regressions on the top-layer adapters for `@atlaskit/avatar-group`
+  and `@atlaskit/popup`. Behind the `platform-dst-top-layer` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.10.12
 
 ### Patch Changes

package/__tests__/playwright/top-layer-focus.spec.tsx

@@ -0,0 +1,78 @@
+import { expect, test } from '@af/integration-testing';
+
+/**
+ * Avatar group: focus contract on the top-layer code path.
+ *
+ * `AvatarGroup` renders a "more" trigger that opens a `role="menu"` popover
+ * listing avatars beyond `maxCount`. The focus contract is:
+ *
+ * 1. Initial focus moves to the first item in the avatar list on open.
+ * 2. Escape closes the popover and restores focus to the more trigger.
+ * 3. ArrowDown moves focus between items within the menu.
+ *
+ * See: `platform/packages/design-system/top-layer/notes/architecture/focus.md`.
+ */
+
+const featureFlag = 'platform-dst-top-layer';
+
+test.describe('Avatar group: top-layer focus contract', () => {
+	test('initial focus: focus moves to the first overflow item on open', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.click();
+
+		const menu = page.getByRole('menu');
+		await expect(menu).toBeVisible();
+		// avatar-group computes `maxAvatar = total > max ? max - 1 : max` and
+		// emits overflow items with testId `${testId}--avatar-group-item-${index + maxAvatar}`.
+		// With `data.length=6` and `maxCount=3`, `maxAvatar=2`, so the first
+		// overflow item is at index 2.
+		const firstItem = page.getByTestId('avatar-group--avatar-group-item-2');
+		await expect(firstItem).toBeFocused();
+	});
+
+	test('focus restoration: Escape restores focus to the more trigger', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.focus();
+		await page.keyboard.press('ArrowDown');
+		await expect(page.getByRole('menu')).toBeVisible();
+
+		await page.keyboard.press('Escape');
+		await expect(moreTrigger).toBeFocused();
+	});
+
+	test('focus movement: ArrowDown moves focus between items within the menu', async ({ page }) => {
+		await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
+			'design-system',
+			'avatar-group',
+			'testing-top-layer-focus',
+			{ featureFlag },
+		);
+
+		const moreTrigger = page.getByTestId('avatar-group--overflow-menu--trigger');
+		await moreTrigger.focus();
+		await page.keyboard.press('ArrowDown');
+
+		const menu = page.getByRole('menu');
+		await expect(menu).toBeVisible();
+
+		const items = menu.getByRole('menuitem');
+		await expect(items.first()).toBeFocused();
+
+		await page.keyboard.press('ArrowDown');
+		await expect(items.nth(1)).toBeFocused();
+	});
+});

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

@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
-var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _menu = require("@atlaskit/menu");
 var _animations = require("@atlaskit/top-layer/animations");
 var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
@@ -107,27 +106,27 @@ function MoreDropdownTopLayer(_ref) {
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  var triggerWrapperRef = (0, _react.useRef)(null);
-  var _useFocus = (0, _useFocusEvent.default)(),
-    isFocused = _useFocus.isFocused,
-    triggerFocusBind = _useFocus.bindFocus;
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   (0, _react.useEffect)(function () {
-    if (!isFocused || isOpen) {
+    var trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return (0, _bindEventListener.bind)(window, {
+    return (0, _bindEventListener.bind)(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === _keycodes.KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === _keycodes.KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   var triggerAria = (0, _getAriaForTrigger.getAriaForTrigger)({
     role: 'menu',
     isOpen: isOpen,
@@ -136,20 +135,11 @@ function MoreDropdownTopLayer(_ref) {
   var setTriggerRef = (0, _react.useCallback)(function (node) {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderMoreButton(_objectSpread(_objectSpread({
     ref: setTriggerRef
   }, triggerAria), {}, {
     onClick: handleTriggerClicked
-  }))), /*#__PURE__*/_react.default.createElement(_popover.Popover, {
+  })), /*#__PURE__*/_react.default.createElement(_popover.Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
-import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
@@ -94,28 +93,27 @@ export function MoreDropdownTopLayer({
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  const triggerWrapperRef = useRef(null);
-  const {
-    isFocused,
-    bindFocus: triggerFocusBind
-  } = useFocus();
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   useEffect(() => {
-    if (!isFocused || isOpen) {
+    const trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return bind(window, {
+    return bind(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   const triggerAria = getAriaForTrigger({
     role: 'menu',
     isOpen,
@@ -124,20 +122,11 @@ export function MoreDropdownTopLayer({
   const setTriggerRef = useCallback(node => {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderMoreButton({
     ref: setTriggerRef,
     ...triggerAria,
     onClick: handleTriggerClicked
-  })), /*#__PURE__*/React.createElement(Popover, {
+  }), /*#__PURE__*/React.createElement(Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

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

@@ -5,7 +5,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
-import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
@@ -98,27 +97,27 @@ export function MoreDropdownTopLayer(_ref) {
 
   // ArrowDown-to-open: when the trigger is focused and the menu is closed,
   // pressing ArrowDown opens the menu (WAI-ARIA menu button pattern).
-  // We track focus on the trigger wrapper to avoid threading onFocus/onBlur
-  // through the renderMoreButton/MoreIndicator prop plumbing.
-  var triggerWrapperRef = useRef(null);
-  var _useFocus = useFocus(),
-    isFocused = _useFocus.isFocused,
-    triggerFocusBind = _useFocus.bindFocus;
+  //
+  // Bind the keydown listener directly to the trigger element via its ref so
+  // that opening the menu does not trigger a focus-driven re-render of the
+  // host component, which would unmount and remount the menu items and drop
+  // menuitem focus.
   useEffect(function () {
-    if (!isFocused || isOpen) {
+    var trigger = triggerRef.current;
+    if (!trigger || isOpen) {
       return;
     }
-    return bind(window, {
+    return bind(trigger, {
       type: 'keydown',
-      listener: function openOnArrowDown(e) {
-        if (e.key === KEY_DOWN) {
+      listener: function openOnArrowDown(event) {
+        if (event.key === KEY_DOWN) {
           // Prevent page scroll when opening the menu via ArrowDown.
-          e.preventDefault();
-          handleTriggerClicked(e);
+          event.preventDefault();
+          handleTriggerClicked(event);
         }
       }
     });
-  }, [isFocused, isOpen, handleTriggerClicked]);
+  }, [isOpen, handleTriggerClicked]);
   var triggerAria = getAriaForTrigger({
     role: 'menu',
     isOpen: isOpen,
@@ -127,20 +126,11 @@ export function MoreDropdownTopLayer(_ref) {
   var setTriggerRef = useCallback(function (node) {
     triggerRef.current = node;
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerWrapperRef,
-    onFocus: triggerFocusBind.onFocus,
-    onBlur: triggerFocusBind.onBlur
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
-    ,
-    style: {
-      display: 'contents'
-    }
-  }, renderMoreButton(_objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderMoreButton(_objectSpread(_objectSpread({
     ref: setTriggerRef
   }, triggerAria), {}, {
     onClick: handleTriggerClicked
-  }))), /*#__PURE__*/React.createElement(Popover, {
+  })), /*#__PURE__*/React.createElement(Popover, {
     ref: popoverRef,
     id: popoverId,
     role: "menu",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/avatar-group",
-	"version": "12.10.12",
+	"version": "12.11.0",
 	"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.25.0",
+		"@atlaskit/popup": "^4.26.0",
 		"@atlaskit/tokens": "^13.4.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/top-layer": "^0.18.0",