diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 0e114c49ea..f24bc53c52 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -27,8 +27,10 @@
           @minimize="emitMinimize"
         />
         <MobileFormattingBar
-          v-if="isFocused"
+          v-if="isFocused || formattingBarHasFocus"
           v-on="sharedEventHandlers"
+          @focusin.native="formattingBarHasFocus = true"
+          @focusout.native="handleFormattingBarFocusout"
         />
       </div>
     </div>
@@ -167,6 +169,13 @@
         'insert-math': target => mathHandler.openCreateMathModal({ targetElement: target }),
       }));
 
+      // Tabbing into the bar blurs the editor, which would otherwise unmount
+      // the bar before focus lands on it.
+      const formattingBarHasFocus = ref(false);
+      const handleFormattingBarFocusout = event => {
+        formattingBarHasFocus.value = event.currentTarget.contains(event.relatedTarget);
+      };
+
       const handleDrop = event => {
         const file = event.dataTransfer.files[0];
         if (file) {
@@ -279,6 +288,8 @@
         editorContainer,
         isReady,
         isFocused,
+        formattingBarHasFocus,
+        handleFormattingBarFocusout,
         handleDrop,
         linkHandler,
         editor,
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..f5315dee7b 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"
@@ -36,7 +38,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 +54,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 +126,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 +137,9 @@
       const isExpanded = ref(true);
       const keyboardOffset = ref(0);
       const editor = inject('editor');
+      const toolbarRef = ref(null);
+
+      useRovingTabIndex(toolbarRef);
 
       const {
         collapseFormattingBar$,
@@ -207,6 +215,7 @@
       return {
         isExpanded,
         keyboardOffset,
+        toolbarRef,
         textActions,
         listActions,
         insertTools,
@@ -306,7 +315,7 @@
     border-radius: 0.25rem;
   }
 
-  .format-btn:disabled {
+  .format-btn[aria-disabled='true'] {
     color: #d1d5da;
     cursor: not-allowed;
     border-color: #e1e5e9;
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..f2cc4198bb 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$()"
@@ -24,6 +25,7 @@
       <div class="topbar-actions">
         <button
           class="insert-button"
+          data-toolbar-item
           :title="insertContent$()"
           :aria-label="insertContentMenu$()"
           :aria-expanded="isInsertMenuOpen"
@@ -75,6 +77,7 @@
   import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
   import { useToolbarActions } from '../../composables/useToolbarActions';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
+  import { useRovingTabIndex } from '../../composables/useRovingTabIndex';
   import ToolbarButton from './ToolbarButton.vue';
 
   export default defineComponent({
@@ -83,6 +86,9 @@
     setup(props, { emit }) {
       const isInsertMenuOpen = ref(false);
       const dropdown = ref(null);
+      const toolbarRef = ref(null);
+
+      useRovingTabIndex(toolbarRef);
 
       const { historyActions, insertTools, minimizeAction } = useToolbarActions(emit);
 
@@ -120,6 +126,7 @@
         minimizeAction,
         isInsertMenuOpen,
         dropdown,
+        toolbarRef,
         editorControls$,
         historyActions$,
         insertContent$,
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..851632130c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useRovingTabIndex.js
@@ -0,0 +1,91 @@
+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'));
+  };
+
+  // Page direction comes from `<html dir>`, rendered server-side by `base.html`.
+  const isRtl = () => document.documentElement.dir === 'rtl';
+
+  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();
+    const offset = 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 && getItems().includes(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..034de08953
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/EditorToolbar.spec.js
@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import { ref, nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import EditorToolbar from '../TipTapEditor/components/EditorToolbar.vue';
+import { getTipTapEditorStrings } from '../TipTapEditor/TipTapEditorStrings';
+
+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) {
+  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 screen.getAllByRole('button');
+}
+
+describe('EditorToolbar roving tabindex', () => {
+  it('is a single tab stop, on the first control', async () => {
+    const controls = await renderToolbar();
+
+    expect(controls.length).toBeGreaterThan(1);
+    expect(controls[0]).toHaveAttribute('tabindex', '0');
+    controls.slice(1).forEach(control => expect(control).toHaveAttribute('tabindex', '-1'));
+  });
+
+  it('moves focus and the tab stop to the next control on ArrowRight', async () => {
+    const controls = await renderToolbar();
+
+    await fireEvent.keyDown(controls[0], { key: 'ArrowRight' });
+
+    expect(controls[1]).toHaveFocus();
+    expect(controls[1]).toHaveAttribute('tabindex', '0');
+    expect(controls[0]).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('wraps from the first control to the last on ArrowLeft', async () => {
+    const controls = await renderToolbar();
+
+    await fireEvent.keyDown(controls[0], { key: 'ArrowLeft' });
+
+    expect(controls[controls.length - 1]).toHaveFocus();
+  });
+
+  it('arrows on and off the format dropdown trigger like any other control', async () => {
+    const controls = await renderToolbar();
+    const index = controls.indexOf(screen.getByRole('button', { name: textFormatOptions$() }));
+
+    await fireEvent.keyDown(controls[index - 1], { key: 'ArrowRight' });
+    expect(controls[index]).toHaveFocus();
+
+    await fireEvent.keyDown(controls[index], { key: 'ArrowRight' });
+    expect(controls[index + 1]).toHaveFocus();
+  });
+
+  it.each(['Enter', ' '])('opens the format dropdown with %p', async key => {
+    await renderToolbar();
+
+    await fireEvent.keyDown(screen.getByRole('button', { name: textFormatOptions$() }), { key });
+
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+  });
+
+  it('keeps the tab stop on an unavailable control', async () => {
+    const controls = await renderToolbar({ canUndo: false });
+
+    expect(controls[0]).toHaveAttribute('aria-disabled', 'true');
+    expect(controls[0]).toHaveAttribute('tabindex', '0');
+  });
+});
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..50ccea3634
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/LinkBubbleMenu.spec.js
@@ -0,0 +1,20 @@
+import { render } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import LinkBubbleMenu from '../TipTapEditor/components/link/LinkBubbleMenu.vue';
+
+describe('LinkBubbleMenu roving tabindex', () => {
+  it('is a single tab stop, on the first control', () => {
+    const { container } = render(LinkBubbleMenu, {
+      props: { editor: { getAttributes: () => ({ href: 'https://example.com' }) } },
+      provide: { linkHandler: { openLinkEditor: () => {}, removeLink: () => {} } },
+      router: new VueRouter(),
+    });
+    // Every control, the link included, not only the `data-toolbar-item` ones:
+    // an unmarked control would be a second tab stop.
+    const controls = Array.from(container.querySelectorAll('a, button'));
+
+    expect(controls.length).toBeGreaterThan(1);
+    expect(controls[0]).toHaveAttribute('tabindex', '0');
+    controls.slice(1).forEach(control => expect(control).toHaveAttribute('tabindex', '-1'));
+  });
+});
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..343a134b6e
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileFormattingBar.spec.js
@@ -0,0 +1,87 @@
+import { render, screen, waitFor } from '@testing-library/vue';
+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';
+
+// The bar only renders in the touch-device layout.
+jest.mock('shared/utils/browserInfo.js', () => ({ isTouchDevice: true }));
+
+const { decreaseFormatSize$ } = getTipTapEditorStrings();
+
+// 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', () => {
+  it('is a single tab stop, and keeps an unavailable format control in the order', () => {
+    render(MobileFormattingBar, {
+      provide: { editor: ref(makeEditorStub({ smallText: true })) },
+      router: new VueRouter(),
+    });
+    // Every control, not only the `data-toolbar-item` ones: an unmarked control
+    // would be a second tab stop.
+    const controls = screen.getAllByRole('button');
+    const decrease = screen.getByRole('button', { name: decreaseFormatSize$() });
+
+    expect(controls.length).toBeGreaterThan(1);
+    expect(decrease).toHaveAttribute('aria-disabled', 'true');
+    expect(decrease).toBeEnabled();
+    expect(controls[0]).toHaveAttribute('tabindex', '0');
+    controls.slice(1).forEach(control => expect(control).toHaveAttribute('tabindex', '-1'));
+  });
+});
+
+describe('MobileFormattingBar keyboard reachability', () => {
+  beforeAll(() => {
+    // jsdom implements neither, and ProseMirror scrolls the selection into view
+    // whenever the editor takes focus.
+    Range.prototype.getClientRects = () => [];
+    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(container.querySelector('.floating-panel')).not.toBeNull());
+    return container;
+  }
+
+  it('holds its tab stop when focus moves out of the content area into it', async () => {
+    const container = await renderMobileEditor();
+    const tabStop = container.querySelector('.floating-panel [data-toolbar-item][tabindex="0"]');
+
+    // Focus arriving on the bar blurs the editor content, which unmounts the
+    // bar unless it tracks its own focus.
+    tabStop.focus();
+    await nextTick();
+    await nextTick();
+
+    expect(container.querySelector('.floating-panel')).toBeInTheDocument();
+    expect(tabStop).toHaveFocus();
+  });
+
+  it('goes away once focus leaves the editor entirely', async () => {
+    const container = await renderMobileEditor();
+    const outside = document.body.appendChild(document.createElement('button'));
+
+    container.querySelector('.floating-panel [data-toolbar-item][tabindex="0"]').focus();
+    await nextTick();
+    outside.focus();
+    await nextTick();
+    await nextTick();
+
+    expect(container.querySelector('.floating-panel')).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..6be4af6b79
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileTopBar.spec.js
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/vue';
+import { ref } from 'vue';
+import VueRouter from 'vue-router';
+import MobileTopBar from '../TipTapEditor/components/toolbar/MobileTopBar.vue';
+
+function makeEditorStub() {
+  return {
+    isActive: () => false,
+    can: () => ({ undo: () => false, redo: () => false }),
+  };
+}
+
+describe('MobileTopBar roving tabindex', () => {
+  it('is a single tab stop, held by the unavailable undo control', () => {
+    render(MobileTopBar, {
+      provide: { editor: ref(makeEditorStub()) },
+      router: new VueRouter(),
+    });
+    // Every button, not only the `data-toolbar-item` ones: an unmarked control
+    // would be a second tab stop.
+    const controls = screen.getAllByRole('button');
+
+    expect(controls.length).toBeGreaterThan(1);
+    expect(controls[0]).toHaveAttribute('aria-disabled', 'true');
+    expect(controls[0]).toHaveAttribute('tabindex', '0');
+    controls.slice(1).forEach(control => expect(control).toHaveAttribute('tabindex', '-1'));
+  });
+});
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..b73324d89d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/ToolbarButton.spec.js
@@ -0,0 +1,42 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import ToolbarButton from '../TipTapEditor/components/toolbar/ToolbarButton.vue';
+
+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', () => {
+  it('keeps an unavailable control focusable and marks it aria-disabled', () => {
+    const { button } = renderButton({ isAvailable: false });
+
+    button.focus();
+
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(button).toHaveFocus();
+  });
+
+  it('does not emit click when unavailable', async () => {
+    const { button, emitted } = renderButton({ isAvailable: false });
+
+    await fireEvent.click(button);
+
+    expect(emitted().click).toBeUndefined();
+  });
+
+  it('emits click when available', async () => {
+    const { button, emitted } = renderButton();
+
+    expect(button).toHaveAttribute('aria-disabled', 'false');
+
+    await fireEvent.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..b7a092cb63
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/useRovingTabIndex.spec.js
@@ -0,0 +1,111 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
+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" 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 one, two, three, unmount;
+
+  beforeEach(() => {
+    ({ unmount } = render(Harness, { router: new VueRouter() }));
+    one = screen.getByTestId('one');
+    two = screen.getByTestId('two');
+    three = screen.getByTestId('three');
+  });
+
+  afterEach(() => {
+    document.documentElement.removeAttribute('dir');
+  });
+
+  it('wraps to the first item on ArrowRight from the last item', async () => {
+    await fireEvent.keyDown(three, { key: 'ArrowRight' });
+
+    expect(one).toHaveFocus();
+  });
+
+  it('skips controls KListWithOverflow has hidden', async () => {
+    two.style.visibility = 'hidden';
+
+    await fireEvent.keyDown(one, { key: 'ArrowRight' });
+
+    expect(three).toHaveFocus();
+  });
+
+  it('reverses the arrow directions in RTL', async () => {
+    document.documentElement.dir = 'rtl';
+
+    await fireEvent.keyDown(two, { key: 'ArrowRight' });
+    expect(one).toHaveFocus();
+
+    await fireEvent.keyDown(two, { key: 'ArrowLeft' });
+    expect(three).toHaveFocus();
+  });
+
+  it('moves the tab stop to whichever item receives focus', async () => {
+    await fireEvent.focusIn(three);
+
+    expect(three).toHaveAttribute('tabindex', '0');
+    expect(one).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('leaves focus and the tab stop alone for other keys', async () => {
+    one.focus();
+
+    await fireEvent.keyDown(one, { key: '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 fireEvent.click(screen.getByTestId('add'));
+
+    await waitFor(() => expect(screen.getByTestId('four')).toHaveAttribute('tabindex', '-1'));
+  });
+
+  it('stops handling arrow keys once unmounted', async () => {
+    unmount();
+
+    await fireEvent.keyDown(one, { key: 'ArrowRight' });
+
+    expect(one).toHaveAttribute('tabindex', '0');
+    expect(two).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('ignores arrow keys raised from inside an open menu', async () => {
+    await fireEvent.focusIn(three);
+
+    await fireEvent.keyDown(screen.getByTestId('menu-item'), { key: 'ArrowRight' });
+
+    expect(three).toHaveAttribute('tabindex', '0');
+    expect(one).toHaveAttribute('tabindex', '-1');
+  });
+});