diff --git a/dev/dashboard.html b/dev/dashboard.html
index 2747ef16cb..8d75891016 100644
--- a/dev/dashboard.html
+++ b/dev/dashboard.html
@@ -10,7 +10,6 @@
     <style>
       vaadin-dashboard-widget {
         background-color: #f5f5f5;
-        border: 1px solid #e0e0e0;
         border-radius: 4px;
         padding: 10px;
       }
@@ -82,11 +81,13 @@
       ];
 
       dashboard.renderer = (root, _dashboard, { item }) => {
-        root.innerHTML = `
-          <vaadin-dashboard-widget widget-title="${item.title}">
-            <span slot="header">${item.header || ''}</span>
-            ${item.type === 'chart' ? '<div class="chart"></div>' : `<div class="kpi-number">${item.content}</div>`}
-          </vaadin-dashboard-widget>
+        if (!root.firstElementChild) {
+          root.append(document.createElement('vaadin-dashboard-widget'));
+        }
+        root.firstElementChild.widgetTitle = item.title;
+        root.firstElementChild.innerHTML = `
+          <span slot="header">${item.header || ''}</span>
+          ${item.type === 'chart' ? '<div class="chart"></div>' : `<div class="kpi-number">${item.content}</div>`}
         `;
       };
 
diff --git a/packages/dashboard/src/keyboard-controller.js b/packages/dashboard/src/keyboard-controller.js
new file mode 100644
index 0000000000..54f03dfcd0
--- /dev/null
+++ b/packages/dashboard/src/keyboard-controller.js
@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+import { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
+
+/**
+ * A controller for managing widget/section keyboard interactions.
+ */
+export class KeyboardController {
+  constructor(host) {
+    this.host = host;
+
+    host.addEventListener('focusout', (e) => this.__focusout(e));
+    host.addEventListener('focusin', (e) => this.__focusin(e));
+    host.addEventListener('keydown', (e) => this.__keydown(e));
+  }
+
+  /** @private */
+  __focusout() {
+    this.host.__focused = false;
+    this.host.__selected = false;
+  }
+
+  /** @private */
+  __focusin(e) {
+    if (e.target === this.host) {
+      this.host.__focused = true;
+    }
+  }
+
+  /** @private */
+  __keydown(e) {
+    if (e.metaKey || e.ctrlKey || !this.host.__selected) {
+      return;
+    }
+
+    if (e.key === 'Backspace' || e.key === 'Delete') {
+      this.__delete(e);
+    } else if (e.key === 'Escape') {
+      this.__escape(e);
+    } else if (e.shiftKey && e.key.startsWith('Arrow')) {
+      this.__resize(e);
+    } else if (e.key.startsWith('Arrow')) {
+      this.__move(e);
+    }
+  }
+
+  /** @private */
+  __delete(e) {
+    e.preventDefault();
+    fireRemove(this.host);
+  }
+
+  /** @private */
+  __escape(e) {
+    e.preventDefault();
+    this.host.__selected = false;
+    this.host.focus();
+  }
+
+  /** @private */
+  __resize(e) {
+    const resizeMap = {
+      ArrowRight: [document.dir === 'rtl' ? -1 : 1, 0],
+      ArrowLeft: [document.dir === 'rtl' ? 1 : -1, 0],
+      ArrowDown: [0, 1],
+      ArrowUp: [0, -1],
+    };
+    if (resizeMap[e.key]) {
+      e.preventDefault();
+      fireResize(this.host, ...resizeMap[e.key]);
+    }
+  }
+
+  /** @private */
+  __move(e) {
+    const moveMap = {
+      ArrowRight: document.dir === 'rtl' ? -1 : 1,
+      ArrowLeft: document.dir === 'rtl' ? 1 : -1,
+      ArrowDown: 1,
+      ArrowUp: -1,
+    };
+    if (moveMap[e.key]) {
+      e.preventDefault();
+      fireMove(this.host, moveMap[e.key]);
+    }
+  }
+}
diff --git a/packages/dashboard/src/vaadin-dashboard-helpers.js b/packages/dashboard/src/vaadin-dashboard-helpers.js
index 41b641994a..1b94d7db03 100644
--- a/packages/dashboard/src/vaadin-dashboard-helpers.js
+++ b/packages/dashboard/src/vaadin-dashboard-helpers.js
@@ -33,3 +33,48 @@ export function getItemsArrayOfItem(item, items) {
 export function getElementItem(element) {
   return element.closest(WRAPPER_LOCAL_NAME).__item;
 }
+
+/**
+ * Dispatches a custom event to notify about a move operation.
+ *
+ * @param {HTMLElement} element
+ * @param {Number} delta
+ */
+export function fireMove(element, delta) {
+  element.dispatchEvent(
+    new CustomEvent('item-move', {
+      bubbles: true,
+      composed: true,
+      detail: { delta },
+    }),
+  );
+}
+
+/**
+ * Dispatches a custom event to notify about a resize operation.
+ *
+ * @param {HTMLElement} element
+ * @param {Number} colspanDelta
+ * @param {Number} rowspanDelta
+ */
+export function fireResize(element, colspanDelta, rowspanDelta) {
+  element.dispatchEvent(
+    new CustomEvent('item-resize', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        colspanDelta,
+        rowspanDelta,
+      },
+    }),
+  );
+}
+
+/**
+ * Dispatches a custom event to notify about a remove operation.
+ *
+ * @param {HTMLElement} element
+ */
+export function fireRemove(element) {
+  element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true, composed: true }));
+}
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 45c9272e7a..e6478eb8fe 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -9,12 +9,15 @@
  * license.
  */
 import { html, LitElement } from 'lit';
+import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { KeyboardController } from './keyboard-controller.js';
 import { TitleController } from './title-controller.js';
+import { fireRemove } from './vaadin-dashboard-helpers.js';
 import { dashboardWidgetAndSectionStyles, hasWidgetWrappers } from './vaadin-dashboard-styles.js';
 
 /**
@@ -93,17 +96,44 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         value: '',
         observer: '__onSectionTitleChanged',
       },
+
+      /** @private */
+      __selected: {
+        type: Boolean,
+        reflectToAttribute: true,
+        attribute: 'selected',
+        observer: '__selectedChanged',
+      },
+
+      /** @private */
+      __focused: {
+        type: Boolean,
+        reflectToAttribute: true,
+        attribute: 'focused',
+      },
     };
   }
 
   /** @protected */
   render() {
     return html`
-      <header>
-        <button id="drag-handle" draggable="true" class="drag-handle" tabindex="-1"></button>
-        <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
-        <button id="remove-button" tabindex="-1" @click="${() => this.__remove()}"></button>
-      </header>
+      <button
+        aria-label="Select Section Title for editing"
+        id="focus-button"
+        draggable="true"
+        class="drag-handle"
+        @click="${() => {
+          this.__selected = true;
+        }}"
+      ></button>
+
+      <div id="focustrap">
+        <header>
+          <button id="drag-handle" draggable="true" class="drag-handle" tabindex="${this.__selected ? 0 : -1}"></button>
+          <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+          <button id="remove-button" tabindex="${this.__selected ? 0 : -1}" @click="${() => fireRemove(this)}"></button>
+        </header>
+      </div>
 
       <slot></slot>
     `;
@@ -111,7 +141,9 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
 
   constructor() {
     super();
+    this.__keyboardController = new KeyboardController(this);
     this.__titleController = new TitleController(this);
+    this.__focusTrapController = new FocusTrapController(this);
     this.__titleController.addEventListener('slot-content-changed', (event) => {
       const { node } = event.target;
       if (node) {
@@ -123,7 +155,9 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
   /** @protected */
   ready() {
     super.ready();
+    this.addController(this.__keyboardController);
     this.addController(this.__titleController);
+    this.addController(this.__focusTrapController);
 
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'section');
@@ -136,8 +170,20 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
   }
 
   /** @private */
-  __remove() {
-    this.dispatchEvent(new CustomEvent('item-remove', { bubbles: true, composed: true }));
+  __selectedChanged(selected) {
+    if (selected) {
+      this.__focusTrapController.trapFocus(this.$.focustrap);
+    } else {
+      this.__focusTrapController.releaseFocus();
+    }
+  }
+
+  focus() {
+    if (this.hasAttribute('editable')) {
+      this.$['focus-button'].focus();
+    } else {
+      super.focus();
+    }
   }
 }
 
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index ad0068f437..caa1a2bc80 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -11,8 +11,16 @@ export const dashboardWidgetAndSectionStyles = css`
     box-sizing: border-box;
   }
 
