fix: allow overriding protected methods

.eslintrc.json

@@ -28,6 +28,7 @@
     "import/extensions": "off",
     "import/prefer-default-export": "off",
     "class-methods-use-this": "off",
+    "max-classes-per-file": "off",
     "no-console": [ "error", { "allow": ["warn"] } ],
     "no-plusplus": "off",
     "no-underscore-dangle": "off"

packages/roving-tabindex-mixin/roving-tabindex-mixin.ts

@@ -5,13 +5,28 @@ export interface RovingTabindexInterface {
   focused: Element | null;
 }
 
-type ItemCondition = (item: Element) => boolean;
+// Using a dumb `class` instead of `interface` or `type`
+// to document protected methods that can be overridden
+// https://github.com/microsoft/TypeScript/issues/25163
+export abstract class RovingTabIndexClass extends LitElement {
+  protected _onKeydown?(event: KeyboardEvent): void;
+
+  protected _isNext?(key: string): boolean;
+
+  protected _isPrev?(key: string): boolean;
+
+  protected _focus?(idx: number): void;
+
+  protected _items?: HTMLElement[] = [];
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type LitBase = new (...args: any[]) => LitElement;
+type LitBase = new (...args: any[]) => RovingTabIndexClass;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type LitRovingTabindex = new (...args: any[]) => LitElement & RovingTabindexInterface;
+type LitRovingTabindex = new (...args: any[]) => RovingTabIndexClass & RovingTabindexInterface;
+
+type ItemCondition = (item: Element) => boolean;
 
 const isEnabled: ItemCondition = (item: Element) => !item.hasAttribute('disabled');
 
@@ -20,8 +35,6 @@ export const RovingTabindexMixin = <T extends LitBase>(base: T): LitRovingTabind
     @property({ attribute: false, hasChanged: () => true })
     protected _items: HTMLElement[] = [];
 
-    private _boundOnkeydown = this._onKeydown.bind(this);
-
     focus() {
       const first =
         (this.querySelector('[tabindex="0"]') as HTMLElement) ||
@@ -58,7 +71,9 @@ export const RovingTabindexMixin = <T extends LitBase>(base: T): LitRovingTabind
     protected firstUpdated(props: PropertyValues) {
       super.firstUpdated(props);
 
-      this.addEventListener('keydown', this._boundOnkeydown);
+      this.addEventListener('keydown', (event: KeyboardEvent) => {
+        this._onKeydown(event);
+      });
 
       const slot = this.renderRoot.querySelector('slot');
       if (slot) {