@atlaskit/popup 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/popup
 
+## 1.17.0
+
+### Minor Changes
+
+-   [#91673](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91673)
+    [`e757c83a22ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e757c83a22ee) -
+    Add new props for improving accessibility: `role`, `label` and `titleId`.
+
 ## 1.16.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.js

@@ -77,7 +77,10 @@ function PopperWrapper(_ref) {
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -131,6 +134,9 @@ function PopperWrapper(_ref) {
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
         if (node) {
           if (typeof _ref3 === 'function') {

package/dist/cjs/popup.js

@@ -45,7 +45,10 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -71,7 +74,10 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;

package/dist/es2019/popper-wrapper.js

@@ -66,7 +66,10 @@ function PopperWrapper({
   shouldUseCaptureOnOutsideClick,
   shouldRenderToParent,
   shouldDisableFocusLock,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -115,6 +118,9 @@ function PopperWrapper({
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: node => {
         if (node) {
           if (typeof ref === 'function') {

package/dist/es2019/popup.js

@@ -28,7 +28,10 @@ export const Popup = /*#__PURE__*/memo(({
   shouldUseCaptureOnOutsideClick = false,
   shouldRenderToParent = false,
   shouldDisableFocusLock = false,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
@@ -52,7 +55,10 @@ export const Popup = /*#__PURE__*/memo(({
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return jsx(Manager, null, jsx(Reference, null, ({
     ref

package/dist/esm/popper-wrapper.js

@@ -70,7 +70,10 @@ function PopperWrapper(_ref) {
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -124,6 +127,9 @@ function PopperWrapper(_ref) {
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
         if (node) {
           if (typeof _ref3 === 'function') {

package/dist/esm/popup.js

@@ -37,7 +37,10 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -63,7 +66,10 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -61,6 +61,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
 interface BaseProps {
     /**
@@ -145,7 +150,7 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
@@ -154,6 +159,22 @@ interface BaseProps {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     * Must be used along with `label` or `titleId`.
+     */
+    role?: string;
+    /**
+     * Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the popup `aria-labelledby` attribute.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 }
 export interface PopupProps extends BaseProps {
     /**

package/dist/types-ts4.5/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -61,6 +61,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
 interface BaseProps {
     /**
@@ -148,7 +153,7 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
@@ -157,6 +162,22 @@ interface BaseProps {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     * Must be used along with `label` or `titleId`.
+     */
+    role?: string;
+    /**
+     * Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the popup `aria-labelledby` attribute.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 }
 export interface PopupProps extends BaseProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"