feat: make the rich text editor toolbars a single tab stop

Mark every toolbar control `data-toolbar-item` and drive the toolbars
with useRovingTabIndex, so Tab moves into the toolbar and then out.

Unavailable ToolbarButtons carry `aria-disabled` instead of the native
`disabled`, keeping them focusable and in the arrow-key order.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: rtibblesbot

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,

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$()"

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$,

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"

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);
   }

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/EditorToolbar.spec.js

@@ -0,0 +1,91 @@
+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');
+  });
+
+  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');
+  });
+});

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/MobileTopBar.spec.js

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/vue';
+import { ref } from 'vue';
+import VueRouter from 'vue-router';
+import MobileTopBar from '../TipTapEditor/components/toolbar/MobileTopBar.vue';
+
+// Undo and redo report unavailable, so the bar renders `aria-disabled` controls.
+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'));
+  });
+});

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);
+  });
+});