~

Author: Colin Finger

package-lock.json

@@ -36,7 +36,8 @@
         "@typescript-eslint/ban-types": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "import/no-named-as-default-member": "off",
-        "prefer-arrow-callback": "error"
+        "prefer-arrow-callback": "error",
+        "endOfLine": "auto"
       }
     }
   ]

packages/quill/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "name": "quill",
-  "version": "2.0.3",
+  "version": "2.0.3-beta.2",
   "description": "Your powerful, rich text editor",
   "author": "Jason Chen <jhchen7@gmail.com>",
   "homepage": "https://quilljs.com",

packages/quill/package.json

@@ -133,6 +133,7 @@ class Toolbar extends Module<ToolbarProps> {
       }
       this.update(range);
     });
+    input.tabIndex = 123;
     this.controls.push([format, input]);
   }
 

packages/quill/src/modules/toolbar.ts

@@ -34,6 +34,9 @@ class Picker {
           this.escape();
           event.preventDefault();
           break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          this.toggleTabIndex();
         default:
       }
     });
@@ -48,6 +51,10 @@ 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
@@ -85,8 +92,11 @@ class Picker {
     const label = document.createElement('span');
     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
     // @ts-expect-error
-    label.tabIndex = '0';
+    label.tabIndex = '-1';
+
     label.setAttribute('role', 'button');
     label.setAttribute('aria-expanded', 'false');
     this.container.appendChild(label);