@atlaskit/editor-plugin-table 17.3.20 → 17.3.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 17.3.21
+
+### Patch Changes
+
+- [`dece098c3ab1f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dece098c3ab1f) -
+  [ux] ENGHEALTH-46818 Add focus and blur handlers to table buttons to fix a11y
+- Updated dependencies
+
 ## 17.3.20
 
 ### Patch Changes

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

@@ -42,6 +42,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     previewHeight = _ref.previewHeight,
     _onMouseOver = _ref.onMouseOver,
     _onMouseOut = _ref.onMouseOut,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
     toggleDragMenu = _ref.toggleDragMenu,
     hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
@@ -203,19 +205,21 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
-    "aria-haspopup": "menu"
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    "aria-haspopup": "menu",
     onMouseOver: function onMouseOver(e) {
       setIsHovered(true);
       _onMouseOver && _onMouseOver(e);
-    }
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    },
     onMouseOut: function onMouseOut(e) {
       setIsHovered(false);
       _onMouseOut && _onMouseOut(e);
     },
+    onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (e) {
+      onFocus && onFocus(e);
+    } : undefined,
+    onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (e) {
+      onBlur && onBlur(e);
+    } : undefined,
     onMouseUp: function onMouseUp(e) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -38,6 +38,7 @@ var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/cor
 var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
 var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
@@ -749,10 +750,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         userIntent: "tableContextualMenuPopupOpen",
         api: api
       }, (0, _react2.jsx)("div", {
-        "data-testid": "table-cell-contextual-menu"
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
+        "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu,
+        onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
         ref: this.dropdownMenuRef
       }, (0, _react2.jsx)(_uiMenu.DropdownMenu
       //This needs be removed when the a11y is completely handled

package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../../types");
 var DeleteButton = function DeleteButton(_ref) {
   var style = _ref.style,
@@ -20,13 +21,11 @@ var DeleteButton = function DeleteButton(_ref) {
     className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: style
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseEnter: onMouseEnter
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseLeave: onMouseLeave
+    style: style,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseEnter : undefined,
+    onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-label": formatMessage(removeLabel, {

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -11,6 +11,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
@@ -189,6 +190,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -18,6 +18,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -98,13 +99,11 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
         }),
-        onClick: this.selectTable
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
-        onMouseOver: this.hoverTable
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
-        onMouseOut: this.clearHoverSelection
+        onClick: this.selectTable,
+        onMouseOver: this.hoverTable,
+        onMouseOut: this.clearHoverSelection,
+        onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.hoverTable : undefined,
+        onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
       }), !isHeaderRowEnabled &&
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -12,6 +12,7 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -49,10 +50,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     }),
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
@@ -102,10 +102,9 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     }),
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -17,6 +17,7 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
@@ -150,18 +151,18 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           "data-index": index
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
-          style: _this2.getCellStyles(index, rowHeight)
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
+          style: _this2.getCellStyles(index, rowHeight),
+          onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+            return updateCellHoverLocation(index);
+          } : undefined,
           onMouseOver: function onMouseOver() {
             return updateCellHoverLocation(index);
           }
-        }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-        _react.default.createElement("div", {
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/_react.default.createElement("div", {
           // Ignored via go/ees005
+          role: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined
           // eslint-disable-next-line react/no-array-index-key
+          ,
           key: "wrapper-".concat(index)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           ,
@@ -172,15 +173,22 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           style: _this2.getCellStyles(index, rowHeight),
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
-          }
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
+          },
+          onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+            return _this2.hoverRows(index);
+          } : undefined,
           onMouseOver: function onMouseOver() {
             return _this2.hoverRows(index);
-          }
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
-          onMouseOut: _this2.clearHoverSelection
+          },
+          tabIndex: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined,
+          onKeyDown: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (event) {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              _this2.selectRow(index, event);
+            }
+          } : undefined,
+          onMouseOut: _this2.clearHoverSelection,
+          onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined
         }, hasHeaderRow ? index > 0 ? index : null : index + 1);
       }));
     }

package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
@@ -102,15 +103,15 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
             className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, " ").concat(_types.TableCssClassName.CONTROLS_BUTTON),
             onClick: function onClick(event) {
               return _this2.props.selectRow(startIndex, event.shiftKey);
-            }
-            // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-            ,
+            },
             onMouseOver: function onMouseOver() {
               return _this2.props.hoverRows([startIndex]);
-            }
-            // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-            ,
+            },
+            onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+              return _this2.props.hoverRows([startIndex]);
+            } : undefined,
             onMouseOut: _this2.clearHoverSelection,
+            onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined,
             "data-start-index": startIndex,
             "data-end-index": endIndex
           }), /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -186,6 +186,8 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

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

@@ -108,6 +108,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     className: wrapperClassName,
     css: [(0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && !(0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_7') && styles]
   }, (0, _react2.jsx)("div", {
+    role: "none",
     onMouseDown: function onMouseDown(e) {
       return !isDragAndDropEnabled && e.preventDefault();
     }

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

@@ -28,6 +28,8 @@ const DragHandleComponent = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
+  onFocus,
+  onBlur,
   toggleDragMenu,
   hoveredCell,
   onClick,
@@ -195,19 +197,21 @@ const DragHandleComponent = ({
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
-    "aria-haspopup": "menu"
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    "aria-haspopup": "menu",
     onMouseOver: e => {
       setIsHovered(true);
       onMouseOver && onMouseOver(e);
-    }
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    },
     onMouseOut: e => {
       setIsHovered(false);
       onMouseOut && onMouseOut(e);
     },
+    onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? e => {
+      onFocus && onFocus(e);
+    } : undefined,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? e => {
+      onBlur && onBlur(e);
+    } : undefined,
     onMouseUp: e => {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -31,6 +31,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -807,10 +808,9 @@ export class ContextualMenu extends Component {
       userIntent: "tableContextualMenuPopupOpen",
       api: api
     }, jsx("div", {
-      "data-testid": "table-cell-contextual-menu"
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
+      "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
       ref: this.dropdownMenuRef
     }, jsx(DropdownMenu
     //This needs be removed when the a11y is completely handled

package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 const DeleteButton = ({
   style,
@@ -15,13 +16,11 @@ const DeleteButton = ({
   className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   ,
-  style: style
-  // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-  ,
-  onMouseEnter: onMouseEnter
-  // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-  ,
-  onMouseLeave: onMouseLeave
+  style: style,
+  onMouseEnter: onMouseEnter,
+  onMouseLeave: onMouseLeave,
+  onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseEnter : undefined,
+  onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
 }, /*#__PURE__*/React.createElement("button", {
   type: "button",
   "aria-label": formatMessage(removeLabel, {

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -6,6 +6,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -186,6 +187,8 @@ export const ColumnControls = ({
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -5,6 +5,7 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 // Ignored via go/ees005
@@ -82,13 +83,11 @@ class CornerControlComponent extends Component {
       className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
         danger: isActive && isInDanger
       }),
-      onClick: this.selectTable
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
-      onMouseOver: this.hoverTable
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
-      onMouseOut: this.clearHoverSelection
+      onClick: this.selectTable,
+      onMouseOver: this.hoverTable,
+      onMouseOut: this.clearHoverSelection,
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.hoverTable : undefined,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
     }), !isHeaderRowEnabled &&
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -4,6 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 const DragCornerControlsComponent = ({
@@ -49,10 +50,9 @@ const DragCornerControlsComponent = ({
     }),
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
@@ -110,10 +110,9 @@ const DragCornerControlsComponentWithSelection = ({
     }),
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_CORNER_BUTTON_INNER

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -134,16 +135,14 @@ export default class NumberColumn extends Component {
       "data-index": index
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: this.getCellStyles(index, rowHeight)
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
+      style: this.getCellStyles(index, rowHeight),
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => updateCellHoverLocation(index) : undefined,
       onMouseOver: () => updateCellHoverLocation(index)
-    }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-    React.createElement("div", {
+    }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
       // Ignored via go/ees005
+      role: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined
       // eslint-disable-next-line react/no-array-index-key
+      ,
       key: `wrapper-${index}`
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -152,13 +151,18 @@ export default class NumberColumn extends Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
       style: this.getCellStyles(index, rowHeight),
-      onClick: event => this.selectRow(index, event)
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
-      onMouseOver: () => this.hoverRows(index)
-      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-      ,
-      onMouseOut: this.clearHoverSelection
+      onClick: event => this.selectRow(index, event),
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => this.hoverRows(index) : undefined,
+      onMouseOver: () => this.hoverRows(index),
+      tabIndex: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined,
+      onKeyDown: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          this.selectRow(index, event);
+        }
+      } : undefined,
+      onMouseOut: this.clearHoverSelection,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
     }, hasHeaderRow ? index > 0 ? index : null : index + 1)));
   }
 }

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -81,13 +82,11 @@ class RowControlsComponent extends Component {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           ,
           className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
-          onClick: event => this.props.selectRow(startIndex, event.shiftKey)
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
-          onMouseOver: () => this.props.hoverRows([startIndex])
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
+          onClick: event => this.props.selectRow(startIndex, event.shiftKey),
+          onMouseOver: () => this.props.hoverRows([startIndex]),
+          onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => this.props.hoverRows([startIndex]) : undefined,
           onMouseOut: this.clearHoverSelection,
+          onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined,
           "data-start-index": startIndex,
           "data-end-index": endIndex
         }), /*#__PURE__*/React.createElement("div", {

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -175,6 +175,8 @@ export const DragControls = ({
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

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

@@ -109,6 +109,7 @@ export const TableFloatingControls = ({
     className: wrapperClassName,
     css: [expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && !fg('platform_editor_table_sticky_header_patch_7') && styles]
   }, jsx("div", {
+    role: "none",
     onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
   }, isNumberColumnEnabled ? jsx(NumberColumn, {
     editorView: editorView,

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

@@ -33,6 +33,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     previewHeight = _ref.previewHeight,
     _onMouseOver = _ref.onMouseOver,
     _onMouseOut = _ref.onMouseOut,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
     toggleDragMenu = _ref.toggleDragMenu,
     hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
@@ -194,19 +196,21 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
-    "aria-haspopup": "menu"
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    "aria-haspopup": "menu",
     onMouseOver: function onMouseOver(e) {
       setIsHovered(true);
       _onMouseOver && _onMouseOver(e);
-    }
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    },
     onMouseOut: function onMouseOut(e) {
       setIsHovered(false);
       _onMouseOut && _onMouseOut(e);
     },
+    onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (e) {
+      onFocus && onFocus(e);
+    } : undefined,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (e) {
+      onBlur && onBlur(e);
+    } : undefined,
     onMouseUp: function onMouseUp(e) {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -41,6 +41,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -743,10 +744,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         userIntent: "tableContextualMenuPopupOpen",
         api: api
       }, jsx("div", {
-        "data-testid": "table-cell-contextual-menu"
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
+        "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu,
+        onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
         ref: this.dropdownMenuRef
       }, jsx(DropdownMenu
       //This needs be removed when the a11y is completely handled

package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../types';
 var DeleteButton = function DeleteButton(_ref) {
   var style = _ref.style,
@@ -13,13 +14,11 @@ var DeleteButton = function DeleteButton(_ref) {
     className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: style
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseEnter: onMouseEnter
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseLeave: onMouseLeave
+    style: style,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseEnter : undefined,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? onMouseLeave : undefined
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": formatMessage(removeLabel, {

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -6,6 +6,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
@@ -181,6 +182,8 @@ export var ColumnControls = function ColumnControls(_ref) {
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -12,6 +12,7 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 // Ignored via go/ees005
@@ -89,13 +90,11 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
           danger: isActive && isInDanger
         }),
-        onClick: this.selectTable
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
-        onMouseOver: this.hoverTable
-        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-        ,
-        onMouseOut: this.clearHoverSelection
+        onClick: this.selectTable,
+        onMouseOver: this.hoverTable,
+        onMouseOut: this.clearHoverSelection,
+        onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.hoverTable : undefined,
+        onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
       }), !isHeaderRowEnabled &&
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -4,6 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
@@ -40,10 +41,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     }),
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
@@ -93,10 +93,9 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     }),
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
-    onClick: handleOnClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
+    onClick: handleOnClick,
     onMouseOut: handleMouseOut,
+    onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_CORNER_BUTTON_INNER

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -11,6 +11,7 @@ import classnames from 'classnames';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -141,18 +142,18 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           "data-index": index
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
-          style: _this2.getCellStyles(index, rowHeight)
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
+          style: _this2.getCellStyles(index, rowHeight),
+          onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+            return updateCellHoverLocation(index);
+          } : undefined,
           onMouseOver: function onMouseOver() {
             return updateCellHoverLocation(index);
           }
-        }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlassian/a11y/no-static-element-interactions
-        React.createElement("div", {
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
           // Ignored via go/ees005
+          role: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined
           // eslint-disable-next-line react/no-array-index-key
+          ,
           key: "wrapper-".concat(index)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           ,
@@ -163,15 +164,22 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           style: _this2.getCellStyles(index, rowHeight),
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
-          }
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
+          },
+          onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+            return _this2.hoverRows(index);
+          } : undefined,
           onMouseOver: function onMouseOver() {
             return _this2.hoverRows(index);
-          }
-          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-          ,
-          onMouseOut: _this2.clearHoverSelection
+          },
+          tabIndex: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined,
+          onKeyDown: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function (event) {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              _this2.selectRow(index, event);
+            }
+          } : undefined,
+          onMouseOut: _this2.clearHoverSelection,
+          onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined
         }, hasHeaderRow ? index > 0 ? index : null : index + 1);
       }));
     }

package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -9,6 +9,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -93,15 +94,15 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
             className: "".concat(ClassName.ROW_CONTROLS_BUTTON, " ").concat(ClassName.CONTROLS_BUTTON),
             onClick: function onClick(event) {
               return _this2.props.selectRow(startIndex, event.shiftKey);
-            }
-            // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-            ,
+            },
             onMouseOver: function onMouseOver() {
               return _this2.props.hoverRows([startIndex]);
-            }
-            // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-            ,
+            },
+            onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? function () {
+              return _this2.props.hoverRows([startIndex]);
+            } : undefined,
             onMouseOut: _this2.clearHoverSelection,
+            onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? _this2.clearHoverSelection : undefined,
             "data-start-index": startIndex,
             "data-end-index": endIndex
           }), /*#__PURE__*/React.createElement("div", {

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -177,6 +177,8 @@ export var DragControls = function DragControls(_ref) {
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
+      onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
+      onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOver : undefined,
       toggleDragMenu: toggleDragMenuHandler,
       editorView: editorView
     }));

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

@@ -100,6 +100,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
     className: wrapperClassName,
     css: [expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && !fg('platform_editor_table_sticky_header_patch_7') && styles]
   }, jsx("div", {
+    role: "none",
     onMouseDown: function onMouseDown(e) {
       return !isDragAndDropEnabled && e.preventDefault();
     }

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

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, FocusEventHandler } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -13,7 +13,9 @@ type DragHandleProps = {
     hoveredCell?: CellHoverMeta;
     indexes: number[];
     isDragMenuTarget: boolean;
+    onBlur?: FocusEventHandler;
     onClick?: MouseEventHandler;
+    onFocus?: FocusEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     previewHeight?: number;

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

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, FocusEventHandler } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -13,7 +13,9 @@ type DragHandleProps = {
     hoveredCell?: CellHoverMeta;
     indexes: number[];
     isDragMenuTarget: boolean;
+    onBlur?: FocusEventHandler;
     onClick?: MouseEventHandler;
+    onFocus?: FocusEventHandler;
     onMouseOut?: MouseEventHandler;
     onMouseOver?: MouseEventHandler;
     previewHeight?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "17.3.20",
+	"version": "17.3.21",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^7.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^7.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
-		"@atlaskit/editor-plugin-extension": "10.1.2",
+		"@atlaskit/editor-plugin-extension": "10.1.3",
 		"@atlaskit/editor-plugin-guideline": "^7.0.0",
 		"@atlaskit/editor-plugin-interaction": "^14.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^4.0.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^26.0.0",
+		"@atlaskit/tmp-editor-statsig": "^27.1.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",