[kbn-grid-layout][dashboard] Basic keyboard interaction

examples/grid_example/public/app.tsx

@@ -50,6 +50,7 @@ import { dashboardInputToGridLayout, gridLayoutToDashboardPanelMap } from './uti
 const DASHBOARD_MARGIN_SIZE = 8;
 const DASHBOARD_GRID_HEIGHT = 20;
 const DASHBOARD_GRID_COLUMN_COUNT = 48;
+const DASHBOARD_DRAG_TOP_OFFSET = 150;
 
 export const GridExample = ({
   coreStart,
@@ -67,6 +68,7 @@ export const GridExample = ({
     gutterSize: DASHBOARD_MARGIN_SIZE,
     rowHeight: DASHBOARD_GRID_HEIGHT,
     columnCount: DASHBOARD_GRID_COLUMN_COUNT,
+    keyboardDragTopLimit: DASHBOARD_DRAG_TOP_OFFSET,
   });
 
   const mockDashboardApi = useMockDashboardApi({ savedState: savedState.current });

src/platform/packages/private/kbn-grid-layout/grid/grid_panel/drag_handle/default_drag_handle.tsx

@@ -18,10 +18,11 @@ export const DefaultDragHandle = React.memo(
       <button
         onMouseDown={dragHandleApi.startDrag}
         onTouchStart={dragHandleApi.startDrag}
+        onKeyDown={dragHandleApi.startDrag}
         aria-label={i18n.translate('kbnGridLayout.dragHandle.ariaLabel', {
           defaultMessage: 'Drag to move',
         })}
-        className="kbnGridPanel__dragHandle"
+        className="kbnGridPanel--dragHandle"
         data-test-subj="kbnGridPanel--dragHandle"
         css={styles}
       >
@@ -49,7 +50,6 @@ const styles = ({ euiTheme }: UseEuiTheme) =>
     backgroundColor: euiTheme.colors.backgroundBasePlain,
     borderRadius: `${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0 0`,
     transition: `${euiTheme.animation.slow} opacity`,
-    touchAction: 'none',
     '.kbnGridPanel:hover &, .kbnGridPanel:focus-within &, &:active, &:focus': {
       opacity: '1 !important',
     },

src/platform/packages/private/kbn-grid-layout/grid/grid_panel/drag_handle/use_drag_handle_api.tsx

@@ -27,7 +27,7 @@ export const useDragHandleApi = ({
 }): DragHandleApi => {
   const { useCustomDragHandle } = useGridLayoutContext();
 
-  const startInteraction = useGridLayoutPanelEvents({
+  const { startDrag } = useGridLayoutPanelEvents({
     interactionType: 'drag',
     panelId,
     rowId,
@@ -39,19 +39,21 @@ export const useDragHandleApi = ({
     (dragHandles: Array<HTMLElement | null>) => {
       for (const handle of dragHandles) {
         if (handle === null) return;
-        handle.addEventListener('mousedown', startInteraction, { passive: true });
-        handle.addEventListener('touchstart', startInteraction, { passive: true });
-        handle.style.touchAction = 'none';
+        handle.addEventListener('mousedown', startDrag, { passive: true });
+        handle.addEventListener('touchstart', startDrag, { passive: true });
+        handle.addEventListener('keydown', startDrag);
+        handle.classList.add('kbnGridPanel--dragHandle');
       }
       removeEventListenersRef.current = () => {
         for (const handle of dragHandles) {
           if (handle === null) return;
-          handle.removeEventListener('mousedown', startInteraction);
-          handle.removeEventListener('touchstart', startInteraction);
+          handle.removeEventListener('mousedown', startDrag);
+          handle.removeEventListener('touchstart', startDrag);
+          handle.removeEventListener('keydown', startDrag);
         }
       };
     },
-    [startInteraction]
+    [startDrag]
   );
 
   useEffect(
@@ -63,7 +65,7 @@ export const useDragHandleApi = ({
   );
 
   return {
-    startDrag: startInteraction,
+    startDrag,
     setDragHandles: useCustomDragHandle ? setDragHandles : undefined,
   };
 };

src/platform/packages/private/kbn-grid-layout/grid/grid_panel/grid_panel.tsx

@@ -47,6 +47,11 @@ export const GridPanel = React.memo(({ panelId, rowId }: GridPanelProps) => {
       grid-column-end: ${initialPanel.column + 1 + initialPanel.width};
       grid-row-start: ${initialPanel.row + 1};
       grid-row-end: ${initialPanel.row + 1 + initialPanel.height};
+      .kbnGridPanel--dragHandle,
+      .kbnGridPanel--resizeHandle {
+        touch-action: none; // prevent scrolling on touch devices
+        scroll-margin-top: ${gridLayoutStateManager.runtimeSettings$.value.keyboardDragTopLimit}px;
+      }
     `;
   }, [gridLayoutStateManager, rowId, panelId]);
 

src/platform/packages/private/kbn-grid-layout/grid/grid_panel/grid_panel_resize_handle.tsx

@@ -16,7 +16,7 @@ import { i18n } from '@kbn/i18n';
 import { useGridLayoutPanelEvents } from '../use_grid_layout_events';
 
 export const ResizeHandle = React.memo(({ rowId, panelId }: { rowId: string; panelId: string }) => {
-  const startInteraction = useGridLayoutPanelEvents({
+  const { startDrag } = useGridLayoutPanelEvents({
     interactionType: 'resize',
     panelId,
     rowId,
@@ -25,8 +25,9 @@ export const ResizeHandle = React.memo(({ rowId, panelId }: { rowId: string; pan
   return (
     <button
       css={styles}
-      onMouseDown={startInteraction}
-      onTouchStart={startInteraction}
+      onMouseDown={startDrag}
+      onTouchStart={startDrag}
+      onKeyDown={startDrag}
       className="kbnGridPanel--resizeHandle"
       aria-label={i18n.translate('kbnGridLayout.resizeHandle.ariaLabel', {
         defaultMessage: 'Resize panel',
@@ -46,7 +47,7 @@ const styles = ({ euiTheme }: UseEuiTheme) =>
     maxHeight: '100%',
     height: euiTheme.size.l,
     zIndex: euiTheme.levels.toast,
-    touchAction: 'none',
+    scrollMarginBottom: euiTheme.size.s,
     '&:hover, &:focus': {
       cursor: 'se-resize',
     },

src/platform/packages/private/kbn-grid-layout/grid/grid_row/grid_row_header.tsx

@@ -37,9 +37,7 @@ export interface GridRowHeaderProps {
 export const GridRowHeader = React.memo(
   ({ rowId, toggleIsCollapsed, collapseButtonRef }: GridRowHeaderProps) => {
     const { gridLayoutStateManager } = useGridLayoutContext();
-    const startInteraction = useGridLayoutRowEvents({
-      rowId,
-    });
+    const { startDrag, onBlur } = useGridLayoutRowEvents({ rowId });
 
     const [isActive, setIsActive] = useState<boolean>(false);
     const [editTitleOpen, setEditTitleOpen] = useState<boolean>(false);
@@ -213,8 +211,10 @@ export const GridRowHeader = React.memo(
                         aria-label={i18n.translate('kbnGridLayout.row.moveRow', {
                           defaultMessage: 'Move section',
                         })}
-                        onMouseDown={startInteraction}
-                        onTouchStart={startInteraction}
+                        onMouseDown={startDrag}
+                        onTouchStart={startDrag}
+                        onKeyDown={startDrag}
+                        onBlur={onBlur}
                         data-test-subj={`kbnGridRowHeader-${rowId}--dragHandle`}
                       />
                     </EuiFlexItem>

src/platform/packages/private/kbn-grid-layout/grid/keyboard_navigation.test.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getSampleLayout } from './test_utils/sample_layout';
+import { GridLayout, GridLayoutProps } from './grid_layout';
+import { gridSettings, mockRenderPanelContents } from './test_utils/mocks';
+import { EuiThemeProvider } from '@elastic/eui';
+
+const onLayoutChange = jest.fn();
+
+const renderGridLayout = (propsOverrides: Partial<GridLayoutProps> = {}) => {
+  const props = {
+    accessMode: 'EDIT',
+    layout: getSampleLayout(),
+    gridSettings,
+    renderPanelContents: mockRenderPanelContents,
+    onLayoutChange,
+    ...propsOverrides,
+  } as GridLayoutProps;
+
+  const { rerender, ...rtlRest } = render(<GridLayout {...props} />, { wrapper: EuiThemeProvider });
+
+  return {
+    ...rtlRest,
+    rerender: (overrides: Partial<GridLayoutProps>) => {
+      const newProps = { ...props, ...overrides } as GridLayoutProps;
+      return rerender(<GridLayout {...newProps} />);
+    },
+  };
+};
+
+const getPanelHandle = (panelId: string, interactionType: 'resize' | 'drag' = 'drag') => {
+  const gridPanel = screen.getByText(`panel content ${panelId}`).closest('div')!;
+  const handleText = new RegExp(interactionType === 'resize' ? /resize panel/i : /drag to move/i);
+  return within(gridPanel).getByRole('button', { name: handleText });
+};
+
+describe('Keyboard navigation', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  Object.defineProperty(window, 'scrollY', { value: 0, writable: false });
+  Object.defineProperty(document.body, 'scrollHeight', { value: 2000, writable: false });
+
+  const pressEnter = async () => {
+    await userEvent.keyboard('[Enter]');
+  };
+  const pressKey = async (
+    k: '[Enter]' | '{Escape}' | '[ArrowDown]' | '[ArrowUp]' | '[ArrowRight]' | '[ArrowLeft]'
+  ) => {
+    await userEvent.keyboard(k);
+  };
+  it('should show the panel active when during interaction for drag handle', async () => {
+    renderGridLayout();
+    const panelHandle = getPanelHandle('panel1');
+    panelHandle.focus();
+    expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
+      exact: true,
+    });
+    await pressEnter();
+    await pressKey('[ArrowDown]');
+    expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
+    expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
+      'kbnGridPanel kbnGridPanel--active',
+      { exact: true }
+    );
+    await pressEnter();
+    expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
+      exact: true,
+    });
+  });
+  it('should show the panel active when during interaction for resize handle', async () => {
+    renderGridLayout();
+    const panelHandle = getPanelHandle('panel5', 'resize');
+    panelHandle.focus();
+    expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass('kbnGridPanel', {
+      exact: true,
+    });
+    await pressEnter();
+    await pressKey('[ArrowDown]');
+    expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
+    expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass(
+      'kbnGridPanel kbnGridPanel--active',
+      { exact: true }
+    );
+    await pressKey('{Escape}');
+    expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass('kbnGridPanel', {
+      exact: true,
+    });
+    expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
+  });
+});

src/platform/packages/private/kbn-grid-layout/grid/test_utils/mocks.tsx

@@ -36,13 +36,15 @@ export const mockRenderPanelContents = jest.fn((panelId) => (
 
 export const getGridLayoutStateManagerMock = (overrides?: Partial<GridLayoutStateManager>) => {
   return {
+    layoutRef: { current: {} },
     expandedPanelId$: new BehaviorSubject<string | undefined>(undefined),
     isMobileView$: new BehaviorSubject<boolean>(false),
     gridLayout$: new BehaviorSubject<GridLayoutData>(getSampleLayout()),
     proposedGridLayout$: new BehaviorSubject<GridLayoutData | undefined>(undefined),
     runtimeSettings$: new BehaviorSubject<RuntimeGridSettings>({
       ...gridSettings,
       columnPixelWidth: 0,
+      keyboardDragTopLimit: 0,
     }),
     panelRefs: { current: {} },
     rowRefs: { current: {} },
@@ -53,5 +55,5 @@ export const getGridLayoutStateManagerMock = (overrides?: Partial<GridLayoutStat
     activeRowEvent$: new BehaviorSubject<ActiveRowEvent | undefined>(undefined),
     gridDimensions$: new BehaviorSubject<ObservedSize>({ width: 600, height: 900 }),
     ...overrides,
-  };
+  } as GridLayoutStateManager;
 };

src/platform/packages/private/kbn-grid-layout/grid/types.ts

@@ -41,6 +41,7 @@ export interface GridSettings {
   gutterSize: number;
   rowHeight: number;
   columnCount: number;
+  keyboardDragTopLimit: number;
 }
 
 /**
@@ -62,6 +63,7 @@ export interface ActivePanel {
 
 export interface ActiveRowEvent {
   id: string;
+  sensorType: 'mouse' | 'touch' | 'keyboard';
   startingPosition: {
     top: number;
     left: number;
@@ -84,6 +86,7 @@ export interface GridLayoutStateManager {
   activeRowEvent$: BehaviorSubject<ActiveRowEvent | undefined>;
   interactionEvent$: BehaviorSubject<PanelInteractionEvent | undefined>;
 
+  layoutRef: React.MutableRefObject<HTMLDivElement | null>;
   rowRefs: React.MutableRefObject<{ [rowId: string]: HTMLDivElement | null }>;
   headerRefs: React.MutableRefObject<{ [rowId: string]: HTMLDivElement | null }>;
   panelRefs: React.MutableRefObject<{
@@ -119,12 +122,13 @@ export interface PanelInteractionEvent {
    * The pixel offsets from where the mouse was at drag start to the
    * edges of the panel
    */
-  pointerOffsets: {
+  sensorOffsets: {
     top: number;
     left: number;
     right: number;
     bottom: number;
   };
+  sensorType: 'mouse' | 'touch' | 'keyboard';
 }
 
 /**

src/platform/packages/private/kbn-grid-layout/grid/use_grid_layout_events/index.ts

@@ -7,5 +7,5 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { useGridLayoutPanelEvents } from './panel_events';
-export { useGridLayoutRowEvents } from './row_events';
+export { useGridLayoutPanelEvents } from './panel/events';
+export { useGridLayoutRowEvents } from './row/events';

src/platform/packages/private/kbn-grid-layout/grid/use_grid_layout_events/keyboard_utils.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const updateClientY = (
+  currentY: number,
+  stepY: number,
+  isCloseToEdge: boolean,
+  type = 'drag'
+) => {
+  if (isCloseToEdge) {
+    switch (type) {
+      case 'drag':
+        window.scrollTo({ top: window.scrollY + stepY, behavior: 'smooth' });
+        return currentY;
+      case 'resize':
+        setTimeout(() =>
+          document.activeElement?.scrollIntoView({ behavior: 'smooth', block: 'end' })
+        );
+    }
+  }
+  return currentY + stepY;
+};