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 = (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 = (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) {