@atlaskit/editor-plugin-table 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 0.0.9
+
+### Patch Changes
+
+- [`30d47a9f80d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30d47a9f80d) - This change adds data-testid to the top and bottom sticky sentinels in TableComponent and updates tests to access the sentinels by the testId.
+
+## 0.0.8
+
+### Patch Changes
+
+- [`e5b0deecf68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5b0deecf68) - Add ability to localize for nodeview and add aria labels to RowControl and CornerControl
+
 ## 0.0.7
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -558,7 +558,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-number-column": node.attrs.isNumberColumnEnabled,
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
+        "data-testid": "sticky-sentinel-top"
       }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
@@ -598,7 +599,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       })), stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+        "data-testid": "sticky-sentinel-bottom"
       }));
     }
   }]);

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -81,7 +81,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
 
     (0, _classCallCheck2.default)(this, TableView);
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNode", function () {
       return _this.node;
     });
@@ -250,6 +250,7 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
   var _getEditorFeatureFlag = getEditorFeatureFlags(),
       tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
+  var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
@@ -260,7 +261,8 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     options: options,
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    hasIntlContext: hasIntlContext
   }).init();
 };
 

package/dist/cjs/plugins/table/toolbar.js

@@ -41,7 +41,6 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils2 = require("@atlaskit/editor-common/utils");
 
