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

Make Currency Display Node Private

Browse source
This commit is contained in:
Felix Mueller 2021-07-29 07:26:05 +02:00
parent 7ccbe2e90d
commit 99d894efb3
2 changed files with 35 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -110,36 +110,17 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
_onCurrencyChanged({ currency }) {
this.formatOptions.currency = currency || undefined;
if (this.currency) {
if (!this._currencyDisplayNode) {
this._currencyDisplayNode = this._createCurrencyDisplayNode();
if (!this.__currencyDisplayNode) {
this.__currencyDisplayNode = this._createCurrencyDisplayNode();
}
this._currencyDisplayNode.textContent = this.__currencyLabel;
this.__currencyDisplayNode.textContent = this.__currencyLabel;
this._calculateValues({ source: null });
} else {
this._currencyDisplayNode = undefined;
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
@ -154,13 +135,32 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
return el;
}
/**
* @returns the current currency display node
* @private
*/
get __currencyDisplayNode() {
return Array.from(this.children).find(child => child.slot === 'after');
}
/**
* @private
*/
set __currencyDisplayNode(node) {
if (node) {
this.appendChild(node);
} else {
this.__currencyDisplayNode?.remove();
}
}
/** @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._currencyDisplayNode) {
this._currencyDisplayNode.setAttribute(
if (this.__currencyDisplayNode) {
this.__currencyDisplayNode.setAttribute(
'aria-label',
this.currency ? getCurrencyName(this.currency, {}) : '',
);

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

@ -256,19 +256,25 @@ describe('<lion-input-amount>', () => {
const el = /** @type {LionInputAmount} */ (
await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)
);
expect(el._currencyDisplayNode?.getAttribute('data-label')).to.be.not.null;
const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
child => child.slot === 'after',
);
expect(label?.getAttribute('data-label')).to.be.not.null;
const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
expect(_inputNode.getAttribute('aria-labelledby')).to.contain(el._currencyDisplayNode?.id);
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>`)
);
expect(el._currencyDisplayNode?.getAttribute('aria-label')).to.equal('euros');
const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
child => child.slot === 'after',
);
expect(label?.getAttribute('aria-label')).to.equal('euros');
el.currency = 'USD';
await el.updateComplete;
expect(el._currencyDisplayNode?.getAttribute('aria-label')).to.equal('US dollars');
expect(label?.getAttribute('aria-label')).to.equal('US dollars');
el.currency = 'PHP';
await el.updateComplete;
// TODO: Chrome Intl now thinks this should be pesos instead of pisos. They're probably right.