[ESLint] Eslint config & rules fixes

.prettierrc.js

@@ -1,6 +1,5 @@
 'use strict';
 
-// eslint-disable-next-line no-undef
 module.exports = {
   arrowParens: 'always',
   bracketSpacing: true,

.template-lintrc.js

@@ -6,6 +6,15 @@ module.exports = {
   plugins: ['./linters/handlebars'],
 
   rules: {
-    'u-template-lint/no-bare-button': 'error'
+    'u-template-lint/no-bare-button': 'error',
+    // Disabled: in v3 this rule also flags `keydown`, which is a known false positive. The rule enforces WCAG F101,
+    // which only covers pointer-down events (mousedown / pointerdown) and never the keyboard. Upstream narrowed it
+    // accordingly and renamed it `no-pointer-down-event-binding` in v5.0.0 (PR ember-template-lint#2054), so the
+    // current version of the rule reports nothing here.
+    // Every violation in this repo is a `keydown` handler calling preventDefault, either to filter keystrokes
+    // (currency, number and phone inputs) or to stop the page from scrolling on arrow keys (select navigation).
+    // `keyup` fires once the character is inserted and the page has scrolled, so it cannot replace them.
+    // Drop this entry when ember-template-lint is upgraded to v5 or later: the rule no longer exists under this name.
+    'no-down-event-binding': false
   }
 };

addon-test-support/custom-assertions/tooltip.ts

@@ -43,8 +43,8 @@ export interface TooltipAssertions {
 const assertion = (selector: string): TooltipAssertions => {
   return {
     exists: async (trigger?: string, message?: string): Promise<void> => {
-      let result: boolean = true;
-      let actual: Element | null = null;
+      const result: boolean = true;
+      const actual: Element | null = null;
 
       await triggerEventOnElement(selector, trigger);
 
@@ -131,12 +131,9 @@ const assertion = (selector: string): TooltipAssertions => {
     doesNotHaveSubtitle: async (message?: string): Promise<void> => {
       await triggerEventOnElement(selector);
 
-      let result = false;
-      let actual = undefined;
       const subtitleContainer = document.querySelector('.upf-tooltip .subtitle');
-
-      actual = (<HTMLElement>subtitleContainer)?.innerText;
-      result = isEmpty(actual);
+      const actual = (<HTMLElement>subtitleContainer)?.innerText;
+      const result = isEmpty(actual);
 
       QUnit.assert.pushResult({
         result,
@@ -170,8 +167,8 @@ const assertion = (selector: string): TooltipAssertions => {
       await triggerEventOnElement(selector);
 
       const iconI = document.querySelector('.upf-tooltip .title-container i');
-      let actual = iconI?.className;
-      let result = isEmpty(actual);
+      const actual = iconI?.className;
+      const result = isEmpty(actual);
 
       QUnit.assert.pushResult({
         result,
@@ -205,8 +202,8 @@ const assertion = (selector: string): TooltipAssertions => {
       await triggerEventOnElement(selector);
 
       const titleContainer = document.querySelector('.upf-tooltip .title-container .title');
-      let actual = (<HTMLElement>titleContainer)?.dataset.htmlSafe;
-      let result = actual === 'true';
+      const actual = (<HTMLElement>titleContainer)?.dataset.htmlSafe;
+      const result = actual === 'true';
 
       QUnit.assert.pushResult({
         result,
@@ -220,8 +217,8 @@ const assertion = (selector: string): TooltipAssertions => {
       await triggerEventOnElement(selector);
 
       const titleContainer = document.querySelector('.upf-tooltip .title-container .title');
-      let actual = (<HTMLElement>titleContainer)?.dataset.htmlSafe;
-      let result = actual === undefined;
+      const actual = (<HTMLElement>titleContainer)?.dataset.htmlSafe;
+      const result = actual === undefined;
 
       QUnit.assert.pushResult({
         result,

addon-test-support/register-assertions.ts

@@ -6,7 +6,7 @@ const ASSERTIONS = [tooltipAssertions, infiniteSelectOptionAssertions, dcnAssert
 
 export default function registerAssertions(assert: Assert) {
   ASSERTIONS.forEach((assertion) => {
-    // @ts-ignore
+    // @ts-expect-error custom assertions are dynamically registered on Assert
     assert[assertion.__name__] = assertion;
   });
 }

addon/components/o-s-s/anchor.ts

@@ -43,7 +43,7 @@ export default class OSSAnchor extends Component<OSSAnchorArgs> {
     const route = this.args.routePrefix ? this.args.routePrefix + '.' + this.args.link : this.args.link;
     try {
       return Boolean(this.router.urlFor(route));
-    } catch (error) {
+    } catch {
       return false;
     }
   }

addon/components/o-s-s/array-input.hbs

@@ -6,6 +6,7 @@
     <Input
       @value={{this.currentValue}}
       placeholder={{@placeholder}}
+      aria-label={{@ariaLabel}}
       autocomplete="off"
       disabled={{@disabled}}
       {{on "keydown" this.keyListener}}

addon/components/o-s-s/array-input.stories.js

@@ -15,6 +15,16 @@ export default {
       },
       control: { type: 'array' }
     },
+    ariaLabel: {
+      description: 'Accessible name of the input, used when no visible label is associated with it',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
     placeholder: {
       description: 'The placeholder to show when the input is empty',
       table: {

addon/components/o-s-s/array-input.ts

@@ -10,6 +10,7 @@ interface OSSArrayInputArgs {
   validator?: (value: string) => boolean;
   onChange?: (values: string[]) => void;
   placeholder?: string;
+  ariaLabel?: string;
 }
 
 const DEFAULT_KEYBOARD_TRIGGERS = ['Enter'];
@@ -26,7 +27,7 @@ export default class OSSArrayInput extends Component<OSSArrayInputArgs> {
   }
 
   get computedClasses(): string {
-    let arr: string[] = ['array-input-container'];
+    const arr: string[] = ['array-input-container'];
 
     if (this.args.disabled) {
       arr.push('array-input-container--disabled');
@@ -44,9 +45,7 @@ export default class OSSArrayInput extends Component<OSSArrayInputArgs> {
   }
 
   private _triggerComponentRedraw(): void {
-    // Since this.items is not properly tracked upon updating the values,
-    // re-assigning this way triggers the component redraw.
-    this.items = this.items;
+    this.items = [...this.items];
   }
 
   private _addEntry() {

addon/components/o-s-s/avatar.ts

@@ -71,8 +71,8 @@ export default class OSSAvatar extends Component<OSSAvatarArgs> {
       Object.keys(SizeDefinition).includes(size as SizeType)
     );
 
-    classes.push(SizeDefinition[size as SizeType])
-    return classes.join(' ')
+    classes.push(SizeDefinition[size as SizeType]);
+    return classes.join(' ');
   }
 
   @action

addon/components/o-s-s/button-dropdown.hbs

@@ -5,10 +5,16 @@
       {{if this.displayDropdown 'oss-button-dropdown__trigger--active'}}
       fx-row fx-xalign-center"
     role={{unless @mainAction "button"}}
+    tabindex={{unless @mainAction "0"}}
     {{on "click" this.onDropdownClick}}
     ...attributes
   >
-    <div class="fx-row fx-xalign-center fx-gap-px-6" role={{if @mainAction "button"}} {{on "click" this.onMainAction}}>
+    <div
+      class="fx-row fx-xalign-center fx-gap-px-6"
+      role={{if @mainAction "button"}}
+      tabindex={{if @mainAction "0"}}
+      {{on "click" this.onMainAction}}
+    >
       {{#if @icon}}
         <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}} />
       {{/if}}
@@ -17,14 +23,20 @@
       {{/if}}
     </div>
     {{#unless @hideArrow}}
-      <div class="fx-row fx-xalign-center" role={{if @mainAction "button"}} {{on "click" this.toggleDropdown}}>
+      <div
+        class="fx-row fx-xalign-center"
+        role={{if @mainAction "button"}}
+        tabindex={{if @mainAction "0"}}
+        {{on "click" this.toggleDropdown}}
+      >
         <OSS::Icon @icon="fa-caret-{{if this.displayDropdown 'up' 'down'}}" />
       </div>
     {{/unless}}
   </div>
 
   {{#if this.displayDropdown}}
     <div
+      {{! template-lint-disable no-invalid-interactive }}
       class="oss-button-dropdown__items"
       {{on "click" this.toggleDropdown}}
       {{did-insert this.setupChildrenClickHandler}}

addon/components/o-s-s/button-dropdown.ts

@@ -81,7 +81,7 @@ export default class extends Component<OSSButtonDropdownArgs> {
   }
 
   @action
-  closeDropdown(e?: Event): void {
+  closeDropdown(event?: Event): void {
     event?.stopPropagation();
     this.displayDropdown = false;
   }

addon/components/o-s-s/button.ts

@@ -82,7 +82,7 @@ export interface OSSButtonArgs {
   theme?: string;
   square?: boolean;
   countDown?: {
-    callback: () => {};
+    callback: () => void;
     time?: number;
     step?: number;
   };
@@ -132,7 +132,7 @@ export default class OSSButton<T extends OSSButtonArgs> extends Component<T> {
   }
 
   get computedClass() {
-    let classes = [this.args.square ? SQUARE_CLASS : BASE_CLASS, `upf-btn--${this.skin}`];
+    const classes = [this.args.square ? SQUARE_CLASS : BASE_CLASS, `upf-btn--${this.skin}`];
 
     if (this.size) {
       classes.push(this.args.square ? `upf-square-btn--${this.size}` : `upf-btn--${this.size}`);
@@ -151,6 +151,7 @@ export default class OSSButton<T extends OSSButtonArgs> extends Component<T> {
     }
 
     if (this.args.loading && !this.args.loadingOptions?.showLabel) {
+      // eslint-disable-next-line ember/no-side-effects
       this.DOMElement.style.width = `${this.DOMElement?.offsetWidth}px`;
     } else {
       this.DOMElement.style.removeProperty('width');

addon/components/o-s-s/carousel.ts

@@ -39,7 +39,7 @@ export default class OSSCarousel extends Component<OSSCarouselArgs> {
   }
 
   get showControls(): boolean {
-    return !!this.args.showControls ?? false;
+    return !!this.args.showControls;
   }
 
   get loop(): boolean {

addon/components/o-s-s/checkbox.hbs

@@ -1,4 +1,9 @@
-<div class="upf-checkbox {{this.modifierClasses}}" ...attributes {{on "click" this.updateValue}}>
+<div
+  {{! template-lint-disable no-invalid-interactive }}
+  class="upf-checkbox {{this.modifierClasses}}"
+  ...attributes
+  {{on "click" this.updateValue}}
+>
   <Input
     @type="checkbox"
     @checked={{@checked}}

addon/components/o-s-s/chip.hbs

@@ -1,4 +1,9 @@
-<div class={{this.computedClass}} ...attributes {{on "click" this.stopPropagation}}>
+<div
+  {{! template-lint-disable no-invalid-interactive }}
+  class={{this.computedClass}}
+  ...attributes
+  {{on "click" this.stopPropagation}}
+>
   {{#if (has-block "prefix")}}
     {{yield to="prefix"}}
   {{/if}}

addon/components/o-s-s/content-panel.ts

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface OSSContentPanelArgs {}
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class OSSContentPanel extends Component<OSSContentPanelArgs> {}

addon/components/o-s-s/context-menu.ts

@@ -15,8 +15,8 @@ export type ContextMenuItem = {
 interface OSSContextMenuArgs extends OSSButtonArgs {
   items: ContextMenuItem[];
   closeOnMouseLeave?: boolean;
-  onMenuOpened?: () => {};
-  onMenuClosed?: () => {};
+  onMenuOpened?: () => void;
+  onMenuClosed?: () => void;
 }
 
 export default class OSSContextMenuComponent extends Component<OSSContextMenuArgs> {
@@ -34,7 +34,12 @@ export default class OSSContextMenuComponent extends Component<OSSContextMenuArg
     event.stopPropagation();
     if (this.args.loading) return;
     this.displayContextMenuPanel = !this.displayContextMenuPanel;
-    this.displayContextMenuPanel ? this.args.onMenuOpened?.() : this.args.onMenuClosed?.();
+
+    if (this.displayContextMenuPanel) {
+      this.args.onMenuOpened?.();
+    } else {
+      this.args.onMenuClosed?.();
+    }
   }
 
   @action

addon/components/o-s-s/context-menu/panel.ts

@@ -51,9 +51,7 @@ export default class OSSContextMenuPanelComponent extends Component<OSSContextMe
   registerPanel(element: HTMLElement): void {
     this.currentPanel = element;
     this.args.registerPanel?.(this.currentPanel);
-    scheduleOnce('afterRender', this, () => {
-      this.initializeDropdown();
-    });
+    scheduleOnce('afterRender', this, this.initializeDropdown);
 
     this.currentPanel.querySelector('.oss-scrollable-panel-content')?.addEventListener('scroll', this.onScrollbound);
   }