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

#2091)
ing-bank · Oct 17, 2023 · be36bf3 · be36bf3
1 parent 63a8e72
commit be36bf3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/.changeset/sour-zoos-bow.md 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
@@ -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
@@ -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>`)