From e0c7d51d1f1f82c92ad7760d2ae42185cafc361e Mon Sep 17 00:00:00 2001
From: Stefan Topfstedt <Stefan.Topfstedt@ucsf.edu>
Date: Tue, 2 Jul 2024 15:47:04 -0700
Subject: [PATCH] replace did-insert modifier with focus modifier.

drop-in replacement.
---
 packages/frontend/.lint-todo                  |  1 +
 .../app/components/locale-chooser.hbs         |  4 +--
 .../frontend/app/components/locale-chooser.js |  6 ----
 .../components/locale-chooser-test.js         |  9 ++++++
 .../tests/pages/components/locale-chooser.js  |  4 ++-
 .../ilios-common/addon/modifiers/focus.js     | 23 +++++++++++++++
 packages/ilios-common/app/modifiers/focus.js  |  1 +
 .../tests/integration/modifiers/focus-test.js | 29 +++++++++++++++++++
 8 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 packages/ilios-common/addon/modifiers/focus.js
 create mode 100644 packages/ilios-common/app/modifiers/focus.js
 create mode 100644 packages/test-app/tests/integration/modifiers/focus-test.js

diff --git a/packages/frontend/.lint-todo b/packages/frontend/.lint-todo
index d0d6293820..04181e1edd 100644
--- a/packages/frontend/.lint-todo
+++ b/packages/frontend/.lint-todo
@@ -99,3 +99,4 @@ add|ember-template-lint|no-at-ember-render-modifiers|11|6|11|6|940005188b476a060
 add|ember-template-lint|no-at-ember-render-modifiers|10|6|10|6|d919d2af254f782c01fe2ba15416673e52e91124|1719360000000|1734915600000|1750464000000|app/components/reports/subject/new/term.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|11|6|11|6|940005188b476a060b0e5d3f05baea24ba178878|1719360000000|1734915600000|1750464000000|app/components/reports/subject/new/term.hbs
 remove|ember-template-lint|no-at-ember-render-modifiers|16|4|16|4|46d995f60904f6b6f4b1b6b24bb65b9c97441bc1|1719360000000|1734915600000|1750464000000|app/components/locale-chooser.hbs
+remove|ember-template-lint|no-at-ember-render-modifiers|28|6|28|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1719360000000|1734915600000|1750464000000|app/components/locale-chooser.hbs
diff --git a/packages/frontend/app/components/locale-chooser.hbs b/packages/frontend/app/components/locale-chooser.hbs
index 44404673e0..883e7c633d 100644
--- a/packages/frontend/app/components/locale-chooser.hbs
+++ b/packages/frontend/app/components/locale-chooser.hbs
@@ -24,9 +24,8 @@
     <div
       class="menu"
       role="menu"
-      {{did-insert this.focusOnFirstItem}}
     >
