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

fix(select-rich): add aria-invalid when invalid

Browse source
This commit is contained in:
qa46hx 2019-12-23 09:37:23 +01:00
parent f9002d93bb
commit db5f2ef38c
2 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/select-rich/src/LionSelectRich.js
View file

@ -278,6 +278,11 @@ export class LionSelectRich extends OverlayMixin(
this._inputNode.getAttribute('aria-describedby'),
);
}
if (changedProps.has('showsFeedbackFor')) {
// The ValidateMixin sets aria-invalid on the inputNode, but in this component we also need it on the invoker
this._invokerNode.setAttribute('aria-invalid', this._hasFeedbackVisibleFor('error'));
}
}
}

26
packages/select-rich/test/lion-select-rich-interaction.test.js
View file

@ -667,5 +667,31 @@ describe('lion-select-rich interactions', () => {
expect(oEl.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
});
});
it('sets [aria-invalid="true"] to "._invokerNode" when there is an error', async () => {
const el = await fixture(html`
<lion-select-rich .validators=${[new Required()]}>
<lion-options slot="input">
<lion-option .choiceValue=${null}>Please select a value</lion-option>
<lion-option .modelValue=${{ value: 10, checked: true }}>Item 1</lion-option>
</lion-options>
</lion-select-rich>
`);
const invokerNode = el._invokerNode;
const options = el.querySelectorAll('lion-option');
await el.feedbackComplete;
await el.updateComplete;
expect(invokerNode.getAttribute('aria-invalid')).to.equal('false');
options[0].checked = true;
await el.feedbackComplete;
await el.updateComplete;
expect(invokerNode.getAttribute('aria-invalid')).to.equal('true');
options[1].checked = true;
await el.feedbackComplete;
await el.updateComplete;
expect(invokerNode.getAttribute('aria-invalid')).to.equal('false');
});
});
});