@atlaskit/renderer 109.36.0 → 109.37.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 109.37.0
+
+### Minor Changes
+
+- [#115232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115232)
+  [`67c2dc683387a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67c2dc683387a) -
+  [ux] adding keyboard support for inline comments in renderer
+
+### Patch Changes
+
+- Updated dependencies
+
+## 109.36.1
+
+### Patch Changes
+
+- [#112336](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112336)
+  [`a1733f8d7c4cc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1733f8d7c4cc) -
+  [ux] ED-23648 tweak editor and renderer inline comment sizing to fit inline nodes
+- Updated dependencies
+
 ## 109.36.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -51,6 +51,9 @@
         {
             "path": "../../../elements/emoji/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../measurement/feature-gate-js-client/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },

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

@@ -56,7 +56,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.36.0";
+var packageVersion = "109.37.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/cjs/ui/Renderer/style.js

@@ -112,6 +112,9 @@ function getAnnotationStyles(_ref6) {
   if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
     return '';
   }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return '';
+  }
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/cjs/ui/annotations/element/mark.js

@@ -10,6 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -20,7 +21,10 @@ 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) { (0, _defineProperty2.default)(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; }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)().common, (0, _styles.AnnotationSharedCSSByState)().blur, (0, _styles.AnnotationSharedCSSByState)().focus);
+};
+var isMobile = function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 };
 var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -31,12 +35,13 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     hasFocus = _ref.hasFocus,
     onClick = _ref.onClick,
     useBlockLevel = _ref.useBlockLevel;
+  var isInlineCommentsKbAccessible = _featureGateJsClient.default.checkGate('inline_comments_keyboard_accessible_renderer');
   var annotationIds = (0, _react.useMemo)(function () {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var onMarkClick = (0, _react.useCallback)(function (event) {
     // prevent inline mark logic for media block marks
-    if (event.currentTarget.getAttribute('data-block-mark')) {
+    if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
       return;
     }
 
@@ -65,15 +70,28 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
       annotationIds: annotationIds
     });
   }, [annotationIds, onClick, state]);
+  var onMarkEnter = function onMarkEnter(evt) {
+    var _document$activeEleme;
+    var focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;
+    if (focusedElementTag === 'MARK' && evt.key === 'Enter') {
+      onMarkClick(evt);
+    }
+  };
   var overriddenData = !state ? dataAttributes : _objectSpread(_objectSpread({}, dataAttributes), {}, {
     'data-mark-annotation-state': state,
     'data-has-focus': hasFocus
   });
+  var desktopAccessibilityAttributes = isInlineCommentsKbAccessible ? isMobile() ? {} : {
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: onMarkEnter,
+    'aria-expanded': hasFocus
+  } : {};
   var accessibility = state !== _adfSchema.AnnotationMarkStates.ACTIVE ? {
     'aria-disabled': true
-  } : {
+  } : _objectSpread({
     'aria-details': annotationIds.join(', ')
-  };
+  }, desktopAccessibilityAttributes);
   return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
     id: id
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _types = require("@atlaskit/editor-common/types");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
@@ -53,6 +54,7 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     hasFocus = _useState4[0],
     setHasFocus = _useState4[1];
+  var isInlineCommentsKbAccessible = _featureGateJsClient.default.checkGate('inline_comments_keyboard_accessible_renderer');
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber) {
       return;
@@ -62,6 +64,9 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
     updateSubscriber.on(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -69,7 +74,7 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
       updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.off(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
     };
-  }, [id, updateSubscriber]);
+  }, [id, updateSubscriber, isInlineCommentsKbAccessible]);
   return hasFocus;
 };
 var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnnotationClickEvent(props) {
@@ -80,6 +85,7 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
   var updateSubscriber = props.updateSubscriber,
     createAnalyticsEvent = props.createAnalyticsEvent,
     isCommentsOnMediaAnalyticsEnabled = props.isCommentsOnMediaAnalyticsEnabled;
+  var isInlineCommentsKbAccessible = _featureGateJsClient.default.checkGate('inline_comments_keyboard_accessible_renderer');
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber) {
       return;
@@ -121,6 +127,9 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         annotations: [],
         clickElementTarget: undefined
       });
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
     updateSubscriber.on(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
@@ -128,6 +137,6 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
       updateSubscriber.off(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled, isInlineCommentsKbAccessible]);
   return annotationClickEvent;
 };

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

@@ -38,7 +38,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.36.0";
+const packageVersion = "109.37.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

package/dist/es2019/ui/Renderer/style.js

@@ -371,6 +371,9 @@ function getAnnotationStyles({
   if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
     return '';
   }
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return '';
+  }
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/es2019/ui/annotations/element/mark.js

