From be36bf3b1b00b9ca7614da1023e9b452e5426ddb Mon Sep 17 00:00:00 2001
From: Gyulai Levente <47368351+gyulus3@users.noreply.github.com>
Date: Tue, 17 Oct 2023 14:55:13 +0200
Subject: [PATCH] =?UTF-8?q?fix(input-amount):=20Link=20currency=20to=20lab?=
 =?UTF-8?q?el=20after=20setting=20currency=20from=E2=80=A6=20(#2091)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/sour-zoos-bow.md                   |  5 +++++
 .../input-amount/src/LionInputAmount.js       |  7 +++++--
 .../test/lion-input-amount.test.js            | 21 +++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/sour-zoos-bow.md

diff --git a/.changeset/sour-zoos-bow.md b/.changeset/sour-zoos-bow.md
new file mode 100644
index 000000000..065a153a5
--- /dev/null
+++ b/.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.
diff --git a/packages/ui/components/input-amount/src/LionInputAmount.js b/packages/ui/components/input-amount/src/LionInputAmount.js
index 1da06d275..6f91a46a6 100644
--- a/packages/ui/components/input-amount/src/LionInputAmount.js
+++ b/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) {
diff --git a/packages/ui/components/input-amount/test/lion-input-amount.test.js b/packages/ui/components/input-amount/test/lion-input-amount.test.js
index 364c836be..1b4e56b85 100644
--- a/packages/ui/components/input-amount/test/lion-input-amount.test.js
+++ b/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>`)