diff --git a/contentcuration/contentcuration/frontend/shared/utils/testing.js b/contentcuration/contentcuration/frontend/shared/utils/testing.js
index cc78737696..37c3e4cd45 100644
--- a/contentcuration/contentcuration/frontend/shared/utils/testing.js
+++ b/contentcuration/contentcuration/frontend/shared/utils/testing.js
@@ -25,3 +25,18 @@ export async function resetMockChannelScope() {
   Session.currentChannelId = Session._oldCurrentChannelId;
   delete Session._oldCurrentChannelId;
 }
+
+/**
+ * Tab into the component under test, entering backwards from a sentinel after it.
+ *
+ * Tabbing forward from the start of the document stops on the CSRF input the
+ * shared Jest setup leaves at the top of the body.
+ *
+ * @param {import('@testing-library/user-event').UserEvent} user
+ */
+export async function tabIn(user) {
+  const sentinel = document.body.appendChild(document.createElement('button'));
+  sentinel.focus();
+  await user.tab({ shift: true });
+  sentinel.remove();
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
index 7a0616624b..80ff7e1d42 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
@@ -85,9 +85,11 @@
     }
   }
 
+  /* No z-index: the stacking context it opens would trap the fixed toolbars and
+    popovers of an editor in the slot. Being positioned and later in the DOM
+    already paints this above the overlay button. */
   .content-wrapper {
     position: relative;
-    z-index: 1;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 0e114c49ea..bda590a756 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -13,6 +13,8 @@
     :aria-label="editorMode === 'edit' ? TipTapEditorLabel$() : TipTapViewerLabel$()"
     aria-multiline="true"
     @keydown="handleContainerKeydown"
+    @focusin="hasFocusWithin = true"
+    @focusout="handleFocusout"
   >
     <div v-if="editorMode === 'edit'">
       <EditorToolbar
@@ -21,16 +23,11 @@
         @minimize="emitMinimize"
       />
 
-      <div v-else>
-        <MobileTopBar
-          v-on="sharedEventHandlers"
-          @minimize="emitMinimize"
-        />
-        <MobileFormattingBar
-          v-if="isFocused"
-          v-on="sharedEventHandlers"
-        />
-      </div>
+      <MobileTopBar
+        v-else
+        v-on="sharedEventHandlers"
+        @minimize="emitMinimize"
+      />
     </div>
 
     <div
@@ -97,6 +94,13 @@
       @drop.native.prevent="handleDrop"
       @dragover.native.prevent
     />
+
+    <!-- After the content area: the bar is pinned below it on screen, so Tab out of
+      the content should reach it rather than leave the editor. -->
+    <MobileFormattingBar
+      v-if="isTouchDevice && editorMode === 'edit' && hasFocusWithin"
+      v-on="sharedEventHandlers"
+    />
   </div>
 
 </template>
@@ -167,6 +171,15 @@
         'insert-math': target => mathHandler.openCreateMathModal({ targetElement: target }),
       }));
 
