@atlaskit/editor-common 78.3.1 → 78.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 78.4.0
+
+### Minor Changes
+
+- [#70153](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70153) [`3a34e7545f18`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3a34e7545f18) - ECA11Y-36: Flaoting toolbar group buttons into radiogroup buttons structure
+
+## 78.3.2
+
+### Patch Changes
+
+- [#74684](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74684) [`077c9034fc89`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/077c9034fc89) - Pass fullName as ariaLabel to ProfileCardTrigger props'
+
 ## 78.3.1
 
 ### Patch Changes

package/dist/cjs/messages/link-toolbar.js

@@ -60,5 +60,10 @@ var linkToolbarMessages = exports.linkToolbarMessages = (0, _reactIntlNext.defin
     id: 'fabric.editor.edit.datasource',
     defaultMessage: 'Edit search query',
     description: 'Datasource toolbar edit button'
+  },
+  searchInput: {
+    id: 'fabric.editor.edit.searchInput',
+    defaultMessage: 'Add a link',
+    description: 'Label for the search media input'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.3.1";
+var packageVersion = "78.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.3.1";
+var packageVersion = "78.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles = require("./styles");
 var _excluded = ["buttonStyles"];
@@ -39,10 +40,16 @@ var _default = exports.default = function _default(_ref) {
     ariaHasPopup = _ref.ariaHasPopup,
     tabIndex = _ref.tabIndex,
     areaControls = _ref.areaControls,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    isRadioButton = _ref.isRadioButton;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
+  var isButtonPressed = ariaHasPopup ? undefined : selected;
+  var ariaChecked = isRadioButton ? isButtonPressed : undefined;
+  var ariaCheckedWithFF = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaChecked : undefined;
+  var ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  var ariaPressedWithFF = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaPressed : isButtonPressed;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: tooltipContent || title,
     hideTooltipOnClick: hideTooltipOnClick,
@@ -65,7 +72,9 @@ var _default = exports.default = function _default(_ref) {
       }, rest);
     },
     "aria-label": ariaLabel || title,
-    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-pressed": ariaPressedWithFF,
+    "aria-checked": ariaCheckedWithFF,
+    role: isRadioButton ? 'radio' : undefined,
     "aria-expanded": ariaHasPopup ? selected : undefined,
     "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',

package/dist/cjs/ui/Mention/mention-with-profilecard.js

@@ -31,7 +31,9 @@ function MentionWithProfileCard(_ref) {
     resourceClient: resourceClient,
     actions: actions,
     trigger: "click",
-    position: "bottom-end"
+    position: "bottom-end",
+    testId: "mention-with-profilecard-trigger",
+    ariaLabel: text.replace(/^@/, '')
   }, /*#__PURE__*/_react.default.createElement(_mention.ResourcedMention, {
     id: id,
     text: text,

package/dist/es2019/messages/link-toolbar.js

@@ -54,5 +54,10 @@ export const linkToolbarMessages = defineMessages({
     id: 'fabric.editor.edit.datasource',
     defaultMessage: 'Edit search query',
     description: 'Datasource toolbar edit button'
+  },
+  searchInput: {
+    id: 'fabric.editor.edit.searchInput',
+    defaultMessage: 'Add a link',
+    description: 'Label for the search media input'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.3.1";
+const packageVersion = "78.4.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.3.1";
+const packageVersion = "78.4.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/FloatingToolbar/Button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { getButtonStyles, iconOnlySpacing } from './styles';
 export default (({
@@ -25,11 +26,17 @@ export default (({
   ariaHasPopup,
   tabIndex,
   areaControls,
-  ariaLabel
+  ariaLabel,
+  isRadioButton
 }) => {
   // Check if there's only an icon and add additional styles
   const iconOnly = (icon || iconAfter) && !children;
   const customSpacing = iconOnly ? iconOnlySpacing : {};
+  const isButtonPressed = ariaHasPopup ? undefined : selected;
+  const ariaChecked = isRadioButton ? isButtonPressed : undefined;
+  const ariaCheckedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaChecked : undefined;
+  const ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  const ariaPressedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaPressed : isButtonPressed;
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent || title,
     hideTooltipOnClick: hideTooltipOnClick,
@@ -58,7 +65,9 @@ export default (({
       };
     },
     "aria-label": ariaLabel || title,
-    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-pressed": ariaPressedWithFF,
+    "aria-checked": ariaCheckedWithFF,
+    role: isRadioButton ? 'radio' : undefined,
     "aria-expanded": ariaHasPopup ? selected : undefined,
     "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',

package/dist/es2019/ui/Mention/mention-with-profilecard.js

@@ -22,7 +22,9 @@ export default function MentionWithProfileCard({
     resourceClient: resourceClient,
     actions: actions,
     trigger: "click",
-    position: "bottom-end"
+    position: "bottom-end",
+    testId: "mention-with-profilecard-trigger",
+    ariaLabel: text.replace(/^@/, '')
   }, /*#__PURE__*/React.createElement(ResourcedMention, {
     id: id,
     text: text,

package/dist/esm/messages/link-toolbar.js

@@ -54,5 +54,10 @@ export var linkToolbarMessages = defineMessages({
     id: 'fabric.editor.edit.datasource',
     defaultMessage: 'Edit search query',
     description: 'Datasource toolbar edit button'
+  },
+  searchInput: {
+    id: 'fabric.editor.edit.searchInput',
+    defaultMessage: 'Add a link',
+    description: 'Label for the search media input'
   }
 });

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.3.1";
+var packageVersion = "78.4.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.3.1";
+var packageVersion = "78.4.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/FloatingToolbar/Button.js

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { getButtonStyles, iconOnlySpacing } from './styles';
 export default (function (_ref) {
@@ -32,10 +33,16 @@ export default (function (_ref) {
     ariaHasPopup = _ref.ariaHasPopup,
     tabIndex = _ref.tabIndex,
     areaControls = _ref.areaControls,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    isRadioButton = _ref.isRadioButton;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
+  var isButtonPressed = ariaHasPopup ? undefined : selected;
+  var ariaChecked = isRadioButton ? isButtonPressed : undefined;
+  var ariaCheckedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaChecked : undefined;
+  var ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  var ariaPressedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaPressed : isButtonPressed;
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent || title,
     hideTooltipOnClick: hideTooltipOnClick,
@@ -58,7 +65,9 @@ export default (function (_ref) {
       }, rest);
     },
     "aria-label": ariaLabel || title,
-    "aria-pressed": !ariaHasPopup ? selected : undefined,
+    "aria-pressed": ariaPressedWithFF,
+    "aria-checked": ariaCheckedWithFF,
+    role: isRadioButton ? 'radio' : undefined,
     "aria-expanded": ariaHasPopup ? selected : undefined,
     "aria-controls": ariaHasPopup ? areaControls : undefined,
     spacing: 'compact',

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -21,7 +21,9 @@ export default function MentionWithProfileCard(_ref) {
     resourceClient: resourceClient,
     actions: actions,
     trigger: "click",
-    position: "bottom-end"
+    position: "bottom-end",
+    testId: "mention-with-profilecard-trigger",
+    ariaLabel: text.replace(/^@/, '')
   }, /*#__PURE__*/React.createElement(ResourcedMention, {
     id: id,
     text: text,

package/dist/types/messages/link-toolbar.d.ts

@@ -54,4 +54,9 @@ export declare const linkToolbarMessages: {
         defaultMessage: string;
         description: string;
     };
+    searchInput: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/types/floating-toolbar.d.ts

@@ -92,6 +92,7 @@ export type FloatingToolbarCopyButton = {
 export type FloatingToolbarButton<T extends {}> = {
     id?: string;
     type: 'button';
+    isRadioButton?: boolean;
     title: string;
     onClick: T;
     showTitle?: boolean;

package/dist/types/ui/FloatingToolbar/Button.d.ts

@@ -25,6 +25,7 @@ export interface Props {
     hideTooltipOnClick?: boolean;
     tabIndex?: number | null | undefined;
     areaControls?: string;
+    isRadioButton?: boolean;
 }
-declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, selected, disabled, href, target, appearance, children, className, tooltipContent, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, }: Props) => JSX.Element;
+declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, selected, disabled, href, target, appearance, children, className, tooltipContent, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, }: Props) => JSX.Element;
 export default _default;

package/dist/types/ui/Mention/mention-with-profilecard.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { MentionProvider } from '@atlaskit/mention';
-import { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
-import { MentionEventHandler } from '../EventHandlers';
+import type { MentionProvider } from '@atlaskit/mention';
+import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
+import type { MentionEventHandler } from '../EventHandlers';
 export interface Props {
     id: string;
     text: string;

package/dist/types-ts4.5/messages/link-toolbar.d.ts

@@ -54,4 +54,9 @@ export declare const linkToolbarMessages: {
         defaultMessage: string;
         description: string;
     };
+    searchInput: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -92,6 +92,7 @@ export type FloatingToolbarCopyButton = {
 export type FloatingToolbarButton<T extends {}> = {
     id?: string;
     type: 'button';
+    isRadioButton?: boolean;
     title: string;
     onClick: T;
     showTitle?: boolean;

package/dist/types-ts4.5/ui/FloatingToolbar/Button.d.ts

@@ -25,6 +25,7 @@ export interface Props {
     hideTooltipOnClick?: boolean;
     tabIndex?: number | null | undefined;
     areaControls?: string;
+    isRadioButton?: boolean;
 }
-declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, selected, disabled, href, target, appearance, children, className, tooltipContent, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, }: Props) => JSX.Element;
+declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, selected, disabled, href, target, appearance, children, className, tooltipContent, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, }: Props) => JSX.Element;
 export default _default;

package/dist/types-ts4.5/ui/Mention/mention-with-profilecard.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { MentionProvider } from '@atlaskit/mention';
-import { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
-import { MentionEventHandler } from '../EventHandlers';
+import type { MentionProvider } from '@atlaskit/mention';
+import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
+import type { MentionEventHandler } from '../EventHandlers';
 export interface Props {
     id: string;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.3.1",
+  "version": "78.4.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -108,7 +108,7 @@
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/editor-tables": "^2.5.0",
     "@atlaskit/emoji": "^67.6.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-datasource": "^1.22.0",
@@ -225,6 +225,9 @@
     },
     "platform.editor.ordered-list-auto-join-improvements_mrlv5": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-floating-toolbar-markup_vexmo": {
+      "type": "boolean"
     }
   }
 }