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

Merge pull request #548 from ing-bank/fix/fieldset-label

Browse source 
fix(field): limit get label/help-text to childNodes
This commit is contained in:
gerjanvangeest 2020-02-05 13:26:42 +01:00 committed by GitHub
commit 6dc3bfa8f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/field/src/FormControlMixin.js
View file

@ -54,11 +54,7 @@ export const FormControlMixin = dedupeMixin(
}
get label() {
return (
(this.querySelector('[slot="label"]') &&
this.querySelector('[slot="label"]').textContent) ||
this.__label
);
return (this._labelNode && this._labelNode.textContent) || this.__label;
}
set label(newValue) {
@ -68,11 +64,7 @@ export const FormControlMixin = dedupeMixin(
}
get helpText() {
return (
(this.querySelector('[slot="help-text"]') &&
this.querySelector('[slot="help-text"]').textContent) ||
this.__helpText
);
return (this._helpTextNode && this._helpTextNode.textContent) || this.__helpText;
}
set helpText(newValue) {

24
packages/field/test/FormControlMixin.test.js
View file

@ -53,6 +53,16 @@ describe('FormControlMixin', () => {
expect(el.label).to.equal('Email address');
});
it('only takes label of direct child', async () => {
const el = await fixture(html`
<${tag}>
<${tag} label="Email address">
${inputSlot}
</${tag}>
</${tag}>`);
expect(el.label).to.equal(undefined);
});
it('can have a help-text', async () => {
const elAttr = await fixture(html`
<${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
@ -68,7 +78,7 @@ describe('FormControlMixin', () => {
const elElem = await fixture(html`
<${tag}>
<label slot="help-text">We will not send you any spam</label>
<div slot="help-text">We will not send you any spam</div>
${inputSlot}
</${tag}>`);
expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
@ -77,12 +87,22 @@ describe('FormControlMixin', () => {
it('can have a help-text that supports inner html', async () => {
const el = await fixture(html`
<${tag}>
<label slot="help-text">We will not send you any spam</label>
<div slot="help-text">We will not send you any <span>spam</span></div>
${inputSlot}
</${tag}>`);
expect(el.helpText).to.equal('We will not send you any spam');
});
it('only takes help-text of direct child', async () => {
const el = await fixture(html`
<${tag}>
<${tag} help-text="We will not send you any spam">
${inputSlot}
</${tag}>
</${tag}>`);
expect(el.helpText).to.equal(undefined);
});
it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
const lionField = await fixture(`
<${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}>