replace did-insert modifier with focus modifier.

drop-in replacement.

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

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>

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;

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);
+  });
 });

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(),
+  }),
 });

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();
+  }
+});

packages/ilios-common/app/modifiers/focus.js

@@ -0,0 +1 @@
+export { default } from 'ilios-common/modifiers/focus';

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();
+  });
+});