+      // Tracked on the container rather than on the editor content: tabbing out of
+      // the content blurs it, and the re-render that blur schedules would unmount
+      // the mobile formatting bar before focus could land on it. `focusout` is the
+      // only signal that names where focus is going, so it alone clears this.
+      const hasFocusWithin = ref(false);
+      const handleFocusout = event => {
+        hasFocusWithin.value = editorContainer.value.contains(event.relatedTarget);
+      };
+
       const handleDrop = event => {
         const file = event.dataTransfer.files[0];
         if (file) {
@@ -278,7 +291,8 @@
       return {
         editorContainer,
         isReady,
-        isFocused,
+        hasFocusWithin,
+        handleFocusout,
         handleDrop,
         linkHandler,
         editor,
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
index ba1b764548..b403506d65 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js
@@ -383,10 +383,6 @@ const MESSAGES = {
     message: 'Insert content menu',
     context: 'Accessibility label for the insert content menu button',
   },
-  insertContentOption: {
-    message: 'Insert content option',
-    context: 'Accessibility label for the insert content dropdown menu',
-  },
 };
 
 let TipTapEditorStrings = null;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
index df6732dff6..c159c85207 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue
@@ -81,6 +81,7 @@
       <template #more="{ overflowItems }">
         <button
           class="more-button"
+          data-toolbar-item
           :class="
             $computedClass({
               ':is([aria-expanded=\'true\'])': {
@@ -142,6 +143,7 @@
   import { useToolbarActions } from '../composables/useToolbarActions';
   import { getTipTapEditorStrings } from '../TipTapEditorStrings';
   import { useDropdowns } from '../composables/useDropdowns';
+  import { useRovingTabIndex } from '../composables/useRovingTabIndex';
   import ToolbarButton from './toolbar/ToolbarButton.vue';
   import FormatDropdown from './toolbar/FormatDropdown.vue';
   import PasteDropdown from './toolbar/PasteDropdown.vue';
@@ -157,6 +159,7 @@
     },
     setup(props, { emit }) {
       const toolbarRef = ref(null);
+      useRovingTabIndex(toolbarRef);
 
       const {
         handleCopy,
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkBubbleMenu.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkBubbleMenu.vue
index 4746dd2174..a8962f3ec3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkBubbleMenu.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkBubbleMenu.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="toolbarRef"
     class="link-bubble-menu"
     role="toolbar"
     :aria-label="linkActions$()"
@@ -9,6 +10,7 @@
       :href="href"
       target="_blank"
       class="link-url"
+      data-toolbar-item
       :aria-label="`${goToLink$()} ${opensInNewTab$()}`"
     >
       {{ goToLink$() }}
@@ -22,6 +24,7 @@
 
     <button
       class="bubble-menu-button"
+      data-toolbar-item
       :title="copyLink$()"
       :aria-label="copyLink$()"
       @click="copyToClipboard(href)"
@@ -35,6 +38,7 @@
 
     <button
       class="bubble-menu-button"
+      data-toolbar-item
       :title="editLink$()"
       :aria-label="editLink$()"
       @click="onEdit"
@@ -48,6 +52,7 @@
 
     <button
       class="bubble-menu-button"
+      data-toolbar-item
       :title="removeLink$()"
       :aria-label="removeLink$()"
       @click="onRemove"
@@ -65,12 +70,17 @@
 
 <script>
 
-  import { defineComponent, computed, inject } from 'vue';
+  import { defineComponent, computed, inject, ref } from 'vue';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
+  import { useRovingTabIndex } from '../../composables/useRovingTabIndex';
 
   export default defineComponent({
     name: 'LinkBubbleMenu',
     setup(props) {
+      const toolbarRef = ref(null);
+
+      useRovingTabIndex(toolbarRef);
+
       const { goToLink$, copyLink$, editLink$, removeLink$, linkActions$, opensInNewTab$ } =
         getTipTapEditorStrings();
 
@@ -82,6 +92,7 @@
       };
 
       return {
+        toolbarRef,
         href,
         onEdit: () => openLinkEditor('edit'),
         onRemove: removeLink,
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
index 97c1e676b5..94b8f27e81 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue
@@ -8,6 +8,7 @@
     <button
       ref="dropdownButton"
       class="format-dropdown"
+      data-toolbar-item
       :aria-expanded="isOpen"
       :aria-haspopup="true"
       :aria-label="textFormatOptions$()"
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
index 7cd939cf70..c06e19a990 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="toolbarRef"
     class="floating-panel"
     role="toolbar"
     :aria-label="textFormattingToolbar$()"
@@ -12,6 +13,7 @@
     >
       <button
         class="toggle-btn"
+        data-toolbar-item
         :title="isExpanded ? collapseFormattingBar$() : expandFormattingBar$()"
         :aria-label="isExpanded ? collapseFormattingBar$() : expandFormattingBar$()"
         :aria-expanded="isExpanded"
@@ -22,11 +24,14 @@
         {{ isExpanded ? '×' : '+' }}
       </button>
     </div>
+    <!-- Chrome gives a scroll container its own tab stop once the roving tabindex
+      has left every child at -1. -->
     <div
       v-if="isExpanded"
       id="formatting-tools"
       class="scrollable-tools"
       :aria-label="textFormattingToolbar$()"
+      tabindex="-1"
       @touchstart="event => event.stopPropagation()"
       @touchend="event => event.stopPropagation()"
     >
@@ -36,7 +41,8 @@
         :aria-label="formatSize$()"
       >
         <button
-          :disabled="!canDecreaseFormat"
+          data-toolbar-item
+          :aria-disabled="canDecreaseFormat ? 'false' : 'true'"
           :title="decreaseFormatSize$()"
           :aria-label="decreaseFormatSize$()"
           class="format-btn"
@@ -51,7 +57,8 @@
           aria-hidden="true"
         >
         <button
-          :disabled="!canIncreaseFormat"
+          data-toolbar-item
+          :aria-disabled="canIncreaseFormat ? 'false' : 'true'"
           :title="increaseFormatSize$()"
           :aria-label="increaseFormatSize$()"
           class="format-btn"
@@ -122,6 +129,7 @@
   import { useToolbarActions } from '../../composables/useToolbarActions';
   import { useFormatControls } from '../../composables/useFormatControls';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
+  import { useRovingTabIndex } from '../../composables/useRovingTabIndex';
   import ToolbarButton from './ToolbarButton.vue';
   import ToolbarDivider from './ToolbarDivider.vue';
 
@@ -132,6 +140,9 @@
       const isExpanded = ref(true);
       const keyboardOffset = ref(0);
       const editor = inject('editor');
+      const toolbarRef = ref(null);
+
+      useRovingTabIndex(toolbarRef);
 
       const {
         collapseFormattingBar$,
@@ -155,13 +166,14 @@
       onMounted(() => {
         if (editor.value) {
           // Use a timeout to allow the keyboard to start appearing
-          setTimeout(() => {
+          const scrollTimeout = setTimeout(() => {
             const { from } = editor.value.state.selection;
             editor.value.view.dom.querySelector(`[pos="${from}"]`)?.scrollIntoView({
               behavior: 'smooth',
               block: 'nearest',
             });
           }, 150);
+          onUnmounted(() => clearTimeout(scrollTimeout));
         }
 
         const vk = navigator.virtualKeyboard;
@@ -207,6 +219,7 @@
       return {
         isExpanded,
         keyboardOffset,
+        toolbarRef,
         textActions,
         listActions,
         insertTools,
@@ -306,12 +319,18 @@
     border-radius: 0.25rem;
   }
 
-  .format-btn:disabled {
+  .format-btn[aria-disabled='true'] {
     color: #d1d5da;
     cursor: not-allowed;
     border-color: #e1e5e9;
   }
 
+  .toggle-btn:focus-visible,
+  .format-btn:focus-visible {
+    background: #e6e6e6;
+    outline: 2px solid #0097f2;
+  }
+
   .scrollable-tools {
     display: flex;
     flex-grow: 1;
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
index 6efd6bb322..8b00b840a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileTopBar.vue
@@ -1,6 +1,7 @@
 <template>
 
   <div
+    ref="toolbarRef"
     class="toolbar top-bar"
     role="toolbar"
     :aria-label="editorControls$()"
@@ -20,50 +21,36 @@
       />
     </div>
 
-    <div class="insert-container">
-      <div class="topbar-actions">
-        <button
-          class="insert-button"
-          :title="insertContent$()"
-          :aria-label="insertContentMenu$()"
-          :aria-expanded="isInsertMenuOpen"
-          aria-haspopup="menu"
-          aria-controls="insert-menu"
-          @click="isInsertMenuOpen = !isInsertMenuOpen"
-        >
-          +
-        </button>
-        <ToolbarButton
-          :title="minimizeAction.title"
-          :icon="minimizeAction.icon"
-          @click="minimizeAction.handler"
-        />
-      </div>
-
-      <div
-        v-if="isInsertMenuOpen"
-        id="insert-menu"
-        ref="dropdown"
-        class="insert-dropdown"
-        role="menu"
-        :aria-label="insertContentOption$()"
+    <div class="topbar-actions">
+      <button
+        class="insert-button"
+        data-toolbar-item
+        :title="insertContent$()"
+        :aria-label="insertContentMenu$()"
       >
-        <button
-          v-for="tool in insertTools"
-          :key="tool.name"
-          class="dropdown-item"
-          role="menuitem"
-          @click="tool.handler($event)"
+        +
+        <KDropdownMenu
+          :options="insertOptions"
+          @select="onInsertSelect"
         >
-          <img
-            :src="tool.icon"
-            alt=""
-            class="dropdown-icon"
-            aria-hidden="true"
-          >
-          <span class="dropdown-title">{{ tool.title }}</span>
-        </button>
-      </div>
+          <template #option="{ option }">
+            <div class="insert-option">
+              <img
+                :src="option.icon"
+                alt=""
+                class="dropdown-icon"
+                aria-hidden="true"
+              >
+              <span>{{ option.label }}</span>
+            </div>
+          </template>
+        </KDropdownMenu>
+      </button>
+      <ToolbarButton
+        :title="minimizeAction.title"
+        :icon="minimizeAction.icon"
+        @click="minimizeAction.handler"
+      />
     </div>
   </div>
 
@@ -72,59 +59,48 @@
 
 <script>
 
-  import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
+  import { defineComponent, computed, ref } from 'vue';
   import { useToolbarActions } from '../../composables/useToolbarActions';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
+  import { useRovingTabIndex } from '../../composables/useRovingTabIndex';
   import ToolbarButton from './ToolbarButton.vue';
 
   export default defineComponent({
     name: 'MobileTopBar',
     components: { ToolbarButton },
     setup(props, { emit }) {
-      const isInsertMenuOpen = ref(false);
-      const dropdown = ref(null);
+      const toolbarRef = ref(null);
+
+      useRovingTabIndex(toolbarRef);
 
       const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
       // Get translation functions
-      const {
-        editorControls$,
-        historyActions$,
-        insertContent$,
-        insertContentMenu$,
-        insertContentOption$,
-      } = getTipTapEditorStrings();
-
-      const handleClickOutside = event => {
-        if (
-          isInsertMenuOpen.value &&
-          dropdown.value &&
-          !dropdown.value.contains(event.target) &&
-          !event.target.classList.contains('insert-button')
-        ) {
-          isInsertMenuOpen.value = false;
-        }
+      const { editorControls$, historyActions$, insertContent$, insertContentMenu$ } =
+        getTipTapEditorStrings();
+
+      const insertOptions = computed(() =>
+        insertTools.value.map(tool => ({ ...tool, label: tool.title })),
+      );
+
+      const onInsertSelect = (option, event) => {
+        // KDropdownMenu renders outside the editor, so this click would otherwise
+        // reach the RTE's outside-click handler and minimize the editor.
+        event.stopPropagation();
+        // Nothing to anchor a modal to: the menu item is gone once the menu closes.
+        option.handler(null);
       };
 
-      onMounted(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-      });
-
-      onBeforeUnmount(() => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      });
-
       return {
         historyActions,
-        insertTools,
+        insertOptions,
         minimizeAction,
-        isInsertMenuOpen,
-        dropdown,
+        onInsertSelect,
+        toolbarRef,
         editorControls$,
         historyActions$,
         insertContent$,
         insertContentMenu$,
-        insertContentOption$,
       };
     },
   });
@@ -155,10 +131,6 @@
     align-items: center;
   }
 
-  .insert-container {
-    position: relative;
-  }
-
   .insert-button {
     display: flex;
     align-items: center;
@@ -173,50 +145,26 @@
     opacity: 0.8;
   }
 
-  .insert-dropdown {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    z-index: 2;
-    width: 200px;
-    padding: 0.5rem 0;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 44px;
-    padding: 0.75rem 1rem;
-    text-align: left;
-    cursor: pointer;
-    background: none;
-    border: 0;
-  }
-
-  .dropdown-item:hover {
-    background: #f5f5f5;
-  }
-
-  .dropdown-item:focus-visible,
   .insert-button:focus-visible {
     background: #e6e6e6;
     border-radius: 4px;
     outline: 2px solid #0097f2;
   }
 
+  /* Matches the overflow menu on EditorToolbar */
+  .insert-option {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 8px 12px;
+    font-size: 1.2rem;
+    line-height: 140%;
+  }
+
   .dropdown-icon {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
-    margin-right: 1rem;
-  }
-
-  .dropdown-title {
-    font-size: 1rem;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
index 4d29e019e5..af7de65462 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue
@@ -7,6 +7,7 @@
   >
     <button
       class="paste-main-btn toolbar-btn"
+      data-toolbar-item
       :title="paste$()"
       :aria-label="paste$()"
       @click="handlePaste"
@@ -21,6 +22,7 @@
     <button
       ref="dropdownButton"
       class="paste-dropdown-btn"
+      data-toolbar-item
       :title="pasteOptions$()"
       :aria-expanded="isOpen"
       :aria-haspopup="true"
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
index 2e1775128b..b854262680 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue
@@ -4,8 +4,8 @@
     class="toolbar-btn"
     :title="title"
     :class="{ active: isActive, disabled: !isAvailable }"
-    :disabled="!isAvailable"
-    :tabindex="isAvailable ? 0 : -1"
+    data-toolbar-item
+    :aria-disabled="isAvailable ? 'false' : 'true'"
     :aria-label="title"
     :aria-pressed="isActive ? 'true' : 'false'"
     @mousedown.prevent
@@ -143,12 +143,6 @@
     opacity: 0.3;
   }
 
-  .toolbar-btn:disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.3;
-  }
-
   .toolbar-icon.rtl-flip {
     transform: scaleX(-1);
   }
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useRovingTabIndex.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useRovingTabIndex.js
new file mode 100644
index 0000000000..573e6bbffe
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useRovingTabIndex.js
@@ -0,0 +1,89 @@
+import { onMounted, onUnmounted } from 'vue';
+
+const TOOLBAR_ITEM_SELECTOR = '[data-toolbar-item]';
+
+/**
+ * Roving tabindex over the `[data-toolbar-item]` controls inside `containerRef`,
+ * per the WAI-ARIA APG toolbar pattern.
+ *
+ * Controls must not bind `tabindex` themselves — a re-render would strip the
+ * toolbar's only tab stop.
+ *
+ * @param {import('vue').Ref<HTMLElement>} containerRef - the `role="toolbar"` element.
+ */
+export function useRovingTabIndex(containerRef) {
+  // Vue clears template refs before `onUnmounted`, so hold the element itself
+  // for the lifetime of the listeners.
+  let container = null;
+  let activeItem = null;
+  let observer = null;
+
+  // KListWithOverflow leaves overflowed controls in the DOM and hides them by
+  // setting `visibility` on their wrapper, so only the computed value shows it.
+  const getItems = () =>
+    Array.from(container.querySelectorAll(TOOLBAR_ITEM_SELECTOR)).filter(
+      item => window.getComputedStyle(item).visibility !== 'hidden',
+    );
+
+  const syncTabIndexes = () => {
+    const items = getItems();
+    if (!items.includes(activeItem)) {
+      activeItem = items[0] || null;
+    }
+    items.forEach(item => item.setAttribute('tabindex', item === activeItem ? '0' : '-1'));
+  };
+
+  const handleKeydown = event => {
+    const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
+    if (!step) {
+      return;
+    }
+    // Open menus own their arrow keys; a control must not become navigable
+    // just because a menu was nested inside it.
+    if (event.target.closest('[role="menu"]')) {
+      return;
+    }
+    const items = getItems();
+    const index = items.indexOf(event.target.closest(TOOLBAR_ITEM_SELECTOR));
+    if (index === -1) {
+      return;
+    }
+    event.preventDefault();
+    // `window.isRTL` is the page direction, rendered server-side by `base.html`.
+    const offset = window.isRTL ? -step : step;
+    activeItem = items[(index + offset + items.length) % items.length];
+    syncTabIndexes();
+    activeItem.focus();
+  };
+
+  // Tabbing back into the toolbar must return to the control that last had focus.
+  const handleFocusin = event => {
+    const item = event.target.closest(TOOLBAR_ITEM_SELECTOR);
+    if (item) {
+      activeItem = item;
+      syncTabIndexes();
+    }
+  };
+
+  onMounted(() => {
+    container = containerRef.value;
+    container.addEventListener('keydown', handleKeydown);
+    container.addEventListener('focusin', handleFocusin);
+    observer = new MutationObserver(syncTabIndexes);
+    // Filtering to `style` — the attribute that hides overflowed controls — also
+    // keeps our own `tabindex` writes from re-triggering this.
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style'],
+    });
+    syncTabIndexes();
+  });
+
+  onUnmounted(() => {
+    container.removeEventListener('keydown', handleKeydown);
+    container.removeEventListener('focusin', handleFocusin);
+    observer.disconnect();
+  });
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/EditorToolbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/EditorToolbar.spec.js
new file mode 100644
index 0000000000..4e4ff8a0a2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/EditorToolbar.spec.js
@@ -0,0 +1,102 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { ref, nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import EditorToolbar from '../TipTapEditor/components/EditorToolbar.vue';
+import { getTipTapEditorStrings } from '../TipTapEditor/TipTapEditorStrings';
+import { tabIn } from 'shared/utils/testing';
+
+const { textFormatOptions$ } = getTipTapEditorStrings();
+
+// Every editor read the toolbar makes while rendering: undo/redo availability,
+// mark state, the alignment probe in `getEffectiveAlignment`, and the
+// transaction listener in `useDropdowns`.
+function makeEditorStub({ canUndo = true, canRedo = false } = {}) {
+  return {
+    isActive: () => false,
+    can: () => ({ undo: () => canUndo, redo: () => canRedo }),
+    state: {
+      selection: { from: 0, to: 0, empty: true },
+      doc: { nodesBetween: () => {} },
+    },
+    view: { domAtPos: () => ({ node: document.createElement('div') }) },
+    on: () => {},
+    off: () => {},
+  };
+}
+
+// In jsdom every control measures 0 wide, so KListWithOverflow restores them all
+// and drops the more button — two ticks after the first render.
+async function renderToolbar(editorOptions) {
+  const user = userEvent.setup();
+  const { container } = render(EditorToolbar, {
+    provide: { editor: ref(makeEditorStub(editorOptions)) },
+    router: new VueRouter(),
+  });
+  await nextTick();
+  await nextTick();
+  // Every button, not only the `data-toolbar-item` ones: an unmarked control
+  // would be a second tab stop.
+  return { user, container, controls: within(container).getAllByRole('button') };
+}
+
+describe('EditorToolbar roving tabindex', () => {
+  it('is a single tab stop, on the first control', async () => {
+    const { user, container, controls } = await renderToolbar();
+    expect(controls.length).toBeGreaterThan(1);
+
+    await tabIn(user);
+    expect(controls[0]).toHaveFocus();
+
+    await user.tab({ shift: true });
+    expect(container).not.toContainElement(document.activeElement);
+  });
+
+  it('moves focus to the next control on ArrowRight', async () => {
+    const { user, controls } = await renderToolbar();
+    controls[0].focus();
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(controls[1]).toHaveFocus();
+  });
+
+  it('wraps from the first control to the last on ArrowLeft', async () => {
+    const { user, controls } = await renderToolbar();
+    controls[0].focus();
+
+    await user.keyboard('{ArrowLeft}');
+
+    expect(controls[controls.length - 1]).toHaveFocus();
+  });
+
+  it('arrows on and off the format dropdown trigger like any other control', async () => {
+    const { user, controls } = await renderToolbar();
+    const index = controls.indexOf(screen.getByRole('button', { name: textFormatOptions$() }));
+    controls[index - 1].focus();
+
+    await user.keyboard('{ArrowRight}');
+    expect(controls[index]).toHaveFocus();
+
+    await user.keyboard('{ArrowRight}');
+    expect(controls[index + 1]).toHaveFocus();
+  });
+
+  it.each(['{Enter}', ' '])('opens the format dropdown with %p', async key => {
+    const { user } = await renderToolbar();
+    screen.getByRole('button', { name: textFormatOptions$() }).focus();
+
+    await user.keyboard(key);
+
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+  });
+
+  it('keeps the tab stop on an unavailable control', async () => {
+    const { user, controls } = await renderToolbar({ canUndo: false });
+
+    await tabIn(user);
+
+    expect(controls[0]).toHaveAttribute('aria-disabled', 'true');
+    expect(controls[0]).toHaveFocus();
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/LinkBubbleMenu.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/LinkBubbleMenu.spec.js
new file mode 100644
index 0000000000..27f86c7050
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/LinkBubbleMenu.spec.js
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import LinkBubbleMenu from '../TipTapEditor/components/link/LinkBubbleMenu.vue';
+import { tabIn } from 'shared/utils/testing';
+
+describe('LinkBubbleMenu roving tabindex', () => {
+  it('is a single tab stop, on the link itself', async () => {
+    const user = userEvent.setup();
+    const { container } = render(LinkBubbleMenu, {
+      props: { editor: { getAttributes: () => ({ href: 'https://example.com' }) } },
+      provide: { linkHandler: { openLinkEditor: () => {}, removeLink: () => {} } },
+      router: new VueRouter(),
+    });
+    // The link counts as a control here, so it has to take part in the roving
+    // tabindex like the buttons around it.
+    const controls = Array.from(container.querySelectorAll('a, button'));
+    expect(controls.length).toBeGreaterThan(1);
+
+    await tabIn(user);
+    expect(controls[0]).toHaveFocus();
+
+    // Out again in one press: an unmarked control would be a second tab stop.
+    await user.tab({ shift: true });
+    expect(container).not.toContainElement(document.activeElement);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileFormattingBar.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileFormattingBar.spec.js
new file mode 100644
index 0000000000..cacc9c49c2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileFormattingBar.spec.js
@@ -0,0 +1,123 @@
+import { render, screen, waitFor, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { ref, nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import MobileFormattingBar from '../TipTapEditor/components/toolbar/MobileFormattingBar.vue';
+import TipTapEditor from '../TipTapEditor/TipTapEditor.vue';
+import { getTipTapEditorStrings } from '../TipTapEditor/TipTapEditorStrings';
+import { tabIn } from 'shared/utils/testing';
+
+// The bar only renders in the touch-device layout. `isTouchDevice` reads `window`
+// once as it loads, and a module factory is the only hook that runs at that
+// moment — hence the mock that mocks nothing.
+jest.mock('shared/utils/browserInfo.js', () => {
+  global.window.ontouchstart = null;
+  return jest.requireActual('shared/utils/browserInfo.js');
+});
+
+const { decreaseFormatSize$, textFormattingToolbar$ } = getTipTapEditorStrings();
+
+const formattingBar = () => screen.queryByRole('toolbar', { name: textFormattingToolbar$() });
+
+// Every editor read the bar makes: the format level in `useFormatControls`, and
+// the selection the mount hook scrolls into view.
+function makeEditorStub({ smallText = false } = {}) {
+  return {
+    isActive: name => smallText && name === 'small',
+    state: { selection: { from: 0, to: 0 } },
+    view: { dom: document.createElement('div') },
+  };
+}
+
+describe('MobileFormattingBar roving tabindex', () => {
+  function renderBar() {
+    return render(MobileFormattingBar, {
+      provide: { editor: ref(makeEditorStub({ smallText: true })) },
+      router: new VueRouter(),
+    });
+  }
+
+  it('is a single tab stop, and keeps an unavailable format control in the order', async () => {
+    const user = userEvent.setup();
+    const { container } = renderBar();
+    const controls = within(container).getAllByRole('button');
+    const decrease = screen.getByRole('button', { name: decreaseFormatSize$() });
+    expect(controls.length).toBeGreaterThan(1);
+    expect(decrease).toHaveAttribute('aria-disabled', 'true');
+    expect(decrease).toBeEnabled();
+
+    await tabIn(user);
+    expect(controls[0]).toHaveFocus();
+
+    // Out again in one press: an unmarked control would be a second tab stop.
+    await user.tab({ shift: true });
+    expect(container).not.toContainElement(document.activeElement);
+  });
+
+  it('reaches the unavailable format control with the arrow keys', async () => {
+    const user = userEvent.setup();
+    const { container } = renderBar();
+    within(container).getAllByRole('button')[0].focus();
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(screen.getByRole('button', { name: decreaseFormatSize$() })).toHaveFocus();
+  });
+});
+
+describe('MobileFormattingBar keyboard reachability', () => {
+  beforeAll(() => {
+    // jsdom implements none of these, and ProseMirror measures the selection to
+    // scroll it into view whenever the editor takes focus.
+    Range.prototype.getClientRects = () => [];
+    Range.prototype.getBoundingClientRect = () => ({ top: 0, bottom: 0, left: 0, right: 0 });
+    Element.prototype.scrollIntoView = () => {};
+  });
+
+  async function renderMobileEditor() {
+    const { container } = render(TipTapEditor, {
+      props: { value: 'hello', mode: 'edit' },
+      router: new VueRouter(),
+    });
+    await waitFor(() => expect(container.querySelector('.ProseMirror')).not.toBeNull());
+    container.querySelector('.ProseMirror').focus();
+    await waitFor(() => expect(formattingBar()).toBeInTheDocument());
+    return container;
+  }
+
+  it('survives the re-render that blurring the content area schedules', async () => {
+    const container = await renderMobileEditor();
+
+    // A browser fires `blur` before `focusout`, and flushes microtasks in between,
+    // so the bar has to outlive the re-render that `blur` alone schedules —
+    // otherwise Tab is left with nothing to land on. jsdom's `.blur()` collapses
+    // the two, so raise the event on its own.
+    container
+      .querySelector('.ProseMirror')
+      .dispatchEvent(new FocusEvent('blur', { relatedTarget: null }));
+    await nextTick();
+
+    expect(formattingBar()).toBeInTheDocument();
+  });
+
+  it('takes the tab stop after the content area', async () => {
+    const user = userEvent.setup({ delay: null });
+    await renderMobileEditor();
+
+    await user.tab();
+
+    expect(formattingBar()).toContainElement(document.activeElement);
+  });
+
+  it('goes away once focus leaves the editor entirely', async () => {
+    const user = userEvent.setup({ delay: null });
+    await renderMobileEditor();
+    document.body.appendChild(document.createElement('button'));
+
+    await user.tab();
+    await user.tab();
+    await nextTick();
+
+    expect(formattingBar()).not.toBeInTheDocument();
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileTopBar.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileTopBar.spec.js
new file mode 100644
index 0000000000..e6710502a0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileTopBar.spec.js
@@ -0,0 +1,54 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { ref } from 'vue';
+import VueRouter from 'vue-router';
+import MobileTopBar from '../TipTapEditor/components/toolbar/MobileTopBar.vue';
+import { getTipTapEditorStrings } from '../TipTapEditor/TipTapEditorStrings';
+import { tabIn } from 'shared/utils/testing';
+
+const { insertContentMenu$, insertImage$ } = getTipTapEditorStrings();
+
+function makeEditorStub() {
+  return {
+    isActive: () => false,
+    can: () => ({ undo: () => false, redo: () => false }),
+  };
+}
+
+function renderTopBar() {
+  return render(MobileTopBar, {
+    provide: { editor: ref(makeEditorStub()) },
+    router: new VueRouter(),
+  });
+}
+
+describe('MobileTopBar roving tabindex', () => {
+  it('is a single tab stop, held by the unavailable undo control', async () => {
+    const user = userEvent.setup();
+    const { container } = renderTopBar();
+    const controls = within(container).getAllByRole('button');
+    expect(controls.length).toBeGreaterThan(1);
+
+    await tabIn(user);
+    expect(controls[0]).toHaveFocus();
+    expect(controls[0]).toHaveAttribute('aria-disabled', 'true');
+
+    // Out again in one press: an unmarked control would be a second tab stop.
+    await user.tab({ shift: true });
+    expect(container).not.toContainElement(document.activeElement);
+  });
+});
+
+describe('MobileTopBar insert menu', () => {
+  it('opens from the keyboard and takes focus', async () => {
+    const user = userEvent.setup();
+    renderTopBar();
+    screen.getByRole('button', { name: insertContentMenu$() }).focus();
+
+    await user.keyboard('{Enter}');
+
+    const menu = await screen.findByRole('menu');
+    expect(within(menu).getByText(insertImage$())).toBeInTheDocument();
+    expect(menu).toContainElement(document.activeElement);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/ToolbarButton.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/ToolbarButton.spec.js
new file mode 100644
index 0000000000..a5eda7b96e
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/ToolbarButton.spec.js
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import ToolbarButton from '../TipTapEditor/components/toolbar/ToolbarButton.vue';
+import { tabIn } from 'shared/utils/testing';
+
+const TITLE = 'Strong';
+
+function renderButton(props = {}) {
+  const { emitted } = render(ToolbarButton, {
+    props: { title: TITLE, icon: 'bold.svg', ...props },
+    router: new VueRouter(),
+  });
+  return { button: screen.getByRole('button', { name: TITLE }), emitted };
+}
+
+describe('ToolbarButton', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it('keeps an unavailable control focusable and marks it aria-disabled', async () => {
+    const { button } = renderButton({ isAvailable: false });
+
+    await tabIn(user);
+
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveFocus();
+  });
+
+  it('does not emit click when unavailable', async () => {
+    const { button, emitted } = renderButton({ isAvailable: false });
+
+    await user.click(button);
+
+    expect(emitted().click).toBeUndefined();
+  });
+
+  it('emits click when available', async () => {
+    const { button, emitted } = renderButton();
+
+    expect(button).toHaveAttribute('aria-disabled', 'false');
+
+    await user.click(button);
+
+    expect(emitted().click).toHaveLength(1);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/useRovingTabIndex.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/useRovingTabIndex.spec.js
new file mode 100644
index 0000000000..63f109fb5a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/useRovingTabIndex.spec.js
@@ -0,0 +1,123 @@
+import { render, screen, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { ref } from 'vue';
+import VueRouter from 'vue-router';
+import { useRovingTabIndex } from '../TipTapEditor/composables/useRovingTabIndex';
+
+// The menu is nested inside `three` rather than being a sibling: nesting is the
+// only arrangement that reaches the `[role="menu"]` guard, since a sibling menu
+// is already excluded by the item lookup.
+const Harness = {
+  template: `
+    <div ref="toolbar">
+      <button data-toolbar-item data-testid="one">one</button>
+      <button data-toolbar-item data-testid="two" aria-disabled="true">two</button>
+      <button data-toolbar-item data-testid="three">
+        three
+        <span role="menu"><span role="menuitem" tabindex="-1" data-testid="menu-item">m</span></span>
+      </button>
+      <button v-if="extra" data-toolbar-item data-testid="four">four</button>
+      <button data-testid="add" @click="extra = true">add</button>
+    </div>
+  `,
+  setup() {
+    const toolbar = ref(null);
+    const extra = ref(false);
+    useRovingTabIndex(toolbar);
+    return { toolbar, extra };
+  },
+};
+
+// The single tab stop and plain arrow movement are covered against the real
+// toolbars in EditorToolbar.spec.js; this file covers what those cannot reach.
+describe('useRovingTabIndex', () => {
+  let user, one, two, three, unmount;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    ({ unmount } = render(Harness, { router: new VueRouter() }));
+    one = screen.getByTestId('one');
+    two = screen.getByTestId('two');
+    three = screen.getByTestId('three');
+  });
+
+  afterEach(() => {
+    delete window.isRTL;
+  });
+
+  it('wraps to the first item on ArrowRight from the last item', async () => {
+    three.focus();
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(one).toHaveFocus();
+  });
+
+  it('skips controls KListWithOverflow has hidden', async () => {
+    two.style.visibility = 'hidden';
+    one.focus();
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(three).toHaveFocus();
+  });
+
+  it('reverses the arrow directions in RTL', async () => {
+    window.isRTL = true;
+    two.focus();
+
+    await user.keyboard('{ArrowRight}');
+    expect(one).toHaveFocus();
+
+    two.focus();
+    await user.keyboard('{ArrowLeft}');
+    expect(three).toHaveFocus();
+  });
+
+  it('returns the tab stop to the item that last had focus', async () => {
+    three.focus();
+
+    await user.tab();
+    await user.tab({ shift: true });
+
+    expect(three).toHaveFocus();
+  });
+
+  it('leaves focus and the tab stop alone for other keys', async () => {
+    one.focus();
+
+    await user.keyboard('{Enter}');
+
+    expect(one).toHaveFocus();
+    expect(one).toHaveAttribute('tabindex', '0');
+    expect(two).toHaveAttribute('tabindex', '-1');
+    expect(three).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('gives an item added after mount a tabindex', async () => {
+    await user.click(screen.getByTestId('add'));
+
+    await waitFor(() => expect(screen.getByTestId('four')).toHaveAttribute('tabindex', '-1'));
+  });
+
+  it('stops handling arrow keys once unmounted', () => {
+    unmount();
+
+    // Dispatched by hand rather than through `userEvent`: the items are detached
+    // from the document once unmounted, so nothing can focus them to type into.
+    one.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+
+    expect(one).toHaveAttribute('tabindex', '0');
+    expect(two).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('ignores arrow keys raised from inside an open menu', async () => {
+    three.focus();
+    screen.getByTestId('menu-item').focus();
+
+    await user.keyboard('{ArrowRight}');
+
+    expect(three).toHaveAttribute('tabindex', '0');
+    expect(one).toHaveAttribute('tabindex', '-1');
+  });
+});