From 852bce2da2f2f0b44b7220727e3a258bbf068f2a Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 20 Nov 2019 10:30:35 +0200
Subject: [PATCH] fix: allow overriding protected methods

---
 .eslintrc.json                                |  1 +
 .../roving-tabindex-mixin.ts                  | 27 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9445120..92d607b 100644
--- a/.eslintrc.json
+++ b/.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"
diff --git a/packages/roving-tabindex-mixin/roving-tabindex-mixin.ts b/packages/roving-tabindex-mixin/roving-tabindex-mixin.ts
index 4066c64..2e63695 100644
--- a/packages/roving-tabindex-mixin/roving-tabindex-mixin.ts
+++ b/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) {