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

fix(input-amount): a11y currency label

Browse source
This commit is contained in:
Thijs Louisse 2019-11-27 13:30:55 +01:00
parent 76492af889
commit 0d687bbe1e
2 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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() {

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

@ -69,9 +69,9 @@ describe('<lion-input-amount>', () => {
expect(el._inputNode.type).to.equal('text');
});
it('shows no currency', async () => {
it('shows no currency by default', async () => {
const el = await fixture(`<lion-input-amount></lion-input-amount>`);
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('<lion-input-amount>', () => {
'my-currency',
);
});
describe('Accessibility', () => {
it('adds currency id to aria-labelledby of input', async () => {
const el = await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`);
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(`<lion-input-amount currency="EUR"></lion-input-amount>`);
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');
});
});
});