Implement roving tabindex for toolbar and picker components

Author: colfin-96

packages/quill/src/modules/toolbar.ts

@@ -27,6 +27,8 @@ class Toolbar extends Module<ToolbarProps> {
   controls: [string, HTMLElement][];
   handlers: Record<string, Handler>;
 
+  hasRovingTabindex: boolean = false;
+
   constructor(quill: Quill, options: Partial<ToolbarProps>) {
     super(quill, options);
     if (Array.isArray(this.options.container)) {
@@ -45,6 +47,10 @@ class Toolbar extends Module<ToolbarProps> {
       return;
     }
     this.container.classList.add('ql-toolbar');
+
+    // Check if the parent element has the custom "roving-tabindex" class in order to enable or disable roving tabindex
+    this.hasRovingTabindex = this.container.closest('.roving-tabindex') !== null;
+
     this.controls = [];
     this.handlers = {};
     if (this.options.handlers) {
@@ -133,10 +139,54 @@ class Toolbar extends Module<ToolbarProps> {
       }
       this.update(range);
     });
-    input.tabIndex = 123;
+
+    if (this.hasRovingTabindex && input.tagName === 'BUTTON') {
+      input.addEventListener('keydown', (e) => {
+        this.handleKeyboardEvent(e);
+      });
+    }
+
     this.controls.push([format, input]);
   }
 
+  handleKeyboardEvent(e: KeyboardEvent) {
+    var target = e.currentTarget;
+    if (!target) return;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        this.updateTabIndexes(target, e.key);
+        break;
+    }
+  }
+
+  updateTabIndexes(target: EventTarget, key: string) {
+    const currentIndex = this.controls.findIndex(control => control[1] === target);
+    const currentItem = this.controls[currentIndex][1];
+    currentItem.tabIndex = -1;
+
+    let nextIndex;
+    if (key === 'ArrowLeft') {
+      nextIndex = currentIndex === 0 ? this.controls.length - 1 : currentIndex - 1;
+    } else if (key === 'ArrowRight') {
+      nextIndex = currentIndex === this.controls.length - 1 ? 0 : currentIndex + 1;
+    }
+
+    if (nextIndex === undefined) return;
+    const nextItem = this.controls[nextIndex][1];
+    if (nextItem.tagName === 'SELECT') {
+      const qlPickerLabel = nextItem.previousElementSibling?.querySelectorAll('.ql-picker-label')[0];
+      if (qlPickerLabel && qlPickerLabel.tagName === 'SPAN') {
+        (qlPickerLabel as HTMLElement).tabIndex = 0;
+        (qlPickerLabel as HTMLElement).focus();
+      }
+    } else {
+      nextItem.tabIndex = 0;
+      nextItem.focus();
+    }
+  }
+
   update(range: Range | null) {
     const formats = range == null ? {} : this.quill.getFormat(range);
     this.controls.forEach((pair) => {

packages/quill/src/ui/picker.ts

@@ -14,6 +14,8 @@ class Picker {
   container: HTMLElement;
   label: HTMLElement;
 
+  hasRovingTabindex: boolean = false;
+
   constructor(select: HTMLSelectElement) {
     this.select = select;
     this.container = document.createElement('span');
@@ -22,6 +24,11 @@ class Picker {
     // @ts-expect-error Fix me later
     this.select.parentNode.insertBefore(this.container, this.select);
 
+    // Set tabIndex for the first item in the toolbar
+    this.hasRovingTabindex = this.container.closest('.roving-tabindex') !== null;
+    this.setTabIndexes();
+
+
     this.label.addEventListener('mousedown', () => {
       this.togglePicker();
     });
@@ -34,9 +41,6 @@ class Picker {
           this.escape();
           event.preventDefault();
           break;
-        case 'ArrowLeft':
-        case 'ArrowRight':
-          this.toggleTabIndex();
         default:
       }
     });
@@ -51,10 +55,6 @@ class Picker {
     toggleAriaAttribute(this.options, 'aria-hidden');
   }
 
-  toggleTabIndex() {
-    this.label.tabIndex = this.label.tabIndex === 0 ? -1 : 0;
-  }
-
   buildItem(option: HTMLOptionElement) {
     const item = document.createElement('span');
     // @ts-expect-error
@@ -93,16 +93,71 @@ class Picker {
     label.classList.add('ql-picker-label');
     label.innerHTML = DropdownIcon;
 
-    // TODO: @cofi set all tabindex to -1 initially and then per JS set first one to 0. Then per keyboard right/left navigation set the next/prev to 0 and the rest to -1
+    // Set tabIndex to -1 by default to prevent focus
     // @ts-expect-error
     label.tabIndex = '-1';
+    label.addEventListener('keydown', (event) => {
+      this.handleKeyboardEvent(event);
+    });
+
 
     label.setAttribute('role', 'button');
     label.setAttribute('aria-expanded', 'false');
     this.container.appendChild(label);
     return label;
   }
 
+  setTabIndexes() {
+    const toolbar = this.select.closest('.ql-toolbar');
+    if (!toolbar) return;
+    const items = Array.from(toolbar.querySelectorAll('.ql-picker .ql-picker-label, .ql-toolbar button'));
+
+    if (this.hasRovingTabindex) {
+      if (items[0] === this.label) {
+        items[0].setAttribute('tabindex', '0')
+      }
+
+    } else {
+      items.forEach((item) => {
+        item.setAttribute('tabindex', '0');
+      });
+    }
+  }
+
+  handleKeyboardEvent(e: KeyboardEvent) {
+    if (!this.hasRovingTabindex) return;
+    var target = e.currentTarget;
+    if (!target) return;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        this.updateTabIndexes(target, e.key);
+        break;
+    }
+  }
+
+  updateTabIndexes(target: EventTarget, key: string) {
+    this.label.setAttribute('tabindex', '-1');
+
+    const toolbar = this.container.closest('.ql-toolbar');
+    if (!toolbar) return;
+    const items = Array.from(toolbar.querySelectorAll('.ql-picker .ql-picker-label, .ql-toolbar button'));
+    const currentIndex = items.indexOf(target as HTMLElement);
+    let newIndex;
+
+    if (key === 'ArrowLeft') {
+      newIndex = (currentIndex - 1 + items.length) % items.length;
+    } else if (key === 'ArrowRight') {
+      newIndex = (currentIndex + 1) % items.length;
+    }
+
+    if (!newIndex) return;
+
+    items[newIndex].setAttribute('tabindex', '0');
+    (items[newIndex] as HTMLElement).focus();
+  }
+
   buildOptions() {
     const options = document.createElement('span');
     options.classList.add('ql-picker-options');
@@ -190,7 +245,7 @@ class Picker {
       const item =
         // @ts-expect-error Fix me later
         this.container.querySelector('.ql-picker-options').children[
-          this.select.selectedIndex
+        this.select.selectedIndex
         ];
       option = this.select.options[this.select.selectedIndex];
       // @ts-expect-error