@atlaskit/renderer 125.0.0 → 125.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 125.0.2
+
+### Patch Changes
+
+- [`ba0e1d49e14cb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba0e1d49e14cb) -
+  ENGHEALTH-40073: Make tables and extensions focusable if they have overscroll so that they can be
+  interacted with in an accessible way.
+- Updated dependencies
+
+## 125.0.1
+
+### Patch Changes
+
+- [`b429c01ce6af9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b429c01ce6af9) -
+  icon migration entry point update
+- Updated dependencies
+
 ## 125.0.0
 
 ### Patch Changes

package/dist/cjs/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _copy = _interopRequireDefault(require("@atlaskit/icon/core/migration/copy"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react = require("@emotion/react");
 var _react2 = require("react");

package/dist/cjs/react/nodes/extension.js

@@ -85,7 +85,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, (0, _react.jsx)("div", {
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
       className: overflowContainerClass,
       css: [(0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
@@ -106,7 +108,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       "data-layout": layout,
       "data-local-id": localId
     }, (0, _react.jsx)("div", {
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
       className: overflowContainerClass,
       css: [(0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
@@ -137,7 +141,8 @@ var Extension = function Extension(props) {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
-          shadowClassNames: shadowClassNames
+          shadowClassNames: shadowClassNames,
+          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -149,7 +154,8 @@ var Extension = function Extension(props) {
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
-      shadowClassNames: shadowClassNames
+      shadowClassNames: shadowClassNames,
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
   });
 };

package/dist/cjs/react/nodes/heading-anchor.js

@@ -18,7 +18,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = require("../../messages");
 var _excluded = ["children"];

package/dist/cjs/react/nodes/table.js

@@ -130,13 +130,6 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
  * This TableWrapper component was created to make sure that the aria-label can be
  * internationalized without needing to add `intl` to the TableContainer.
  *
- * @param {TableWrapperProps} root0 - The props object.
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
- * @returns The rendered table wrapper component.
- * @example
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
  *   <Table>...</Table>
  * </TableWrapper>
@@ -145,7 +138,8 @@ var TableWrapper = function TableWrapper(_ref2) {
   var children = _ref2.children,
     wrapperRef = _ref2.wrapperRef,
     onScroll = _ref2.onScroll,
-    stickyHeaders = _ref2.stickyHeaders;
+    stickyHeaders = _ref2.stickyHeaders,
+    tabIndex = _ref2.tabIndex;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -156,7 +150,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
     // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
-    tabIndex: 0,
+    tabIndex: tabIndex,
     role: "region",
     "aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
   }, children);
@@ -560,10 +554,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), (0, _platformFeatureFlags.fg)('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
+      }, [children && children[0]]), (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
         wrapperRef: this.wrapperRef,
         onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
-        stickyHeaders: stickyHeaders
+        stickyHeaders: stickyHeaders,
+        tabIndex: this.props.tabIndex
       }, /*#__PURE__*/_react.default.createElement(_table.Table, {
         innerRef: this.tableRef,
         columnWidths: columnWidths,

package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -4,7 +4,7 @@
  */
 import Button from '@atlaskit/button/custom-theme-button';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
-import CopyIcon from '@atlaskit/icon/core/migration/copy';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import Tooltip from '@atlaskit/tooltip';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/es2019/react/nodes/extension.js

@@ -69,7 +69,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, jsx("div", {
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
       className: overflowContainerClass,
       css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
@@ -90,7 +92,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
     "data-layout": layout,
     "data-local-id": localId
   }, jsx("div", {
+    tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
     className: overflowContainerClass,
     css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
   }, content)));
@@ -121,7 +125,8 @@ const Extension = props => {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
           handleRef,
-          shadowClassNames
+          shadowClassNames,
+          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -133,7 +138,8 @@ const Extension = props => {
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef,
-      shadowClassNames
+      shadowClassNames,
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
   });
 };

package/dist/es2019/react/nodes/heading-anchor.js

@@ -9,7 +9,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import Tooltip from '@atlaskit/tooltip';
 import { headingAnchorLinkMessages } from '../../messages';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';

package/dist/es2019/react/nodes/table.js

@@ -99,13 +99,6 @@ export const isHeaderRowEnabled = rows => {
  * This TableWrapper component was created to make sure that the aria-label can be
  * internationalized without needing to add `intl` to the TableContainer.
  *
- * @param {TableWrapperProps} root0 - The props object.
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
- * @returns The rendered table wrapper component.
- * @example
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
  *   <Table>...</Table>
  * </TableWrapper>
@@ -114,7 +107,8 @@ const TableWrapper = ({
   children,
   wrapperRef,
   onScroll,
-  stickyHeaders
+  stickyHeaders,
+  tabIndex
 }) => {
   const {
     formatMessage
@@ -127,7 +121,7 @@ const TableWrapper = ({
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
     // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
-    tabIndex: 0,
+    tabIndex: tabIndex,
     role: "region",
     "aria-label": formatMessage(tableMessages.tableScrollRegion)
   }, children);
@@ -503,10 +497,11 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       allowTableResizing: allowTableResizing
-    }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+    }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
       wrapperRef: this.wrapperRef,
       onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
-      stickyHeaders: stickyHeaders
+      stickyHeaders: stickyHeaders,
+      tabIndex: this.props.tabIndex
     }, /*#__PURE__*/React.createElement(Table, {
       innerRef: this.tableRef,
       columnWidths: columnWidths,

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import Button from '@atlaskit/button/custom-theme-button';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
-import CopyIcon from '@atlaskit/icon/core/migration/copy';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import Tooltip from '@atlaskit/tooltip';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/esm/react/nodes/extension.js

@@ -77,7 +77,9 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-testid": "extension--wrapper",
       "data-node-type": "extension"
     }, jsx("div", {
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
       className: overflowContainerClass,
       css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
@@ -98,7 +100,9 @@ export var renderExtension = function renderExtension(content, layout) {
       "data-layout": layout,
       "data-local-id": localId
     }, jsx("div", {
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? options.tabIndex : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
       className: overflowContainerClass,
       css: [fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
@@ -129,7 +133,8 @@ var Extension = function Extension(props) {
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
-          shadowClassNames: shadowClassNames
+          shadowClassNames: shadowClassNames,
+          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -141,7 +146,8 @@ var Extension = function Extension(props) {
     return renderExtension(text || 'extension', layout, {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
-      shadowClassNames: shadowClassNames
+      shadowClassNames: shadowClassNames,
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId);
   });
 };

package/dist/esm/react/nodes/heading-anchor.js

@@ -20,7 +20,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import Tooltip from '@atlaskit/tooltip';
 import { headingAnchorLinkMessages } from '../../messages';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';

package/dist/esm/react/nodes/table.js

@@ -123,13 +123,6 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
  * This TableWrapper component was created to make sure that the aria-label can be
  * internationalized without needing to add `intl` to the TableContainer.
  *
- * @param {TableWrapperProps} root0 - The props object.
- * @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
- * @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
- * @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
- * @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
- * @returns The rendered table wrapper component.
- * @example
  * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
  *   <Table>...</Table>
  * </TableWrapper>
@@ -138,7 +131,8 @@ var TableWrapper = function TableWrapper(_ref2) {
   var children = _ref2.children,
     wrapperRef = _ref2.wrapperRef,
     onScroll = _ref2.onScroll,
-    stickyHeaders = _ref2.stickyHeaders;
+    stickyHeaders = _ref2.stickyHeaders,
+    tabIndex = _ref2.tabIndex;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement("div", {
@@ -149,7 +143,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
     // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
     ,
-    tabIndex: 0,
+    tabIndex: tabIndex,
     role: "region",
     "aria-label": formatMessage(tableMessages.tableScrollRegion)
   }, children);
@@ -553,10 +547,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing
-      }, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
+      }, [children && children[0]]), fg('platform_editor_dec_a11y_fixes') ? /*#__PURE__*/React.createElement(TableWrapper, {
         wrapperRef: this.wrapperRef,
         onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
-        stickyHeaders: stickyHeaders
+        stickyHeaders: stickyHeaders,
+        tabIndex: this.props.tabIndex
       }, /*#__PURE__*/React.createElement(Table, {
         innerRef: this.tableRef,
         columnWidths: columnWidths,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "125.0.0",
+	"version": "125.0.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
 		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/adf-utils": "^19.26.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
-		"@atlaskit/analytics-listeners": "^9.1.0",
+		"@atlaskit/analytics-listeners": "^9.2.0",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/browser-apis": "^0.0.1",
@@ -39,11 +39,11 @@
 		"@atlaskit/emoji": "^69.9.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/link-datasource": "^4.30.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.9.0",
-		"@atlaskit/media-card": "^79.11.0",
+		"@atlaskit/media-card": "^79.12.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.16.0",
-		"@atlaskit/smart-card": "^43.17.0",
+		"@atlaskit/smart-card": "^43.18.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.0.0",
+		"@atlaskit/editor-common": "^111.2.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -81,7 +81,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
-		"@atlaskit/checkbox": "^17.2.0",
+		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/link-test-helpers": "^9.0.0",
 		"@atlaskit/media-core": "^37.0.0",
@@ -170,9 +170,6 @@
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
 		},
-		"editor_enghealth_focusable_scrollable_tables": {
-			"type": "boolean"
-		},
 		"platform_editor_comments_api_manager": {
 			"type": "boolean"
 		},