@atlaskit/editor-common 111.1.0 → 111.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-common
 
+## 111.2.0
+
+### Minor 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.
+
+### Patch Changes
+
+- [`38bc4d5d6185c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38bc4d5d6185c) -
+  Fixes nested tables in SSR renderer
+- Updated dependencies
+
 ## 111.1.0
 
 ### Minor Changes

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

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _shadowObserver = require("./shadowObserver");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -163,13 +164,23 @@ function overflowShadow(Component, options) {
           showLeftShadow = _this$state.showLeftShadow,
           showRightShadow = _this$state.showRightShadow;
         var classNames = [!((_this$props = this.props) !== null && _this$props !== void 0 && _this$props.disableTableOverflowShadow) && showRightShadow && shadowClassNames.RIGHT_SHADOW, !((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.disableTableOverflowShadow) && showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && _shadowObserver.shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
+
+        /**
+         * The widths have already been calculated to determine
+         * showRightShadow and showLeftShadow. If either is true,
+         * then the content is scrollable and we need to set the
+         * tabIndex to 0 to allow the user to scroll the content
+         * for a11y purposes.
+         */
+        var hasOverflowScroll = showRightShadow || showLeftShadow;
         return (
           /*#__PURE__*/
           // Ignored via go/ees005
-          // eslint-disable-next-line react/jsx-props-no-spreading
           _react.default.createElement(Component, (0, _extends2.default)({
             handleRef: this.handleContainer,
+            tabIndex: hasOverflowScroll && (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? 0 : undefined,
             shadowClassNames: classNames
+            // eslint-disable-next-line react/jsx-props-no-spreading
           }, this.props))
         );
       }

package/dist/cjs/utils/processRawValue.js

@@ -11,6 +11,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("../analytics");
+var _utilities = require("../nesting/utilities");
 var _privacyFilter = require("./filter/privacy-filter");
 var _trackUnsupportedContent = require("./track-unsupported-content");
 var _validateUsingSpec = require("./validate-using-spec");
@@ -234,7 +235,10 @@ function processRawValue(schema, value, providerFactory, sanitizePrivateContent,
     if ((0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
       // Validate ADF first before converting nested-table extensions into nested tables
       // This matches the renderer's behavior in render-document.ts
-      entity = (0, _validateUsingSpec.validateADFEntity)(schema, transformedAdf || node, dispatchAnalyticsEvent);
+      var allowNestedTables = (0, _utilities.isNestedTablesSupported)(schema);
+      entity = (0, _validateUsingSpec.validateADFEntity)(schema, transformedAdf || node, dispatchAnalyticsEvent, allowNestedTables ? {
+        allowNestedTables: allowNestedTables
+      } : undefined);
 
       // Convert nested-table extensions into nested tables
       var _transformNestedTable3 = transformNestedTablesWithAnalytics(entity, dispatchAnalyticsEvent);

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export const shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
@@ -135,13 +136,23 @@ export default function overflowShadow(Component, options) {
         showRightShadow
       } = this.state;
       const classNames = [!((_this$props = this.props) !== null && _this$props !== void 0 && _this$props.disableTableOverflowShadow) && showRightShadow && shadowClassNames.RIGHT_SHADOW, !((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.disableTableOverflowShadow) && showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
+
+      /**
+       * The widths have already been calculated to determine
+       * showRightShadow and showLeftShadow. If either is true,
+       * then the content is scrollable and we need to set the
+       * tabIndex to 0 to allow the user to scroll the content
+       * for a11y purposes.
+       */
+      const hasOverflowScroll = showRightShadow || showLeftShadow;
       return (
         /*#__PURE__*/
         // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
         React.createElement(Component, _extends({
           handleRef: this.handleContainer,
+          tabIndex: hasOverflowScroll && fg('platform_editor_dec_a11y_fixes') ? 0 : undefined,
           shadowClassNames: classNames
+          // eslint-disable-next-line react/jsx-props-no-spreading
         }, this.props))
       );
     }

package/dist/es2019/utils/processRawValue.js

@@ -3,6 +3,7 @@ import { Fragment, Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { isNestedTablesSupported } from '../nesting/utilities';
 import { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 import { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
 import { validateADFEntity } from './validate-using-spec';
@@ -233,7 +234,10 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
     if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
       // Validate ADF first before converting nested-table extensions into nested tables
       // This matches the renderer's behavior in render-document.ts
-      entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent);
+      const allowNestedTables = isNestedTablesSupported(schema);
+      entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent, allowNestedTables ? {
+        allowNestedTables
+      } : undefined);
 
       // Convert nested-table extensions into nested tables
       ({

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

@@ -8,6 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export var shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
@@ -155,13 +156,23 @@ export default function overflowShadow(Component, options) {
           showLeftShadow = _this$state.showLeftShadow,
           showRightShadow = _this$state.showRightShadow;
         var classNames = [!((_this$props = this.props) !== null && _this$props !== void 0 && _this$props.disableTableOverflowShadow) && showRightShadow && shadowClassNames.RIGHT_SHADOW, !((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.disableTableOverflowShadow) && showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
+
+        /**
+         * The widths have already been calculated to determine
+         * showRightShadow and showLeftShadow. If either is true,
+         * then the content is scrollable and we need to set the
+         * tabIndex to 0 to allow the user to scroll the content
+         * for a11y purposes.
+         */
+        var hasOverflowScroll = showRightShadow || showLeftShadow;
         return (
           /*#__PURE__*/
           // Ignored via go/ees005
-          // eslint-disable-next-line react/jsx-props-no-spreading
           React.createElement(Component, _extends({
             handleRef: this.handleContainer,
+            tabIndex: hasOverflowScroll && fg('platform_editor_dec_a11y_fixes') ? 0 : undefined,
             shadowClassNames: classNames
+            // eslint-disable-next-line react/jsx-props-no-spreading
           }, this.props))
         );
       }

package/dist/esm/utils/processRawValue.js

@@ -3,6 +3,7 @@ import { Fragment, Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { isNestedTablesSupported } from '../nesting/utilities';
 import { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 import { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
 import { validateADFEntity } from './validate-using-spec';
@@ -226,7 +227,10 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
     if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
       // Validate ADF first before converting nested-table extensions into nested tables
       // This matches the renderer's behavior in render-document.ts
-      entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent);
+      var allowNestedTables = isNestedTablesSupported(schema);
+      entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent, allowNestedTables ? {
+        allowNestedTables: allowNestedTables
+      } : undefined);
 
       // Convert nested-table extensions into nested tables
       var _transformNestedTable3 = transformNestedTablesWithAnalytics(entity, dispatchAnalyticsEvent);

package/dist/types/ui/OverflowShadow/index.d.ts

@@ -8,6 +8,7 @@ export interface OverflowShadowProps {
     disableTableOverflowShadow?: boolean;
     handleRef?: (ref: HTMLElement | null) => void;
     shadowClassNames?: string;
+    tabIndex?: number;
 }
 export interface OverflowShadowState {
     showLeftShadow: boolean;

package/dist/types-ts4.5/ui/OverflowShadow/index.d.ts

@@ -8,6 +8,7 @@ export interface OverflowShadowProps {
     disableTableOverflowShadow?: boolean;
     handleRef?: (ref: HTMLElement | null) => void;
     shadowClassNames?: string;
+    tabIndex?: number;
 }
 export interface OverflowShadowState {
     showLeftShadow: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "111.1.0",
+	"version": "111.2.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"