@atlaskit/editor-plugin-insert-block 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.1
+
+### Patch Changes
+
+- [#68670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68670) [`801899ef02f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/801899ef02f2) - [ux] Added accessibility via keyboard for arrows left, right, up and down
+- Updated dependencies
+
 ## 0.3.0
 
 ### Minor Changes

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

@@ -81,7 +81,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       isOpenedByKeyboard: false,
       buttons: [],
       dropdownItems: [],
-      isTableSelectorOpen: false
+      isTableSelectorOpen: false,
+      isTableSelectorOpenedByKeyboard: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (attrs) {
       var state = {
@@ -211,6 +212,13 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _this.togglePlusMenuVisibility();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTableSelectorOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        _this.setState({
+          isTableSelectorOpenedByKeyboard: true
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleLinkPanel", function (inputMethod) {
       var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
@@ -481,6 +489,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           isOpenedByKeyboard: false
         }));
       }
+      if (this.state.isTableSelectorOpen) {
+        this.setState({
+          isTableSelectorOpenedByKeyboard: false
+        });
+      }
     }
   }, {
     key: "renderPopup",
@@ -522,7 +535,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     key: "renderTableSelectorPopup",
     value: function renderTableSelectorPopup() {
       var _this$tableButtonRef$;
-      var isTableSelectorOpen = this.state.isTableSelectorOpen;
+      var _this$state = this.state,
+        isTableSelectorOpen = _this$state.isTableSelectorOpen,
+        isTableSelectorOpenedByKeyboard = _this$state.isTableSelectorOpenedByKeyboard;
       var _this$props13 = this.props,
         popupsMountPoint = _this$props13.popupsMountPoint,
         popupsBoundariesElement = _this$props13.popupsBoundariesElement,
@@ -538,7 +553,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
         handleClickOutside: this.handleTableSelectorClickOutside,
-        handleEscapeKeydown: this.handleTableSelectorPressEscape
+        handleEscapeKeydown: this.handleTableSelectorPressEscape,
+        isOpenedByKeyboard: isTableSelectorOpenedByKeyboard
       });
     }
   }, {
@@ -560,11 +576,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl;
-      var _this$state = this.state,
-        buttons = _this$state.buttons,
-        dropdownItems = _this$state.dropdownItems,
-        emojiPickerOpen = _this$state.emojiPickerOpen,
-        isTableSelectorOpen = _this$state.isTableSelectorOpen;
+      var _this$state2 = this.state,
+        buttons = _this$state2.buttons,
+        dropdownItems = _this$state2.dropdownItems,
+        emojiPickerOpen = _this$state2.emojiPickerOpen,
+        isTableSelectorOpen = _this$state2.isTableSelectorOpen;
       var _this$props14 = this.props,
         isDisabled = _this$props14.isDisabled,
         isReducedSpacing = _this$props14.isReducedSpacing;
@@ -649,7 +665,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
           "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
           "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
-          onItemClick: this.insertToolbarMenuItem
+          onItemClick: this.insertToolbarMenuItem,
+          onKeyDown: this.handleTableSelectorOpenByKeyboard
         })), (0, _react2.jsx)("span", {
           css: _styles.wrapperStyle
         }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {

package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TableSelectorPopup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -17,8 +18,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _tableSelectorPopup = _interopRequireWildcard(require("./table-selector-popup"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsx jsx */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var TABLE_SELECTOR_PADDING_TOP = 8;
 var TABLE_SELECTOR_PADDING_SIDE = 10;
 var DEFAULT_TABLE_SELECTOR_ROWS = 5;
@@ -26,6 +27,12 @@ var DEFAULT_TABLE_SELECTOR_COLS = 10;
 var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
 var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
 var TableSelectorWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelectorPopup.default);
+var initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
 var tableSelectorPopupWrapperStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius, 3px)",
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
@@ -33,22 +40,30 @@ var tableSelectorPopupWrapperStyles = (0, _react2.css)({
   padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
 });
 var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopup(props) {
-  var _useState = (0, _react.useState)({
-      col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-      row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-      maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-      maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-    }),
+  var _useState = (0, _react.useState)(initialSizeState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     size = _useState2[0],
     setSize = _useState2[1];
   var tablePopupRef = (0, _react.useRef)(null);
+  // If popup opened by keyboard enable keyboard mode
+  var isKeyboardMode = (0, _react.useRef)(props.isOpenedByKeyboard);
+  var enableKeyboardMode = (0, _react.useCallback)(function () {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  var disableKeyboardMode = (0, _react.useCallback)(function () {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
 
   // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
   var handleMouseMove = (0, _react.useCallback)(function (e) {
     if (!tablePopupRef.current) {
       return;
     }
+    disableKeyboardMode();
     var tablePopup = tablePopupRef.current;
     var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
       left = _tablePopup$getBoundi.left,
@@ -89,7 +104,110 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
         maxRow: gridRows
       });
     }
-  }, [size, setSize]);
+  }, [disableKeyboardMode, size, setSize]);
+  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
+    var nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  var getMaxRow = function getMaxRow(prevSize, eventKey) {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        var moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        // const moveToLastRow: boolean = prevSize.row === 1;
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  var handleInitialButtonFocus = (0, _react.useCallback)(function () {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        var increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: increaseMaxRow ? prevSize.maxRow + 1 : prevSize.maxRow
+        });
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var getRow = function getRow(prevRow, prevCol) {
+          var row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToLastRow = prevSize.row === 1;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+  }, [enableKeyboardMode, setSize]);
   (0, _react.useEffect)(function () {
     var unbind = (0, _bindEventListener.bind)(window, {
       type: 'mousemove',
@@ -115,7 +233,10 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
     maxRows: size.maxRow,
     onSelection: props.onSelection,
     selectedCol: size.col,
-    selectedRow: size.row
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
   })));
 };
 var _default = exports.default = TableSelectorPopup;

package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -9,6 +9,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
 var TABLE_SELECTOR_BUTTON_GAP = exports.TABLE_SELECTOR_BUTTON_GAP = 2;
@@ -25,9 +26,10 @@ var buttonStyles = (0, _react2.css)({
   borderRadius: '3px',
   cursor: 'pointer',
   display: 'block',
-  '&:hover': {
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
-    border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+  '&:focus': {
+    outline: 'none',
+    border: "1px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
   }
 });
 var selectionSizeTextStyles = (0, _react2.css)({
@@ -42,13 +44,32 @@ var TableSelectorButton = function TableSelectorButton(_ref) {
     col = _ref.col,
     isActive = _ref.isActive,
     _onClick = _ref.onClick,
-    label = _ref.label;
+    label = _ref.label,
+    onKeyDown = _ref.onKeyDown,
+    isFocused = _ref.isFocused,
+    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
+  var btnRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus();
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  var handleFocus = col === 1 && row === 1 ? function () {
+    return handleInitialButtonFocus();
+  } : undefined;
   return (0, _react2.jsx)("button", {
     css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
     onClick: function onClick() {
       return _onClick(row, col);
     },
-    "aria-label": label
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
   });
 };
 var createArray = function createArray(maxCols, maxRows) {
@@ -79,6 +100,9 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
     onSelection = _ref3.onSelection,
     selectedCol = _ref3.selectedCol,
     selectedRow = _ref3.selectedRow,
+    onKeyDown = _ref3.onKeyDown,
+    isFocused = _ref3.isFocused,
+    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
     formatMessage = _ref3.intl.formatMessage;
   var buttons = (0, _react.useMemo)(function () {
     return createArray(maxCols, maxRows);
@@ -94,6 +118,7 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
   }, buttons.map(function (_ref4, index) {
     var col = _ref4.col,
       row = _ref4.row;
+    var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
     var isActive = selectedCol >= col && selectedRow >= row ? true : false;
     return (0, _react2.jsx)(TableSelectorButton, {
       key: index,
@@ -101,7 +126,10 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
       col: col,
       row: row,
       onClick: onSelection,
-      label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
+      label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col),
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
     });
   })), (0, _react2.jsx)("span", {
     css: selectionSizeTextStyles,

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

@@ -76,7 +76,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       isOpenedByKeyboard: false,
       buttons: [],
       dropdownItems: [],
-      isTableSelectorOpen: false
+      isTableSelectorOpen: false,
+      isTableSelectorOpenedByKeyboard: false
     });
     _defineProperty(this, "onOpenChange", attrs => {
       const state = {
@@ -209,6 +210,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.togglePlusMenuVisibility();
       }
     });
+    _defineProperty(this, "handleTableSelectorOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.setState({
+          isTableSelectorOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
       var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
       const {
@@ -536,6 +544,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
         isOpenedByKeyboard: false
       });
     }
+    if (this.state.isTableSelectorOpen) {
+      this.setState({
+        isTableSelectorOpenedByKeyboard: false
+      });
+    }
   }
   renderPopup() {
     const {
@@ -578,7 +591,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
   renderTableSelectorPopup() {
     var _this$tableButtonRef$;
     const {
-      isTableSelectorOpen
+      isTableSelectorOpen,
+      isTableSelectorOpenedByKeyboard
     } = this.state;
     const {
       popupsMountPoint,
@@ -596,7 +610,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,
       handleClickOutside: this.handleTableSelectorClickOutside,
-      handleEscapeKeydown: this.handleTableSelectorPressEscape
+      handleEscapeKeydown: this.handleTableSelectorPressEscape,
+      isOpenedByKeyboard: isTableSelectorOpenedByKeyboard
     });
   }
   render() {
@@ -683,7 +698,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
         "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
         "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
         "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
-        onItemClick: this.insertToolbarMenuItem
+        onItemClick: this.insertToolbarMenuItem,
+        onKeyDown: this.handleTableSelectorOpenByKeyboard
       })), jsx("span", {
         css: wrapperStyle
       }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -15,6 +15,12 @@ const DEFAULT_TABLE_SELECTOR_COLS = 10;
 const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
 const DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
 const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+const initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
 const tableSelectorPopupWrapperStyles = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
@@ -22,19 +28,27 @@ const tableSelectorPopupWrapperStyles = css({
   padding: `${`var(--ds-space-100, ${`${TABLE_SELECTOR_PADDING_TOP}px`})`} ${TABLE_SELECTOR_PADDING_SIDE}px`
 });
 export const TableSelectorPopup = props => {
-  const [size, setSize] = useState({
-    col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-    row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-    maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-    maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-  });
+  const [size, setSize] = useState(initialSizeState);
   const tablePopupRef = useRef(null);
+  // If popup opened by keyboard enable keyboard mode
+  const isKeyboardMode = useRef(props.isOpenedByKeyboard);
+  const enableKeyboardMode = useCallback(() => {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  const disableKeyboardMode = useCallback(() => {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
 
   // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
   const handleMouseMove = useCallback(e => {
     if (!tablePopupRef.current) {
       return;
     }
+    disableKeyboardMode();
     const tablePopup = tablePopupRef.current;
     const {
       left,
@@ -76,7 +90,114 @@ export const TableSelectorPopup = props => {
         maxRow: gridRows
       });
     }
-  }, [size, setSize]);
+  }, [disableKeyboardMode, size, setSize]);
+  const decreasingSequence = (maxNumber, prevNumber) => {
+    let nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  const getMaxRow = (prevSize, eventKey) => {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        const moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        const moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        // const moveToLastRow: boolean = prevSize.row === 1;
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  const handleInitialButtonFocus = useCallback(() => {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        return {
+          ...prevSize,
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        const increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+        return {
+          ...prevSize,
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: increaseMaxRow ? prevSize.maxRow + 1 : prevSize.maxRow
+        };
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const getRow = (prevRow, prevCol) => {
+          let row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return {
+          ...prevSize,
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(prevSize => {
+        const moveToLastRow = prevSize.row === 1;
+        return {
+          ...prevSize,
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        };
+      });
+    }
+  }, [enableKeyboardMode, setSize]);
   useEffect(() => {
     const unbind = bind(window, {
       type: 'mousemove',
@@ -102,7 +223,10 @@ export const TableSelectorPopup = props => {
     maxRows: size.maxRow,
     onSelection: props.onSelection,
     selectedCol: size.col,
-    selectedRow: size.row
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
   })));
 };
 export default TableSelectorPopup;

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -1,9 +1,10 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { Stack } from '@atlaskit/primitives';
+import { B100 } from '@atlaskit/theme/colors';
 export const TABLE_SELECTOR_BUTTON_GAP = 2;
 export const TABLE_SELECTOR_BUTTON_SIZE = 17;
 const selectedButtonStyles = css({
@@ -18,9 +19,10 @@ const buttonStyles = css({
   borderRadius: '3px',
   cursor: 'pointer',
   display: 'block',
-  '&:hover': {
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
-    border: `1px solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
+  '&:focus': {
+    outline: 'none',
+    border: `1px solid ${`var(--ds-border-focused, ${B100})`}`,
+    boxShadow: `0 0 0 0.5px ${`var(--ds-border-focused, ${B100})`}`
   }
 });
 const selectionSizeTextStyles = css({
@@ -35,12 +37,29 @@ const TableSelectorButton = ({
   col,
   isActive,
   onClick,
-  label
+  label,
+  onKeyDown,
+  isFocused,
+  handleInitialButtonFocus
 }) => {
+  const btnRef = useRef(null);
+  useEffect(() => {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus();
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  const handleFocus = col === 1 && row === 1 ? () => handleInitialButtonFocus() : undefined;
   return jsx("button", {
     css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
     onClick: () => onClick(row, col),
-    "aria-label": label
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
   });
 };
 const createArray = (maxCols, maxRows) => {
@@ -70,6 +89,9 @@ const TableSelectorPopup = ({
   onSelection,
   selectedCol,
   selectedRow,
+  onKeyDown,
+  isFocused,
+  handleInitialButtonFocus,
   intl: {
     formatMessage
   }
@@ -89,6 +111,7 @@ const TableSelectorPopup = ({
     col,
     row
   }, index) => {
+    const isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
     const isActive = selectedCol >= col && selectedRow >= row ? true : false;
     return jsx(TableSelectorButton, {
       key: index,
@@ -96,7 +119,10 @@ const TableSelectorPopup = ({
       col: col,
       row: row,
       onClick: onSelection,
-      label: `${formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
+      label: `${formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`,
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
     });
   })), jsx("span", {
     css: selectionSizeTextStyles,

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

@@ -71,7 +71,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       isOpenedByKeyboard: false,
       buttons: [],
       dropdownItems: [],
-      isTableSelectorOpen: false
+      isTableSelectorOpen: false,
+      isTableSelectorOpenedByKeyboard: false
     });
     _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
       var state = {
@@ -201,6 +202,13 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _this.togglePlusMenuVisibility();
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "handleTableSelectorOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        _this.setState({
+          isTableSelectorOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
       var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
@@ -471,6 +479,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           isOpenedByKeyboard: false
         }));
       }
+      if (this.state.isTableSelectorOpen) {
+        this.setState({
+          isTableSelectorOpenedByKeyboard: false
+        });
+      }
     }
   }, {
     key: "renderPopup",
@@ -512,7 +525,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     key: "renderTableSelectorPopup",
     value: function renderTableSelectorPopup() {
       var _this$tableButtonRef$;
-      var isTableSelectorOpen = this.state.isTableSelectorOpen;
+      var _this$state = this.state,
+        isTableSelectorOpen = _this$state.isTableSelectorOpen,
+        isTableSelectorOpenedByKeyboard = _this$state.isTableSelectorOpenedByKeyboard;
       var _this$props13 = this.props,
         popupsMountPoint = _this$props13.popupsMountPoint,
         popupsBoundariesElement = _this$props13.popupsBoundariesElement,
@@ -528,7 +543,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
         handleClickOutside: this.handleTableSelectorClickOutside,
-        handleEscapeKeydown: this.handleTableSelectorPressEscape
+        handleEscapeKeydown: this.handleTableSelectorPressEscape,
+        isOpenedByKeyboard: isTableSelectorOpenedByKeyboard
       });
     }
   }, {
@@ -550,11 +566,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton6,
         _this$props$isDisable,
         _this$props$replacePl;
-      var _this$state = this.state,
-        buttons = _this$state.buttons,
-        dropdownItems = _this$state.dropdownItems,
-        emojiPickerOpen = _this$state.emojiPickerOpen,
-        isTableSelectorOpen = _this$state.isTableSelectorOpen;
+      var _this$state2 = this.state,
+        buttons = _this$state2.buttons,
+        dropdownItems = _this$state2.dropdownItems,
+        emojiPickerOpen = _this$state2.emojiPickerOpen,
+        isTableSelectorOpen = _this$state2.isTableSelectorOpen;
       var _this$props14 = this.props,
         isDisabled = _this$props14.isDisabled,
         isReducedSpacing = _this$props14.isReducedSpacing;
@@ -639,7 +655,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
           "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
           "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
-          onItemClick: this.insertToolbarMenuItem
+          onItemClick: this.insertToolbarMenuItem,
+          onKeyDown: this.handleTableSelectorOpenByKeyboard
         })), jsx("span", {
           css: wrapperStyle
         }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -16,6 +19,12 @@ var DEFAULT_TABLE_SELECTOR_COLS = 10;
 var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
 var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
 var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+var initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
 var tableSelectorPopupWrapperStyles = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
@@ -23,22 +32,30 @@ var tableSelectorPopupWrapperStyles = css({
   padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
 });
 export var TableSelectorPopup = function TableSelectorPopup(props) {
-  var _useState = useState({
-      col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-      row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-      maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-      maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-    }),
+  var _useState = useState(initialSizeState),
     _useState2 = _slicedToArray(_useState, 2),
     size = _useState2[0],
     setSize = _useState2[1];
   var tablePopupRef = useRef(null);
+  // If popup opened by keyboard enable keyboard mode
+  var isKeyboardMode = useRef(props.isOpenedByKeyboard);
+  var enableKeyboardMode = useCallback(function () {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  var disableKeyboardMode = useCallback(function () {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
 
   // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
   var handleMouseMove = useCallback(function (e) {
     if (!tablePopupRef.current) {
       return;
     }
+    disableKeyboardMode();
     var tablePopup = tablePopupRef.current;
     var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
       left = _tablePopup$getBoundi.left,
@@ -79,7 +96,110 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
         maxRow: gridRows
       });
     }
-  }, [size, setSize]);
+  }, [disableKeyboardMode, size, setSize]);
+  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
+    var nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  var getMaxRow = function getMaxRow(prevSize, eventKey) {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        var moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        // const moveToLastRow: boolean = prevSize.row === 1;
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  var handleInitialButtonFocus = useCallback(function () {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        var increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: increaseMaxRow ? prevSize.maxRow + 1 : prevSize.maxRow
+        });
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var getRow = function getRow(prevRow, prevCol) {
+          var row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToLastRow = prevSize.row === 1;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+  }, [enableKeyboardMode, setSize]);
   useEffect(function () {
     var unbind = bind(window, {
       type: 'mousemove',
@@ -105,7 +225,10 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
     maxRows: size.maxRow,
     onSelection: props.onSelection,
     selectedCol: size.col,
-    selectedRow: size.row
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
   })));
 };
 export default TableSelectorPopup;

package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -1,9 +1,10 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { Stack } from '@atlaskit/primitives';
+import { B100 } from '@atlaskit/theme/colors';
 export var TABLE_SELECTOR_BUTTON_GAP = 2;
 export var TABLE_SELECTOR_BUTTON_SIZE = 17;
 var selectedButtonStyles = css({
@@ -18,9 +19,10 @@ var buttonStyles = css({
   borderRadius: '3px',
   cursor: 'pointer',
   display: 'block',
-  '&:hover': {
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
-    border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+  '&:focus': {
+    outline: 'none',
+    border: "1px solid ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
   }
 });
 var selectionSizeTextStyles = css({
@@ -35,13 +37,32 @@ var TableSelectorButton = function TableSelectorButton(_ref) {
     col = _ref.col,
     isActive = _ref.isActive,
     _onClick = _ref.onClick,
-    label = _ref.label;
+    label = _ref.label,
+    onKeyDown = _ref.onKeyDown,
+    isFocused = _ref.isFocused,
+    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
+  var btnRef = useRef(null);
+  useEffect(function () {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus();
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  var handleFocus = col === 1 && row === 1 ? function () {
+    return handleInitialButtonFocus();
+  } : undefined;
   return jsx("button", {
     css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
     onClick: function onClick() {
       return _onClick(row, col);
     },
-    "aria-label": label
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
   });
 };
 var createArray = function createArray(maxCols, maxRows) {
@@ -72,6 +93,9 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
     onSelection = _ref3.onSelection,
     selectedCol = _ref3.selectedCol,
     selectedRow = _ref3.selectedRow,
+    onKeyDown = _ref3.onKeyDown,
+    isFocused = _ref3.isFocused,
+    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
     formatMessage = _ref3.intl.formatMessage;
   var buttons = useMemo(function () {
     return createArray(maxCols, maxRows);
@@ -87,6 +111,7 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
   }, buttons.map(function (_ref4, index) {
     var col = _ref4.col,
       row = _ref4.row;
+    var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
     var isActive = selectedCol >= col && selectedRow >= row ? true : false;
     return jsx(TableSelectorButton, {
       key: index,
@@ -94,7 +119,10 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
       col: col,
       row: row,
       onClick: onSelection,
-      label: "".concat(formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
+      label: "".concat(formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col),
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
     });
   })), jsx("span", {
     css: selectionSizeTextStyles,

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

@@ -33,6 +33,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;
+    private handleTableSelectorOpenByKeyboard;
     private toggleLinkPanel;
     private insertMention;
     private insertTable;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -10,6 +10,7 @@ export interface TableSelectorPopupProps {
     popupsScrollableElement?: HTMLElement;
     handleClickOutside?: SimpleEventHandler<MouseEvent>;
     handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+    isOpenedByKeyboard: boolean;
 }
 export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
 export default TableSelectorPopup;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from 'react';
+import type { KeyboardEventHandler, SyntheticEvent } from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
 export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
@@ -8,6 +8,9 @@ export interface TableSelectorButtonProps {
     isActive: boolean;
     onClick: OnTableSizeSelection;
     label: string;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
 }
 export interface OnTableSizeSelection {
     (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
@@ -18,6 +21,9 @@ interface TableSelectorPopupProps {
     onSelection: OnTableSizeSelection;
     selectedCol: number;
     selectedRow: number;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;

package/dist/types/ui/ToolbarInsertBlock/types.d.ts

@@ -58,4 +58,5 @@ export interface State {
     dropdownItems: BlockMenuItem[];
     isOpenedByKeyboard: boolean;
     isTableSelectorOpen: boolean;
+    isTableSelectorOpenedByKeyboard: boolean;
 }

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

@@ -33,6 +33,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;
+    private handleTableSelectorOpenByKeyboard;
     private toggleLinkPanel;
     private insertMention;
     private insertTable;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -10,6 +10,7 @@ export interface TableSelectorPopupProps {
     popupsScrollableElement?: HTMLElement;
     handleClickOutside?: SimpleEventHandler<MouseEvent>;
     handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+    isOpenedByKeyboard: boolean;
 }
 export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
 export default TableSelectorPopup;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from 'react';
+import type { KeyboardEventHandler, SyntheticEvent } from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
 export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
@@ -8,6 +8,9 @@ export interface TableSelectorButtonProps {
     isActive: boolean;
     onClick: OnTableSizeSelection;
     label: string;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
 }
 export interface OnTableSizeSelection {
     (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
@@ -18,6 +21,9 @@ interface TableSelectorPopupProps {
     onSelection: OnTableSizeSelection;
     selectedCol: number;
     selectedRow: number;
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+    isFocused: boolean;
+    handleInitialButtonFocus: () => void;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts

@@ -58,4 +58,5 @@ export interface State {
     dropdownItems: BlockMenuItem[];
     isOpenedByKeyboard: boolean;
     isTableSelectorOpen: boolean;
+    isTableSelectorOpenedByKeyboard: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-insert-block",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Insert block plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "@atlaskit/editor-plugin-date": "^0.3.0",
     "@atlaskit/editor-plugin-emoji": "^1.1.0",
     "@atlaskit/editor-plugin-expand": "^0.4.0",
-    "@atlaskit/editor-plugin-extension": "^0.6.0",
+    "@atlaskit/editor-plugin-extension": "^0.7.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
     "@atlaskit/editor-plugin-image-upload": "^0.2.0",
@@ -59,7 +59,7 @@
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/primitives": "^1.20.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",