ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-amount): Reflect more currency changes

Browse source 
Switching between defined / undefined currency yields better currency
label updates

Closes #1430
This commit is contained in:
Felix Mueller 2021-07-27 19:25:40 +02:00
parent 3edb372b06
commit 7ccbe2e90d
2 changed files with 82 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
packages/input-amount/src/LionInputAmount.js
View file

@ -30,28 +30,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
};
}
get slots() {
return {
...super.slots,
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.__currencyLabel;
return el;
}
return undefined;
},
};
}
get _currencyDisplayNode() {
return Array.from(this.children).find(child => child.slot === 'after');
}
static get styles() {
return [
...super.styles,
@ -88,8 +66,8 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
/** @param {import('@lion/core').PropertyValues } changedProperties */
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('currency') && this.currency) {
this._onCurrencyChanged({ currency: this.currency });
if (changedProperties.has('currency')) {
this._onCurrencyChanged({ currency: this.currency || null });
}
if (changedProperties.has('locale') && this.locale !== changedProperties.get('locale')) {
@ -126,25 +104,66 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
/**
* @param {Object} opts
* @param {string} opts.currency
* @param {string?} opts.currency
* @protected
*/
_onCurrencyChanged({ currency }) {
if (this._isPrivateSlot('after') && this._currencyDisplayNode) {
this._currencyDisplayNode.textContent = this.__currencyLabel;
this.formatOptions.currency = currency || undefined;
if (this.currency) {
if (!this._currencyDisplayNode) {
this._currencyDisplayNode = this._createCurrencyDisplayNode();
}
this.formatOptions.currency = currency;
this._currencyDisplayNode.textContent = this.__currencyLabel;
this._calculateValues({ source: null });
} else {
this._currencyDisplayNode = undefined;
}
this.__setCurrencyDisplayLabel();
}
/**
* @returns the current currency display node
* @protected
*/
get _currencyDisplayNode() {
return Array.from(this.children).find(child => child.slot === 'after');
}
/**
* @protected
*/
set _currencyDisplayNode(node) {
if (node) {
this.appendChild(node);
} else {
this._currencyDisplayNode?.remove();
}
}
/**
* @returns a newly created node for displaying the currency
* @protected
*/
_createCurrencyDisplayNode() {
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.__currencyLabel;
el.slot = 'after';
return el;
}
/** @private */
__setCurrencyDisplayLabel() {
// TODO: (@erikkroes) for optimal a11y, abbreviations should be part of aria-label
// example, for a language switch with text 'en', an aria-label of 'english' is not
// sufficient, it should also contain the abbreviation.
if (this.currency && this._currencyDisplayNode) {
this._currencyDisplayNode.setAttribute('aria-label', getCurrencyName(this.currency, {}));
if (this._currencyDisplayNode) {
this._currencyDisplayNode.setAttribute(
'aria-label',
this.currency ? getCurrencyName(this.currency, {}) : '',
);
}
}

33
packages/input-amount/test/lion-input-amount.test.js
View file

@ -134,6 +134,7 @@ describe('<lion-input-amount>', () => {
const el = /** @type {LionInputAmount} */ (
await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
);
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
?.innerText,
@ -197,6 +198,38 @@ describe('<lion-input-amount>', () => {
expect(el.formattedValue).to.equal('123,45');
});
it('removes the currency label when currency switches from EUR to undefined', async () => {
const el = /** @type {LionInputAmount} */ (
await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
);
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after')
?.innerText,
).to.equal('EUR');
el.currency = undefined;
await el.updateComplete;
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after'),
).to.be.undefined;
});
it('adds the currency label when currency switches from undefined to EUR', async () => {
const el = /** @type {LionInputAmount} */ (
await fixture(`<lion-input-amount></lion-input-amount>`)
);
expect(
/** @type {HTMLElement[]} */ (Array.from(el.children)).find(child => child.slot === 'after'),
).to.be.undefined;
el.currency = 'EUR';
await el.updateComplete;
const currLabel = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
child => child.slot === 'after',
);
expect(currLabel?.innerText).to.equal('EUR');
expect(currLabel?.getAttribute('aria-label')).to.equal('euros');
});
describe('Accessibility', () => {
it('is accessible', async () => {
const el = await fixture(