+  :host([focused]) {
+    border: 1px solid blue;
+  }
+
+  :host([selected]) {
+    border: 4px solid red;
+  }
+
   :host([dragging]) {
-    border: 3px dashed black !important;
+    border: 3px dashed black;
   }
 
   :host([dragging]) * {
@@ -20,19 +28,31 @@ export const dashboardWidgetAndSectionStyles = css`
   }
 
   :host(:not([editable])) #drag-handle,
-  :host(:not([editable])) #remove-button {
+  :host(:not([editable])) #remove-button,
+  :host(:not([editable])) #focus-button {
     display: none;
   }
 
+  #focustrap {
+    display: contents;
+  }
+
   header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
+  #focus-button {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+  }
+
   #drag-handle {
     font-size: 30px;
     cursor: grab;
+    z-index: 1;
   }
 
   #drag-handle::before {
@@ -42,9 +62,14 @@ export const dashboardWidgetAndSectionStyles = css`
   #remove-button {
     font-size: 30px;
     cursor: pointer;
+    z-index: 1;
   }
 
   #remove-button::before {
     content: '×';
   }
+
+  button:focus {
+    outline: 1px solid blue;
+  }
 `;
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index a23c06a0de..865ce3bcb7 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -9,13 +9,15 @@
  * license.
  */
 import { html, LitElement } from 'lit';
+import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { KeyboardController } from './keyboard-controller.js';
 import { TitleController } from './title-controller.js';
-import { SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
+import { fireRemove, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-styles.js';
 
 /**
@@ -62,6 +64,7 @@ class DashboardWidget extends ControllerMixin(ElementMixin(PolylitMixin(LitEleme
           font-size: 30px;
           cursor: grab;
           line-height: 1;
+          z-index: 1;
         }
 
         #resize-handle::before {
@@ -97,30 +100,59 @@ class DashboardWidget extends ControllerMixin(ElementMixin(PolylitMixin(LitEleme
         value: '',
         observer: '__onWidgetTitleChanged',
       },
+
+      /** @private */
+      __selected: {
+        type: Boolean,
+        reflectToAttribute: true,
+        attribute: 'selected',
+        observer: '__selectedChanged',
+      },
+
+      /** @private */
+      __focused: {
+        type: Boolean,
+        reflectToAttribute: true,
+        attribute: 'focused',
+      },
     };
   }
 
   /** @protected */
   render() {
     return html`
