diff --git a/packages/input-amount/src/LionInputAmount.js b/packages/input-amount/src/LionInputAmount.js index d49c950b8..b0d03820e 100644 --- a/packages/input-amount/src/LionInputAmount.js +++ b/packages/input-amount/src/LionInputAmount.js @@ -1,5 +1,5 @@ import { css } from '@lion/core'; -import { LocalizeMixin } from '@lion/localize'; +import { LocalizeMixin, getCurrencyName } from '@lion/localize'; import { LionInput } from '@lion/input'; import { FieldCustomMixin } from '@lion/field'; import { IsNumber } from '@lion/validate'; @@ -34,6 +34,9 @@ export class LionInputAmount extends FieldCustomMixin(LocalizeMixin(LionInput)) after: () => { if (this.currency) { const el = document.createElement('span'); + // The data-label attribute will make sure that FormControl adds this to + // input[aria-labelledby] + el.setAttribute('data-label', ''); el.textContent = this.currency; return el; } @@ -54,14 +57,27 @@ export class LionInputAmount extends FieldCustomMixin(LocalizeMixin(LionInput)) // eslint-disable-next-line wc/guard-super-call super.connectedCallback(); this.type = 'text'; + + if (this.currency) { + this.__setCurrencyDisplayLabel(); + } + } + + __setCurrencyDisplayLabel() { + this._currencyDisplayNode.setAttribute('aria-label', getCurrencyName(this.currency)); + } + + get _currencyDisplayNode() { + return Array.from(this.children).find(child => child.slot === 'after'); } _onCurrencyChanged({ currency }) { if (this._isPrivateSlot('after')) { - Array.from(this.children).find(child => child.slot === 'after').textContent = currency; + this._currencyDisplayNode.textContent = currency; } this.formatOptions.currency = currency; this._calculateValues(); + this.__setCurrencyDisplayLabel(); } static get styles() { diff --git a/packages/input-amount/test/lion-input-amount.test.js b/packages/input-amount/test/lion-input-amount.test.js index e908f5a22..03ea82489 100644 --- a/packages/input-amount/test/lion-input-amount.test.js +++ b/packages/input-amount/test/lion-input-amount.test.js @@ -69,9 +69,9 @@ describe('', () => { expect(el._inputNode.type).to.equal('text'); }); - it('shows no currency', async () => { + it('shows no currency by default', async () => { const el = await fixture(``); - expect(Array.from(el.children).find(child => child.slot === 'suffix')).to.be.undefined; + expect(Array.from(el.children).find(child => child.slot === 'after')).to.be.undefined; }); it('displays currency if provided', async () => { @@ -99,4 +99,23 @@ describe('', () => { 'my-currency', ); }); + + describe('Accessibility', () => { + it('adds currency id to aria-labelledby of input', async () => { + const el = await fixture(``); + expect(el._currencyDisplayNode.getAttribute('data-label')).to.be.not.null; + expect(el._inputNode.getAttribute('aria-labelledby')).to.contain(el._currencyDisplayNode.id); + }); + + it('adds an aria-label to currency slot', async () => { + const el = await fixture(``); + expect(el._currencyDisplayNode.getAttribute('aria-label')).to.equal('euros'); + el.currency = 'USD'; + await el.updateComplete; + expect(el._currencyDisplayNode.getAttribute('aria-label')).to.equal('US dollars'); + el.currency = 'PHP'; + await el.updateComplete; + expect(el._currencyDisplayNode.getAttribute('aria-label')).to.equal('Philippine pisos'); + }); + }); });