-      {{#each this.locales as |loc|}}
+      {{#each this.locales as |loc index|}}
         <button
           type="button"
           role="menuitemradio"
@@ -38,6 +37,7 @@
           {{on "click" (fn this.changeLocale loc.id)}}
           {{on "keyup" this.moveFocus}}
           {{on "mouseenter" this.clearFocus}}
+          {{focus (eq index 0)}}
         >
           {{loc.text}}
         </button>
diff --git a/packages/frontend/app/components/locale-chooser.js b/packages/frontend/app/components/locale-chooser.js
index 0e98e31c30..6e78e96f34 100644
--- a/packages/frontend/app/components/locale-chooser.js
+++ b/packages/frontend/app/components/locale-chooser.js
@@ -25,12 +25,6 @@ export default class LocaleChooserComponent extends Component {
     return guidFor(this);
   }
 
-  @action
-  focusOnFirstItem(menuElement) {
-    this.menuElement = menuElement;
-    menuElement.querySelector('button:first-of-type').focus();
-  }
-
   @action
   close() {
     this.isOpen = false;
diff --git a/packages/frontend/tests/integration/components/locale-chooser-test.js b/packages/frontend/tests/integration/components/locale-chooser-test.js
index 18fedb3393..e21638637c 100644
--- a/packages/frontend/tests/integration/components/locale-chooser-test.js
+++ b/packages/frontend/tests/integration/components/locale-chooser-test.js
@@ -63,4 +63,13 @@ module('Integration | Component | locale-chooser', function (hooks) {
     assert.strictEqual(component.text, 'Español (es)');
     assert.ok(component.toggle.hasFocus);
   });
+
+  test('first item in menu receives focus when menu is opened', async function (assert) {
+    await render(hbs`<LocaleChooser />`);
+    await component.toggle.click();
+    assert.strictEqual(component.locales.length, 3);
+    assert.ok(component.locales[0].hasFocus);
+    assert.notOk(component.locales[1].hasFocus);
+    assert.notOk(component.locales[2].hasFocus);
+  });
 });
diff --git a/packages/frontend/tests/pages/components/locale-chooser.js b/packages/frontend/tests/pages/components/locale-chooser.js
index dccb443fc1..43192a4bd4 100644
--- a/packages/frontend/tests/pages/components/locale-chooser.js
+++ b/packages/frontend/tests/pages/components/locale-chooser.js
@@ -9,5 +9,7 @@ export default create({
     esc: triggerable('keyup', '', { eventProperties: { key: 'Escape' } }),
     hasFocus: hasFocus(),
   },
-  locales: collection('[data-test-item]', {}),
+  locales: collection('[data-test-item]', {
+    hasFocus: hasFocus(),
+  }),
 });
diff --git a/packages/ilios-common/addon/modifiers/focus.js b/packages/ilios-common/addon/modifiers/focus.js
new file mode 100644
index 0000000000..05cd944700
--- /dev/null
+++ b/packages/ilios-common/addon/modifiers/focus.js
@@ -0,0 +1,23 @@
+import { modifier } from 'ember-modifier';
+
+/**
+  The `{{focus}}` element modifier sets the focus its DOM element.
+  It can take one optional boolean argument, which can be used to conditionally allow or prevent focusing.
+
+  For example - focusing the first item in an ordered list:
+
+  ```handlebars
+  <ol>
+  {{#each @items as |item index|}}
+    <li {{focus (eq index 0)}}>
+  {{/each}
+  </ol>
+  ```
+*/
+export default modifier(function focus(element, positional /*, named*/) {
+  // If no argument is provided, then the given element is focused on.
+  // If an argument has been provided, then only set focus if that arg is truthy.
+  if (!positional.length || !!positional[0]) {
+    element.focus();
+  }
+});
diff --git a/packages/ilios-common/app/modifiers/focus.js b/packages/ilios-common/app/modifiers/focus.js
new file mode 100644
index 0000000000..47de6553da
--- /dev/null
+++ b/packages/ilios-common/app/modifiers/focus.js
@@ -0,0 +1 @@
+export { default } from 'ilios-common/modifiers/focus';
diff --git a/packages/test-app/tests/integration/modifiers/focus-test.js b/packages/test-app/tests/integration/modifiers/focus-test.js
new file mode 100644
index 0000000000..a85decec7b
--- /dev/null
+++ b/packages/test-app/tests/integration/modifiers/focus-test.js
@@ -0,0 +1,29 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | focus', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it focuses by default without condition', async function (assert) {
+    this.set('label', 'foo bar');
+    await render(hbs`<label><input {{focus}} />{{this.label}}</label>
+`);
+    assert.dom('input').isFocused();
+  });
+
+  test('it focuses when condition is met', async function (assert) {
+    this.set('label', 'foo bar');
+    await render(hbs`<label><input {{focus true}} />{{this.label}}</label>
+`);
+    assert.dom('input').isFocused();
+  });
+
+  test('it does not focus when condition is not met', async function (assert) {
+    this.set('label', 'foo bar');
+    await render(hbs`<label><input {{focus false}} />{{this.label}}</label>
+`);
+    assert.dom('input').isNotFocused();
+  });
+});