Make the rich text editor toolbars a single tab stop with arrow-key navigation

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,

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

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/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;

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