-// TODO: ED-14403 investigate why these translations don't work
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CornerControls = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -43,15 +45,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-var CornerControls = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CornerControls, _Component);
+var messages = (0, _reactIntlNext.defineMessages)({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
+
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CornerControlComponent, _Component);
 
-  var _super = _createSuper(CornerControls);
+  var _super = _createSuper(CornerControlComponent);
 
-  function CornerControls() {
+  function CornerControlComponent() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, CornerControls);
+    (0, _classCallCheck2.default)(this, CornerControlComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -93,14 +103,15 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(CornerControls, [{
+  (0, _createClass2.default)(CornerControlComponent, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           isInDanger = _this$props2.isInDanger,
           tableRef = _this$props2.tableRef,
           isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled;
+          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+          formatMessage = _this$props2.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -116,6 +127,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         }
       }, /*#__PURE__*/_react.default.createElement("button", {
+        "aria-label": formatMessage(messages.cornerControl),
         type: "button",
         className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
@@ -134,7 +146,8 @@ var CornerControls = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-  return CornerControls;
+  return CornerControlComponent;
 }(_react.Component);
 
-exports.default = CornerControls;
+var CornerControls = (0, _reactIntlNext.injectIntl)(CornerControlComponent);
+exports.CornerControls = CornerControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.RowControls = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _commands = require("../../../commands");
 
 var _types = require("../../../types");
@@ -41,15 +43,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-var RowControls = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(RowControls, _Component);
+var messages = (0, _reactIntlNext.defineMessages)({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+
+var RowControlsComponent = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RowControlsComponent, _Component);
 
-  var _super = _createSuper(RowControls);
+  var _super = _createSuper(RowControlsComponent);
 
-  function RowControls() {
+  function RowControlsComponent() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, RowControls);
+    (0, _classCallCheck2.default)(this, RowControlsComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -65,7 +75,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(RowControls, [{
+  (0, _createClass2.default)(RowControlsComponent, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -75,7 +85,8 @@ var RowControls = /*#__PURE__*/function (_Component) {
           tableRef = _this$props.tableRef,
           hoveredRows = _this$props.hoveredRows,
           isInDanger = _this$props.isInDanger,
-          isResizing = _this$props.isResizing;
+          isResizing = _this$props.isResizing,
+          formatMessage = _this$props.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -112,6 +123,7 @@ var RowControls = /*#__PURE__*/function (_Component) {
             paddingTop: thisRowSticky ? "".concat(_consts.tableControlsSpacing, "px") : undefined
           }
         }, /*#__PURE__*/_react.default.createElement("button", {
+          "aria-label": formatMessage(messages.rowControl),
           type: "button",
           className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, "\n                  ").concat(_types.TableCssClassName.CONTROLS_BUTTON, "\n                "),
           onClick: function onClick(event) {
@@ -129,7 +141,8 @@ var RowControls = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-  return RowControls;
+  return RowControlsComponent;
 }(_react.Component);
 
-exports.default = RowControls;
+var RowControls = (0, _reactIntlNext.injectIntl)(RowControlsComponent);
+exports.RowControls = RowControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/index.js

@@ -31,11 +31,11 @@ var _commands = require("../../commands");
 
 var _utils2 = require("../../utils");
 
-var _CornerControls = _interopRequireDefault(require("./CornerControls"));
+var _CornerControls = require("./CornerControls");
 
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
 
-var _RowControls = _interopRequireDefault(require("./RowControls"));
+var _RowControls = require("./RowControls");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -201,7 +201,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isResizing: isResizing,
         selectRow: this.selectRow,
         stickyTop: stickyTop
-      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.default, {
+      }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,
         isInDanger: isInDanger,
@@ -210,7 +210,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hoveredRows: hoveredRows,
         stickyTop: tableActive ? stickyTop : undefined
-      }), /*#__PURE__*/_react.default.createElement(_RowControls.default, {
+      }), /*#__PURE__*/_react.default.createElement(_RowControls.RowControls, {
         editorView: editorView,
         tableRef: tableRef,
         hoverRows: this.hoverRows,

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.7"
+	"version": "0.0.9"
 }

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -528,7 +528,8 @@ class TableComponent extends React.Component {
       "data-number-column": node.attrs.isNumberColumnEnabled,
       "data-layout": node.attrs.layout
     }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_TOP
+      className: ClassName.TABLE_STICKY_SENTINEL_TOP,
+      "data-testid": "sticky-sentinel-top"
     }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
       style: shadowStyle(showBeforeShadow),
       className: ClassName.TABLE_LEFT_SHADOW
@@ -567,7 +568,8 @@ class TableComponent extends React.Component {
         top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
       }
     })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
+      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+      "data-testid": "sticky-sentinel-bottom"
     }));
   }
 

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -32,7 +32,7 @@ const toDOM = (node, props) => {
 
 export default class TableView extends ReactNodeView {
   constructor(props) {
-    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
 
     _defineProperty(this, "getNode", () => {
       return this.node;
@@ -190,6 +190,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
   const {
     tableRenderOptimization
   } = getEditorFeatureFlags();
+  const hasIntlContext = true;
   return new TableView({
     node,
     view,
@@ -200,6 +201,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     options,
     tableRenderOptimization,
     getEditorContainerWidth,
-    getEditorFeatureFlags
+    getEditorFeatureFlags,
+    hasIntlContext
   }).init();
 };

package/dist/es2019/plugins/table/toolbar.js

@@ -14,8 +14,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '@atlaskit/editor-common/utils'; // TODO: ED-14403 investigate why these translations don't work
-
+import { closestElement } from '@atlaskit/editor-common/utils';
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -1,11 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
-export default class CornerControls extends Component {
+const messages = defineMessages({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
+
+class CornerControlComponent extends Component {
   constructor(...args) {
     super(...args);
 
@@ -57,7 +66,10 @@ export default class CornerControls extends Component {
       isInDanger,
       tableRef,
       isHeaderColumnEnabled,
-      isHeaderRowEnabled
+      isHeaderRowEnabled,
+      intl: {
+        formatMessage
+      }
     } = this.props;
 
     if (!tableRef) {
@@ -74,6 +86,7 @@ export default class CornerControls extends Component {
         top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
       }
     }, /*#__PURE__*/React.createElement("button", {
+      "aria-label": formatMessage(messages.cornerControl),
       type: "button",
       className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
         danger: isActive && isInDanger
@@ -92,4 +105,6 @@ export default class CornerControls extends Component {
     })));
   }
 
-}
+}
+
+export const CornerControls = injectIntl(CornerControlComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -1,10 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
-export default class RowControls extends Component {
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description: 'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.'
+  }
+});
+
+class RowControlsComponent extends Component {
   constructor(...args) {
     super(...args);
 
@@ -23,7 +32,10 @@ export default class RowControls extends Component {
       tableRef,
       hoveredRows,
       isInDanger,
-      isResizing
+      isResizing,
+      intl: {
+        formatMessage
+      }
     } = this.props;
 
     if (!tableRef) {
@@ -64,6 +76,7 @@ export default class RowControls extends Component {
           paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
         }
       }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.rowControl),
         type: "button",
         className: `${ClassName.ROW_CONTROLS_BUTTON}
                   ${ClassName.CONTROLS_BUTTON}
@@ -79,4 +92,6 @@ export default class RowControls extends Component {
     })));
   }
 
-}
+}
+
+export const RowControls = injectIntl(RowControlsComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -3,9 +3,9 @@ import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverRows, selectRow } from '../../commands';
 import { isSelectionUpdated } from '../../utils';
-import CornerControls from './CornerControls';
+import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import RowControls from './RowControls';
+import { RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.7"
+	"version": "0.0.9"
 }

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -543,7 +543,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-number-column": node.attrs.isNumberColumnEnabled,
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_TOP
+        className: ClassName.TABLE_STICKY_SENTINEL_TOP,
+        "data-testid": "sticky-sentinel-top"
       }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
@@ -583,7 +584,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
+        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+        "data-testid": "sticky-sentinel-bottom"
       }));
     }
   }]);

package/dist/esm/plugins/table/nodeviews/table.js

@@ -54,7 +54,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
     _classCallCheck(this, TableView);
 
-    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    _this = _super.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined, undefined, props.hasIntlContext);
 
     _defineProperty(_assertThisInitialized(_this), "getNode", function () {
       return _this.node;
@@ -226,6 +226,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
   var _getEditorFeatureFlag = getEditorFeatureFlags(),
       tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
+  var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
@@ -236,6 +237,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
     options: options,
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    hasIntlContext: hasIntlContext
   }).init();
 };

package/dist/esm/plugins/table/toolbar.js

@@ -15,8 +15,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '@atlaskit/editor-common/utils'; // TODO: ED-14403 investigate why these translations don't work
-
+import { closestElement } from '@atlaskit/editor-common/utils';
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -11,21 +11,29 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
+var messages = defineMessages({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
+  }
+});
 
-var CornerControls = /*#__PURE__*/function (_Component) {
-  _inherits(CornerControls, _Component);
+var CornerControlComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CornerControlComponent, _Component);
 
-  var _super = _createSuper(CornerControls);
+  var _super = _createSuper(CornerControlComponent);
 
-  function CornerControls() {
+  function CornerControlComponent() {
     var _this;
 
-    _classCallCheck(this, CornerControls);
+    _classCallCheck(this, CornerControlComponent);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -72,14 +80,15 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(CornerControls, [{
+  _createClass(CornerControlComponent, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           isInDanger = _this$props2.isInDanger,
           tableRef = _this$props2.tableRef,
           isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled;
+          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+          formatMessage = _this$props2.intl.formatMessage;
 
       if (!tableRef) {
         return null;
@@ -95,6 +104,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         }
       }, /*#__PURE__*/React.createElement("button", {
+        "aria-label": formatMessage(messages.cornerControl),
         type: "button",
         className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
@@ -114,7 +124,7 @@ var CornerControls = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return CornerControls;
+  return CornerControlComponent;
 }(Component);
 
-export { CornerControls as default };
+export var CornerControls = injectIntl(CornerControlComponent);