Merge pull request #447 from qonto/typescript-addon-migration

refactor: migrate addon to TypeScript

.github/workflows/ci.yml

@@ -77,3 +77,35 @@ jobs:
       - name: Run tests
         run: pnpm ember try:one ${{ matrix.ember-try-scenario }} --skip-cleanup
         working-directory: test-app
+
+  typescript-compatibility:
+    name: Type checking - ${{ matrix.typescript-scenario }}
+    runs-on: ubuntu-latest
+
+    needs: [test]
+
+    strategy:
+      fail-fast: false
+      matrix:
+        typescript-scenario:
+          - [email protected]
+          - [email protected]
+          - typescript@next
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: wyvox/action-setup-pnpm@v3
+        with:
+          pnpm-version: 8.5.1
+          node-version: 16.x
+          args: "--frozen-lockfile"
+      - name: Update TS version on addon package
+        run: pnpm add -D ${{ matrix.typescript-scenario }}
+        working-directory: ember-autofocus-modifier
+      - name: Update TS version on test-app package
+        run: pnpm add -D ${{ matrix.typescript-scenario }}
+        working-directory: test-app
+      - name: Type checking
+        run: pnpm lint:types

ember-autofocus-modifier/package.json

@@ -69,7 +69,7 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "ember-source": "^3.28.0 || ^4.0.0"
+    "ember-source": "^3.28.0 || ^4.0.0 || ^5.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

ember-autofocus-modifier/rollup.config.mjs

@@ -18,7 +18,7 @@ export default {
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
-    addon.publicEntrypoints(["modifiers/**/*.js"]),
+    addon.publicEntrypoints(["modifiers/**/*.js", "template-registry.js"]),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but

ember-autofocus-modifier/src/modifiers/autofocus.ts

@@ -0,0 +1,80 @@
+import { modifier } from "ember-modifier";
+import { next } from "@ember/runloop";
+
+const focusableElements = [
+  "BUTTON",
+  "SUMMARY",
+  "IFRAME",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+] as const;
+
+const DEFAULT_SELECTOR =
+  "input:not([disabled]):not([readonly]),textarea:not([disabled]):not([readonly])";
+
+interface ModifierArgs {
+  Element: HTMLElement;
+  Args: {
+    Positional: [string?] | undefined; // Optional selector
+    Named: {
+      disabled?: boolean; // Optional 'disabled' parameter
+    };
+  };
+}
+
+export default modifier<ModifierArgs>(function autofocus(
+  element: HTMLElement,
+  [selector] = [DEFAULT_SELECTOR],
+  { disabled } = { disabled: false },
+) {
+  if (disabled) {
+    return;
+  }
+
+  const targetElement: HTMLElement =
+    element.querySelector(selector ?? DEFAULT_SELECTOR) || element;
+  const isChildElement = targetElement !== element;
+
+  /**
+   * Only applies to the element that {{autofocus}} is applied to.
+   * opts-out if we're selecting a child element.
+   */
+  const shouldMoveFocus =
+    !isChildElement &&
+    !focusableElements.some(
+      (item) =>
+        element.tagName === item ||
+        element.isContentEditable ||
+        element.hasAttribute("aria-disabled") ||
+        element.hasAttribute("href") ||
+        element.hasAttribute("tabindex"),
+    );
+
+  /**
+   * if {{autofocus}} is applied to a non-focusable element,
+   * For A11y purposes, this is used to move focus to the non-focusable element.
+   * This is helpful when new elements are inserted on to the screen (yet not focus-trapped),
+   * and we want the tab-behavior to move "near" the inserted content.
+   *
+   * This still prevents the non-focusable element from being tabbed to, as non-focusable
+   * elements are still not focusable.
+   *
+   * But this is a behavior we can use to help out screen readers and keyboard users alike to
+   * more smoothly interact with newly-inserted content (without needing to focus an interactive-specifically
+   * maybe the inserted contents are just buttons, for example).
+   */
+  if (shouldMoveFocus) {
+    element.setAttribute("tabindex", "-1");
+  }
+
+  next(function () {
+    targetElement.focus();
+  });
+
+  return (): void => {
+    if (shouldMoveFocus) {
+      element.removeAttribute("tabindex");
+    }
+  };
+});

ember-autofocus-modifier/src/template-registry.ts

@@ -0,0 +1,5 @@
+import type autofocus from "./modifiers/autofocus";
+
+export default interface Registry {
+  autofocus: typeof autofocus;
+}

ember-autofocus-modifier/tsconfig.json

@@ -5,7 +5,7 @@
     "environment": "ember-loose"
   },
   "compilerOptions": {
-    "allowJs": true,
+    "allowJs": false,
     "declarationDir": "declarations",
     "skipLibCheck": true
   }

package.json

@@ -12,6 +12,7 @@
     "build": "pnpm --filter ember-autofocus-modifier build",
     "lint": "pnpm --filter '*' lint",
     "lint:fix": "pnpm --filter '*' lint:fix",
+    "lint:types": "pnpm --filter '*' lint:types",
     "prepare": "pnpm build",
     "start": "concurrently 'pnpm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow",
     "start:addon": "pnpm --filter ember-autofocus-modifier start",
@@ -53,7 +54,7 @@
   },
   "pnpm": {
     "overrides": {
-      "ember-source": "4.12.0"
+      "ember-source": "4.12.2"
     }
   }
 }