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('', () => { 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(``) + ); + + 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(``)