@atlaskit/popup 4.21.1 → 4.22.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/popup
 
+## 4.22.0
+
+### Minor Changes
+
+- [`cc76d2e733b71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc76d2e733b71) -
+  Updates the top layer popup trigger's `aria-expanded` attribute, so it stays `"true"` for the
+  duration of the popup's exit animation, only going `false` after the animation completes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.21.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.21.1
 
 ### Patch Changes

package/dist/cjs/popup-top-layer.js

@@ -127,9 +127,6 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     titleId: titleId
   });
 
-  // Sync controlled isOpen with internal state
-  var effectiveIsOpen = isOpen;
-
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   var Container = PopupContainer;
@@ -150,8 +147,14 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
           _ref4(node);
         }
       },
-      'aria-controls': effectiveIsOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      'aria-expanded': effectiveIsOpen,
+      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
+      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
+      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
+      // TPopupState and only goes false after the exit animation completes, so:
+      //   - Screen readers don't announce the popup as closed while it is still visible.
+      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
+      //     trigger (popup anchor) before the animation finishes.
+      'aria-expanded': ariaAttributes['aria-expanded'],
       // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
       // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
       // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
@@ -167,7 +170,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     };
     return trigger(triggerProps);
   }), /*#__PURE__*/React.createElement(_popup.Popup.Content, (0, _extends2.default)({}, roleProps, {
-    isOpen: effectiveIsOpen,
+    isOpen: isOpen,
     animate: animation,
     testId: testId && "".concat(testId, "--content"),
     widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'

package/dist/es2019/popup-top-layer.js

@@ -134,9 +134,6 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     titleId
   });
 
-  // Sync controlled isOpen with internal state
-  const effectiveIsOpen = isOpen;
-
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   const Container = PopupContainer;
@@ -158,8 +155,14 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
           ref(node);
         }
       },
-      'aria-controls': effectiveIsOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      'aria-expanded': effectiveIsOpen,
+      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
+      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
+      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
+      // TPopupState and only goes false after the exit animation completes, so:
+      //   - Screen readers don't announce the popup as closed while it is still visible.
+      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
+      //     trigger (popup anchor) before the animation finishes.
+      'aria-expanded': ariaAttributes['aria-expanded'],
       // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
       // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
       // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
@@ -175,7 +178,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     };
     return trigger(triggerProps);
   }), /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
-    isOpen: effectiveIsOpen,
+    isOpen: isOpen,
     animate: animation,
     testId: testId && `${testId}--content`,
     widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'

package/dist/esm/popup-top-layer.js

@@ -118,9 +118,6 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     titleId: titleId
   });
 
-  // Sync controlled isOpen with internal state
-  var effectiveIsOpen = isOpen;
-
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
   var Container = PopupContainer;
@@ -141,8 +138,14 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
           _ref4(node);
         }
       },
-      'aria-controls': effectiveIsOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
-      'aria-expanded': effectiveIsOpen,
+      'aria-controls': isOpen ? providedId !== null && providedId !== void 0 ? providedId : popoverId : undefined,
+      // Use ariaAttributes['aria-expanded'] (which comes from `@atlaskit/top-layer`), rather than
+      // `isOpen` directly. `@atlaskit/top-layer` tracks the full animation lifecycle via
+      // TPopupState and only goes false after the exit animation completes, so:
+      //   - Screen readers don't announce the popup as closed while it is still visible.
+      //   - Consumers relying on aria-expanded to show/hide trigger UI don't lose the
+      //     trigger (popup anchor) before the animation finishes.
+      'aria-expanded': ariaAttributes['aria-expanded'],
       // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
       // `@atlaskit/top-layer` derives `aria-haspopup` from the content's role and types it
       // as the wider WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid').
@@ -158,7 +161,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     };
     return trigger(triggerProps);
   }), /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
-    isOpen: effectiveIsOpen,
+    isOpen: isOpen,
     animate: animation,
     testId: testId && "".concat(testId, "--content"),
     widthFromAnchor: shouldFitContainer ? 'match-anchor' : 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.21.1",
+	"version": "4.22.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/top-layer": "^0.10.0",
+		"@atlaskit/top-layer": "^0.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -74,7 +74,7 @@
 		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/toggle": "^15.6.0",
+		"@atlaskit/toggle": "^16.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",