@@ -3,6 +3,7 @@
 import { useMemo, useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -14,6 +15,7 @@ const markStyles = () => css`
 	-webkit-tap-highlight-color: transparent;
 
 	&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
+		${AnnotationSharedCSSByState().common};
 		${AnnotationSharedCSSByState().blur};
 
 		&:focus,
@@ -22,6 +24,9 @@ const markStyles = () => css`
 		}
 	}
 `;
+const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -32,10 +37,11 @@ export const MarkComponent = ({
   onClick,
   useBlockLevel
 }) => {
+  const isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
   const onMarkClick = useCallback(event => {
     // prevent inline mark logic for media block marks
-    if (event.currentTarget.getAttribute('data-block-mark')) {
+    if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
       return;
     }
 
@@ -64,15 +70,29 @@ export const MarkComponent = ({
       annotationIds
     });
   }, [annotationIds, onClick, state]);
+  const onMarkEnter = evt => {
+    var _document$activeEleme;
+    const focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;
+    if (focusedElementTag === 'MARK' && evt.key === 'Enter') {
+      onMarkClick(evt);
+    }
+  };
   const overriddenData = !state ? dataAttributes : {
     ...dataAttributes,
     'data-mark-annotation-state': state,
     'data-has-focus': hasFocus
   };
+  const desktopAccessibilityAttributes = isInlineCommentsKbAccessible ? isMobile() ? {} : {
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: onMarkEnter,
+    'aria-expanded': hasFocus
+  } : {};
   const accessibility = state !== AnnotationMarkStates.ACTIVE ? {
     'aria-disabled': true
   } : {
-    'aria-details': annotationIds.join(', ')
+    'aria-details': annotationIds.join(', '),
+    ...desktopAccessibilityAttributes
   };
   return jsx(useBlockLevel ? 'div' : 'mark', {
     id,

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -44,6 +45,7 @@ export const useHasFocusEvent = ({
   updateSubscriber
 }) => {
   const [hasFocus, setHasFocus] = useState(false);
+  const isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -53,6 +55,9 @@ export const useHasFocusEvent = ({
     };
     const removeFocus = () => {
       setHasFocus(false);
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
     updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -60,7 +65,7 @@ export const useHasFocusEvent = ({
       updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.off(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
     };
-  }, [id, updateSubscriber]);
+  }, [id, updateSubscriber, isInlineCommentsKbAccessible]);
   return hasFocus;
 };
 export const useAnnotationClickEvent = props => {
@@ -70,6 +75,7 @@ export const useAnnotationClickEvent = props => {
     createAnalyticsEvent,
     isCommentsOnMediaAnalyticsEnabled
   } = props;
+  const isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   useLayoutEffect(() => {
     if (!updateSubscriber) {
       return;
@@ -109,6 +115,9 @@ export const useAnnotationClickEvent = props => {
         annotations: [],
         clickElementTarget: undefined
       });
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
     updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
@@ -116,6 +125,6 @@ export const useAnnotationClickEvent = props => {
       updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled, isInlineCommentsKbAccessible]);
   return annotationClickEvent;
 };

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

@@ -48,7 +48,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.36.0";
+var packageVersion = "109.37.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/dist/esm/ui/Renderer/style.js

@@ -104,6 +104,9 @@ function getAnnotationStyles(_ref6) {
   if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
     return '';
   }
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return '';
+  }
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/esm/ui/annotations/element/mark.js

@@ -9,13 +9,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useMemo, useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
 var markStyles = function markStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().common, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
+};
+var isMobile = function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 };
 export var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -26,12 +30,13 @@ export var MarkComponent = function MarkComponent(_ref) {
     hasFocus = _ref.hasFocus,
     onClick = _ref.onClick,
     useBlockLevel = _ref.useBlockLevel;
+  var isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
   var onMarkClick = useCallback(function (event) {
     // prevent inline mark logic for media block marks
-    if (event.currentTarget.getAttribute('data-block-mark')) {
+    if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
       return;
     }
 
@@ -60,15 +65,28 @@ export var MarkComponent = function MarkComponent(_ref) {
       annotationIds: annotationIds
     });
   }, [annotationIds, onClick, state]);
+  var onMarkEnter = function onMarkEnter(evt) {
+    var _document$activeEleme;
+    var focusedElementTag = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.tagName;
+    if (focusedElementTag === 'MARK' && evt.key === 'Enter') {
+      onMarkClick(evt);
+    }
+  };
   var overriddenData = !state ? dataAttributes : _objectSpread(_objectSpread({}, dataAttributes), {}, {
     'data-mark-annotation-state': state,
     'data-has-focus': hasFocus
   });
+  var desktopAccessibilityAttributes = isInlineCommentsKbAccessible ? isMobile() ? {} : {
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: onMarkEnter,
+    'aria-expanded': hasFocus
+  } : {};
   var accessibility = state !== AnnotationMarkStates.ACTIVE ? {
     'aria-disabled': true
-  } : {
+  } : _objectSpread({
     'aria-details': annotationIds.join(', ')
-  };
+  }, desktopAccessibilityAttributes);
   return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
     id: id
   }, getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -4,6 +4,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 { useLayoutEffect, useState } from 'react';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -46,6 +47,7 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     hasFocus = _useState4[0],
     setHasFocus = _useState4[1];
+  var isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -55,6 +57,9 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
     updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
@@ -62,7 +67,7 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
       updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
       updateSubscriber.off(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
     };
-  }, [id, updateSubscriber]);
+  }, [id, updateSubscriber, isInlineCommentsKbAccessible]);
   return hasFocus;
 };
 export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
@@ -73,6 +78,7 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
   var updateSubscriber = props.updateSubscriber,
     createAnalyticsEvent = props.createAnalyticsEvent,
     isCommentsOnMediaAnalyticsEnabled = props.isCommentsOnMediaAnalyticsEnabled;
+  var isInlineCommentsKbAccessible = FeatureGates.checkGate('inline_comments_keyboard_accessible_renderer');
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
@@ -114,6 +120,9 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         annotations: [],
         clickElementTarget: undefined
       });
+      if (isInlineCommentsKbAccessible && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
     };
     updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
     updateSubscriber.on(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
@@ -121,6 +130,6 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
       updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled, isInlineCommentsKbAccessible]);
   return annotationClickEvent;
 };

package/dist/types/ui/annotations/element/mark.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
@@ -11,14 +12,13 @@ type MarkComponentProps = {
     onClick: (props: OnAnnotationClickPayload) => void;
     useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
     'data-mark-type': string;
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
-    'aria-details'?: undefined;
     id: string;
 } | {
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
@@ -28,7 +28,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
-    'aria-details'?: undefined;
     id: string;
 } | {
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
@@ -36,6 +35,10 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    role?: undefined;
+    tabIndex?: undefined;
+    onKeyDown?: undefined;
+    'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
     id: string;
@@ -46,8 +49,39 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-type': string;
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
+    role?: undefined;
+    tabIndex?: undefined;
+    onKeyDown?: undefined;
+    'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
     id: string;
-}, HTMLElement>;
+} | {
+    css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    role: string;
+    tabIndex: number;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    'aria-expanded': boolean;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    role: string;
+    tabIndex: number;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    'aria-expanded': boolean;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, string | React.JSXElementConstructor<any>>;
 export {};

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import type React from 'react';
 import type { OnAnnotationClickPayload } from '@atlaskit/editor-common/types';
 import type { AnnotationId, AnnotationDataAttributes } from '@atlaskit/adf-schema';
@@ -11,14 +12,13 @@ type MarkComponentProps = {
     onClick: (props: OnAnnotationClickPayload) => void;
     useBlockLevel?: boolean;
 };
-export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.DetailedReactHTMLElement<{
+export declare const MarkComponent: ({ annotationParentIds, children, dataAttributes, id, state, hasFocus, onClick, useBlockLevel, }: React.PropsWithChildren<MarkComponentProps>) => React.ReactElement<{
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
     'data-mark-type': string;
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
-    'aria-details'?: undefined;
     id: string;
 } | {
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
@@ -28,7 +28,6 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
-    'aria-details'?: undefined;
     id: string;
 } | {
     css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
@@ -36,6 +35,10 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    role?: undefined;
+    tabIndex?: undefined;
+    onKeyDown?: undefined;
+    'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
     id: string;
@@ -46,8 +49,39 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-type': string;
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
+    role?: undefined;
+    tabIndex?: undefined;
+    onKeyDown?: undefined;
+    'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
     id: string;
-}, HTMLElement>;
+} | {
+    css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
+    role: string;
+    tabIndex: number;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    'aria-expanded': boolean;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+} | {
+    css?: (() => import("@emotion/react").SerializedStyles)[] | undefined;
+    'data-mark-annotation-state': AnnotationMarkStates;
+    'data-has-focus': boolean;
+    'data-mark-type': string;
+    'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
+    'data-id': string;
+    role: string;
+    tabIndex: number;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    'aria-expanded': boolean;
+    'aria-details': string;
+    'aria-disabled'?: undefined;
+    id: string;
+}, string | React.JSXElementConstructor<any>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.36.0",
+	"version": "109.37.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,13 +31,14 @@
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/button": "^18.0.0",
 		"@atlaskit/code": "^15.3.0",
-		"@atlaskit/editor-common": "^82.14.0",
+		"@atlaskit/editor-common": "^83.1.0",
 		"@atlaskit/editor-json-transformer": "^8.14.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
 		"@atlaskit/editor-shared-styles": "^2.12.0",
 		"@atlaskit/emoji": "^67.6.0",
-		"@atlaskit/icon": "^22.4.0",
+		"@atlaskit/feature-gate-js-client": "^4.18.0",
+		"@atlaskit/icon": "^22.5.0",
 		"@atlaskit/link-datasource": "^2.4.0",
 		"@atlaskit/media-card": "^77.12.0",
 		"@atlaskit/media-client": "^27.3.0",