-      <header>
-        <button id="drag-handle" draggable="true" class="drag-handle" tabindex="-1"></button>
-        <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
-        <slot name="header"></slot>
-        <button id="remove-button" tabindex="-1" @click="${() => this.__remove()}"></button>
-      </header>
+      <button
+        aria-label="Select Widget Title for editing"
+        id="focus-button"
+        draggable="true"
+        class="drag-handle"
+        @click="${() => {
+          this.__selected = true;
+        }}"
+      ></button>
+
+      <div id="focustrap">
+        <header>
+          <button id="drag-handle" draggable="true" class="drag-handle" tabindex="${this.__selected ? 0 : -1}"></button>
+          <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+          <slot name="header"></slot>
+          <button id="remove-button" tabindex="${this.__selected ? 0 : -1}" @click="${() => fireRemove(this)}"></button>
+        </header>
+
+        <button id="resize-handle" class="resize-handle" tabindex="${this.__selected ? 0 : -1}"></button>
+      </div>
 
       <div id="content">
         <slot></slot>
       </div>
-
-      <button id="resize-handle" class="resize-handle" tabindex="-1"></button>
     `;
   }
 
   constructor() {
     super();
+    this.__keyboardController = new KeyboardController(this);
     this.__titleController = new TitleController(this);
+    this.__focusTrapController = new FocusTrapController(this);
     this.__titleController.addEventListener('slot-content-changed', (event) => {
       const { node } = event.target;
       if (node) {
@@ -152,6 +184,8 @@ class DashboardWidget extends ControllerMixin(ElementMixin(PolylitMixin(LitEleme
   ready() {
     super.ready();
     this.addController(this.__titleController);
+    this.addController(this.__keyboardController);
+    this.addController(this.__focusTrapController);
 
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'article');
@@ -169,8 +203,20 @@ class DashboardWidget extends ControllerMixin(ElementMixin(PolylitMixin(LitEleme
   }
 
   /** @private */
-  __remove() {
-    this.dispatchEvent(new CustomEvent('item-remove', { bubbles: true, composed: true }));
+  __selectedChanged(selected) {
+    if (selected) {
+      this.__focusTrapController.trapFocus(this.$.focustrap);
+    } else {
+      this.__focusTrapController.releaseFocus();
+    }
+  }
+
+  focus() {
+    if (this.hasAttribute('editable')) {
+      this.$['focus-button'].focus();
+    } else {
+      super.focus();
+    }
   }
 }
 
diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
index 94f73ab8b3..46b423c17f 100644
--- a/packages/dashboard/src/widget-reorder-controller.js
+++ b/packages/dashboard/src/widget-reorder-controller.js
@@ -20,6 +20,7 @@ export class WidgetReorderController {
     host.addEventListener('dragend', (e) => this.__dragEnd(e));
     host.addEventListener('dragover', (e) => this.__dragOver(e));
     host.addEventListener('drop', (e) => this.__drop(e));
+    host.addEventListener('item-move', (e) => this.__itemMove(e));
   }
 
   /** @private */
@@ -195,6 +196,9 @@ export class WidgetReorderController {
 
   /** @private */
   __reorderItems(draggedItem, targetIndex) {
+    if (targetIndex < 0 || targetIndex >= getItemsArrayOfItem(draggedItem, this.host.items).length) {
+      return;
+    }
     const items = getItemsArrayOfItem(draggedItem, this.host.items);
     const draggedIndex = items.indexOf(draggedItem);
     items.splice(draggedIndex, 1);
@@ -214,4 +218,15 @@ export class WidgetReorderController {
       this.host.appendChild(this.__draggedElement);
     }
   }
+
+  /**
+   * Handle the item-move event dispatched by a widget / section.
+   * @private
+   */
+  __itemMove(e) {
+    e.stopImmediatePropagation();
+    const item = getElementItem(e.target);
+    const items = getItemsArrayOfItem(item, this.host.items);
+    this.__reorderItems(item, items.indexOf(item) + e.detail.delta);
+  }
 }
diff --git a/packages/dashboard/src/widget-resize-controller.js b/packages/dashboard/src/widget-resize-controller.js
index 7097d1e9c5..ef039fa590 100644
--- a/packages/dashboard/src/widget-resize-controller.js
+++ b/packages/dashboard/src/widget-resize-controller.js
@@ -16,6 +16,7 @@ export class WidgetResizeController {
     this.__resizedElementRemoveObserver = new MutationObserver(() => this.__restoreResizedElement());
     this.__touchMoveCancelListener = (e) => e.preventDefault();
     addListener(host, 'track', (e) => this.__onTrack(e));
+    host.addEventListener('item-resize', (e) => this.__itemResize(e));
   }
 
   /** @private */
@@ -78,10 +79,10 @@ export class WidgetResizeController {
     const columnWidth = parseFloat(columns[0]);
     if (this.__resizeWidth > currentElementWidth + gapSize + columnWidth / 2) {
       // Resized horizontally above the half of the next column, increase colspan
-      this.__updateResizedItem(Math.min((this.resizedItem.colspan || 1) + 1, columns.length), this.resizedItem.rowspan);
+      this.__updateResizedItem(1, 0);
     } else if (this.__resizeWidth < currentElementWidth - columnWidth / 2) {
       // Resized horizontally below the half of the current column, decrease colspan
-      this.__updateResizedItem(Math.max((this.resizedItem.colspan || 1) - 1, 1), this.resizedItem.rowspan);
+      this.__updateResizedItem(-1, 0);
     }
 
     if (!gridStyle.getPropertyValue('--vaadin-dashboard-row-min-height')) {
@@ -92,10 +93,10 @@ export class WidgetResizeController {
     const rowMinHeight = Math.min(...gridStyle.gridTemplateRows.split(' ').map((height) => parseFloat(height)));
     if (this.__resizeHeight > currentElementHeight + gapSize + rowMinHeight / 2) {
       // Resized vertically above the half of the next row, increase rowspan
-      this.__updateResizedItem(this.resizedItem.colspan, (this.resizedItem.rowspan || 1) + 1);
+      this.__updateResizedItem(0, 1);
     } else if (this.__resizeHeight < currentElementHeight - rowMinHeight / 2) {
       // Resized vertically below the half of the current row, decrease rowspan
-      this.__updateResizedItem(this.resizedItem.colspan, Math.max((this.resizedItem.rowspan || 1) - 1, 1));
+      this.__updateResizedItem(0, -1);
     }
   }
 
@@ -138,13 +139,34 @@ export class WidgetResizeController {
   }
 
   /** @private */
-  __updateResizedItem(colspan = 1, rowspan = 1) {
-    if ((this.resizedItem.colspan || 1) === colspan && (this.resizedItem.rowspan || 1) === rowspan) {
+  __updateResizedItem(colspanDelta, rowspanDelta) {
+    this.__resizeItem(this.resizedItem, colspanDelta, rowspanDelta);
+    requestAnimationFrame(() => this.__updateWidgetStyles());
+  }
+
+  /** @private */
+  __resizeItem(item, colspanDelta, rowspanDelta) {
+    if (item.items) {
+      // Do not resize sections
+      return;
+    }
+
+    const gridStyle = getComputedStyle(this.host.$.grid);
+    const columns = gridStyle.gridTemplateColumns.split(' ');
+    const currentColspan = item.colspan || 1;
+    const currentRowspan = item.rowspan || 1;
+
+    const newColspan = Math.min(Math.max(currentColspan + colspanDelta, 1), columns.length);
+    const newRowspan = Math.max(currentRowspan + rowspanDelta, 1);
+
+    if ((item.colspan || 1) === newColspan && (item.rowspan || 1) === newRowspan) {
+      // No change in size
       return;
     }
 
+    // TODO: Event to be removed
     const resizeEvent = new CustomEvent('dashboard-item-drag-resize', {
-      detail: { item: this.resizedItem, colspan, rowspan },
+      detail: { item: this.resizedItem, colspan: newColspan, rowspan: newRowspan },
       cancelable: true,
     });
 
@@ -153,10 +175,9 @@ export class WidgetResizeController {
       return;
     }
 
-    this.resizedItem.colspan = colspan;
-    this.resizedItem.rowspan = rowspan;
+    item.colspan = newColspan;
+    item.rowspan = newRowspan;
     this.host.items = [...this.host.items];
-    requestAnimationFrame(() => this.__updateWidgetStyles());
   }
 
   /** @private */
@@ -174,6 +195,16 @@ export class WidgetResizeController {
     }
   }
 
+  /**
+   * Handle the item-resize event dispatched by a widget / section.
+   * @private
+   */
+  __itemResize(e) {
+    e.stopImmediatePropagation();
+    const item = getElementItem(e.target);
+    this.__resizeItem(item, e.detail.colspanDelta, e.detail.rowspanDelta);
+  }
+
   hostDisconnected() {
     document.removeEventListener('touchmove', this.__touchMoveCancelListener);
   }
diff --git a/packages/dashboard/test/dashboard-keyboard.test.ts b/packages/dashboard/test/dashboard-keyboard.test.ts
new file mode 100644
index 0000000000..7b502cacc8
--- /dev/null
+++ b/packages/dashboard/test/dashboard-keyboard.test.ts
@@ -0,0 +1,339 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+import '../vaadin-dashboard.js';
+import type { Dashboard, DashboardItem } from '../vaadin-dashboard.js';
+import {
+  describeBidirectional,
+  getElementFromCell,
+  setGap,
+  setMaximumColumnWidth,
+  setMinimumColumnWidth,
+} from './helpers.js';
+
+type TestDashboardItem = DashboardItem & { id: number };
+
+describe('dashboard - keyboard interaction', () => {
+  let dashboard: Dashboard<TestDashboardItem>;
+  let keydownSpy;
+  const columnWidth = 200;
+
+  beforeEach(async () => {
+    dashboard = fixtureSync('<vaadin-dashboard></vaadin-dashboard>');
+    dashboard.style.width = `${columnWidth * 2}px`;
+    dashboard.editable = true;
+    keydownSpy = sinon.spy();
+    dashboard.addEventListener('keydown', keydownSpy);
+    setMinimumColumnWidth(dashboard, columnWidth);
+    setMaximumColumnWidth(dashboard, columnWidth);
+    setGap(dashboard, 0);
+
+    dashboard.items = [{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }];
+    dashboard.renderer = (root, _, model) => {
+      if (root.firstElementChild?.id !== `item-${model.item.id}`) {
+        root.textContent = '';
+        const widget = document.createElement('vaadin-dashboard-widget');
+        widget.id = `item-${model.item.id}`;
+        widget.widgetTitle = `${model.item.id} title`;
+        root.appendChild(widget);
+      }
+    };
+    await nextFrame();
+
+    // Make sure the following tab goes back to the first widget (needed for Firefox)
+    const widget = getElementFromCell(dashboard, 0, 0)!;
+    widget.focus();
+    await nextFrame();
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ up: 'Shift' });
+    await nextFrame();
+  });
+
+  it('should focus the widget', async () => {
+    const widget = getElementFromCell(dashboard, 0, 0)!;
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement).to.equal(widget);
+    expect(widget.hasAttribute('focused')).to.be.true;
+    expect(widget.hasAttribute('selected')).to.be.false;
+  });
+
+  it('should select the widget', async () => {
+    const widget = getElementFromCell(dashboard, 0, 0)!;
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ press: 'Space' });
+    expect(widget.hasAttribute('focused')).to.be.true;
+    expect(widget.hasAttribute('selected')).to.be.true;
+  });
+
+  it('should not remove the widget on backspace', async () => {
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ press: 'Backspace' });
+    expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+  });
+
+  it('should not focus the section on section widget focus', async () => {
+    const widget = getElementFromCell(dashboard, 1, 0)!;
+    widget.focus();
+    await nextFrame();
+    expect(document.activeElement).to.equal(widget);
+    expect(widget.hasAttribute('focused')).to.be.true;
+    expect(widget.hasAttribute('selected')).to.be.false;
+
+    const section = widget.closest('vaadin-dashboard-section')!;
+    expect(section.hasAttribute('focused')).to.be.false;
+  });
+
+  it('should tab to the next widget', async () => {
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ press: 'Tab' });
+    expect(document.activeElement).to.equal(getElementFromCell(dashboard, 0, 1));
+  });
+
+  describe('selected widget', () => {
+    beforeEach(async () => {
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Space' });
+    });
+
+    it('should deselect the widget on escape', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      await sendKeys({ press: 'Escape' });
+      expect(widget.hasAttribute('selected')).to.be.false;
+      expect(widget.hasAttribute('focused')).to.be.true;
+    });
+
+    it('should blur deselected widget on shift tab', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+      expect(widget.hasAttribute('selected')).to.be.false;
+      expect(widget.hasAttribute('focused')).to.be.false;
+      expect(widget.contains(document.activeElement)).to.be.false;
+    });
+
+    it('should tab to the widget controls', async () => {
+      await sendKeys({ press: 'Tab' });
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(widget.contains(document.activeElement)).to.be.true;
+    });
+
+    it('should deselect the widget on blur', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      const anotherWidget = getElementFromCell(dashboard, 0, 1)!;
+      anotherWidget.focus();
+      await nextFrame();
+      expect(widget.hasAttribute('selected')).to.be.false;
+      expect(widget.hasAttribute('focused')).to.be.false;
+    });
+
+    it('should remove the widget on backspace', async () => {
+      await sendKeys({ press: 'Backspace' });
+      expect(dashboard.items).to.eql([{ id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should remove the widget on delete', async () => {
+      await sendKeys({ press: 'Delete' });
+      expect(dashboard.items).to.eql([{ id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should move the widget forwards on arrow down', async () => {
+      await sendKeys({ press: 'ArrowDown' });
+      expect(dashboard.items).to.eql([{ id: 1 }, { id: 0 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should move the widget backwards on arrow up', async () => {
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowUp' });
+      expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should increase the widget row span on shift + arrow down', async () => {
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ up: 'Shift' });
+      expect((dashboard.items[0] as DashboardItem).rowspan).to.equal(2);
+    });
+
+    it('should decrease the widget row span on shift + arrow up', async () => {
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ press: 'ArrowUp' });
+      await sendKeys({ up: 'Shift' });
+      expect((dashboard.items[0] as DashboardItem).rowspan).to.equal(1);
+    });
+
+    it('should not move the widget on arrow down if ctrl key is pressed', async () => {
+      await sendKeys({ down: 'Control' });
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ up: 'Control' });
+      expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should cancel the default action on backspace', async () => {
+      keydownSpy.resetHistory();
+      await sendKeys({ press: 'Backspace' });
+      expect(keydownSpy.firstCall.args[0].defaultPrevented).to.be.true;
+    });
+
+    it('should cancel the default action on escape', async () => {
+      keydownSpy.resetHistory();
+      await sendKeys({ press: 'Escape' });
+      expect(keydownSpy.firstCall.args[0].defaultPrevented).to.be.true;
+    });
+
+    it('should cancel the default action on ArrowDown', async () => {
+      keydownSpy.resetHistory();
+      await sendKeys({ press: 'ArrowDown' });
+      expect(keydownSpy.firstCall.args[0].defaultPrevented).to.be.true;
+    });
+
+    it('should cancel the default action on shift + ArrowDown', async () => {
+      await sendKeys({ down: 'Shift' });
+      keydownSpy.resetHistory();
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ up: 'Shift' });
+      expect(keydownSpy.firstCall.args[0].defaultPrevented).to.be.true;
+    });
+
+    it('should not cancel the default action on unrelated keydown', async () => {
+      keydownSpy.resetHistory();
+      await sendKeys({ press: 'A' });
+      expect(keydownSpy.firstCall.args[0].defaultPrevented).to.be.false;
+    });
+
+    it('should do nothing to the first widget on arrow up', async () => {
+      await sendKeys({ press: 'ArrowUp' });
+      expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should do nothing to the last widget on arrow down', async () => {
+      getElementFromCell(dashboard, 1, 1)!.focus();
+      await sendKeys({ press: 'Space' });
+      await sendKeys({ press: 'ArrowDown' });
+      expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+
+    it('should trap focus inside the widget', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      for (let i = 0; i < 10; i++) {
+        await sendKeys({ press: 'Tab' });
+        expect(widget.contains(document.activeElement)).to.be.true;
+      }
+    });
+
+    it('should release focus trap on deselect', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+      expect(widget.contains(document.activeElement)).to.be.false;
+    });
+
+    describeBidirectional('horizontal', () => {
+      let arrowForwards;
+      let arrowBackwards;
+
+      beforeEach(() => {
+        arrowForwards = document.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+        arrowBackwards = document.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+      });
+
+      it('should move the widget forwards on arrow forwards', async () => {
+        await sendKeys({ press: arrowForwards });
+        expect(dashboard.items).to.eql([{ id: 1 }, { id: 0 }, { items: [{ id: 2 }, { id: 3 }] }]);
+      });
+
+      it('should move the widget backwards on arrow backwards', async () => {
+        await sendKeys({ press: arrowForwards });
+        await sendKeys({ press: arrowBackwards });
+        expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+      });
+
+      it('should increase the widget column span on shift + arrow forwards', async () => {
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: arrowForwards });
+        await sendKeys({ up: 'Shift' });
+        expect((dashboard.items[0] as DashboardItem).colspan).to.equal(2);
+      });
+
+      it('should decrease the widget column span on shift + arrow backwards', async () => {
+        await sendKeys({ down: 'Shift' });
+        await sendKeys({ press: arrowForwards });
+        await sendKeys({ press: arrowBackwards });
+        await sendKeys({ up: 'Shift' });
+        expect((dashboard.items[0] as DashboardItem).colspan).to.equal(1);
+      });
+    });
+  });
+
+  describe('selected section', () => {
+    let section: HTMLElement;
+    beforeEach(async () => {
+      const widget = getElementFromCell(dashboard, 1, 0)!;
+      section = widget.closest('vaadin-dashboard-section')!;
+      section.focus();
+      await sendKeys({ press: 'Space' });
+      await nextFrame();
+    });
+
+    it('should deselect the section on escape', async () => {
+      await sendKeys({ press: 'Escape' });
+      expect(section.hasAttribute('selected')).to.be.false;
+      expect(section.hasAttribute('focused')).to.be.true;
+    });
+
+    it('should blur deselected selected on shift tab', async () => {
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+      expect(section.hasAttribute('selected')).to.be.false;
+      expect(section.hasAttribute('focused')).to.be.false;
+      expect(section.contains(document.activeElement)).to.be.false;
+    });
+
+    it('should tab to the section controls', async () => {
+      await sendKeys({ press: 'Tab' });
+      expect(section.contains(document.activeElement)).to.be.true;
+    });
+
+    it('should deselect the section on blur', async () => {
+      const anotherWidget = getElementFromCell(dashboard, 0, 1)!;
+      anotherWidget.focus();
+      await nextFrame();
+      expect(section.hasAttribute('selected')).to.be.false;
+      expect(section.hasAttribute('focused')).to.be.false;
+    });
+
+    it('should trap focus inside the widget', async () => {
+      const sectionWidgets = section.querySelectorAll('vaadin-dashboard-widget');
+      for (let i = 0; i < 10; i++) {
+        await sendKeys({ press: 'Tab' });
+        expect(section.contains(document.activeElement)).to.be.true;
+        sectionWidgets.forEach((sectionWidget) => {
+          expect(sectionWidget.contains(document.activeElement)).to.be.false;
+        });
+      }
+    });
+
+    it('should release focus trap on deselect', async () => {
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+      expect(section.contains(document.activeElement)).to.be.false;
+    });
+
+    it('should not increase the section row span on shift + arrow down', async () => {
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ up: 'Shift' });
+      expect(dashboard.items).to.eql([{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }]);
+    });
+  });
+});