@atlaskit/popup - npm Package Compare versions

Comparing version 1.16.0 to 1.17.0

CHANGELOG.md

 # @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
@@ -4,0 +12,0 @@

dist/cjs/popper-wrapper.js

@@ -80,3 +80,6 @@ "use strict";
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = (0, _react.useState)(null),
@@ -135,2 +138,5 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
@@ -137,0 +143,0 @@ if (node) {

dist/cjs/popup.js

@@ -48,3 +48,6 @@ "use strict";
     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),
@@ -75,3 +78,6 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
@@ -78,0 +84,0 @@ return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {

dist/es2019/popper-wrapper.js

@@ -69,3 +69,6 @@ import _extends from "@babel/runtime/helpers/extends";
   shouldDisableFocusLock,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) {
@@ -119,2 +122,5 @@ const [popupRef, setPopupRef] = useState(null);
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: node => {
@@ -121,0 +127,0 @@ if (node) {

dist/es2019/popup.js

@@ -31,3 +31,6 @@ /* eslint-disable @repo/internal/react/require-jsdoc */
   shouldDisableFocusLock = false,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) => {
@@ -56,3 +59,6 @@ const [triggerRef, setTriggerRef] = useState(null);
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
@@ -59,0 +65,0 @@ return jsx(Manager, null, jsx(Reference, null, ({

dist/esm/popper-wrapper.js

@@ -73,3 +73,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = useState(null),
@@ -128,2 +131,5 @@ _useState2 = _slicedToArray(_useState, 2),
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
@@ -130,0 +136,0 @@ if (node) {

dist/esm/popup.js

@@ -40,3 +40,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
     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),
@@ -67,3 +70,6 @@ _useState2 = _slicedToArray(_useState, 2),
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
@@ -70,0 +76,0 @@ return jsx(Manager, null, jsx(Reference, null, function (_ref2) {

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

 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;

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

@@ -64,2 +64,7 @@ import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
@@ -152,3 +157,3 @@ interface BaseProps {
     /**
-     * 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`.
@@ -162,2 +167,18 @@ */
     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;
 }
@@ -164,0 +185,0 @@ export interface PopupProps extends BaseProps {

dist/types/popper-wrapper.d.ts

 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;

dist/types/types.d.ts

@@ -64,2 +64,7 @@ import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
@@ -149,3 +154,3 @@ interface BaseProps {
     /**
-     * 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`.
@@ -159,2 +164,18 @@ */
     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;
 }
@@ -161,0 +182,0 @@ export interface PopupProps extends BaseProps {

package.json

 {
   "name": "@atlaskit/popup",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "A popup displays brief content in an overlay.",
@@ -5,0 +5,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156420

increased by1.77%

Lines of code

3453

increased by2.31%

No dependency changes