fix(input-amount): Link currency to label after setting currency from… (#2091)

.changeset/sour-zoos-bow.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Fix accessibility currency linking to label after setting currency from undefined in LionInputAmount.

packages/ui/components/input-amount/src/LionInputAmount.js

@@ -159,6 +159,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     if (currency) {
       if (!this.__currencyDisplayNodeIsConnected) {
         this.appendChild(this.__currencyDisplayNode);
+        this.addToAriaLabelledBy(this.__currencyDisplayNode, {
+          idPrefix: this._currencyDisplayNodeSlot,
+        });
         this.__currencyDisplayNodeIsConnected = true;
       }
       this.__currencyDisplayNode.textContent = this.__currencyLabel;
@@ -182,11 +185,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   }
 
   /**
-   * @returns the current currency display node
+   * @returns {HTMLElement | undefined} the current currency display node
    * @private
    */
   get __currencyDisplayNode() {
-    const node = Array.from(this.children).find(
+    const node = /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
       child => child.slot === this._currencyDisplayNodeSlot,
     );
     if (node) {

packages/ui/components/input-amount/test/lion-input-amount.test.js

@@ -308,6 +308,27 @@ describe('<lion-input-amount>', () => {
       expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
 
+    it('adds currency id to aria-labelledby of input when currency switches from undefined', async () => {
+      const el = /** @type {LionInputAmount} */ (
+        await fixture(`<lion-input-amount></lion-input-amount>`)
+      );
+
+      el.currency = 'EUR';
+
+      let resolved = await el.updateComplete;
+      while (!resolved) {
+        resolved = await el.updateComplete;
+      }
+
+      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
+        child => child.slot === 'after',
+      );
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+
+      expect(label?.id).not.equal('');
+      expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
+    });
+
     it('adds an aria-label to currency slot', async () => {
       const el = /** @type {LionInputAmount} */ (
         await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)