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

fix(input-amount): Link currency to label after setting currency from… (#2091)

Browse source
This commit is contained in:
Gyulai Levente 2023-10-17 14:55:13 +02:00 committed by GitHub
parent 63a8e725db
commit be36bf3b1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/sour-zoos-bow.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Fix accessibility currency linking to label after setting currency from undefined in LionInputAmount.

7
packages/ui/components/input-amount/src/LionInputAmount.js
View file

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

21
packages/ui/components/input-amount/test/lion-input-amount.test.js
View file

@ -308,6 +308,27 @@ describe('<lion-input-amount>', () => {
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(`<lion-input-amount></lion-input-amount>`)
);
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(`<lion-input-amount currency="EUR"></lion-input-amount>`)