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() { get label() {
return ( return (this._labelNode && this._labelNode.textContent) || this.__label;
(this.querySelector('[slot="label"]') &&
this.querySelector('[slot="label"]').textContent) ||
this.__label
);
} }
set label(newValue) { set label(newValue) {
@ -68,11 +64,7 @@ export const FormControlMixin = dedupeMixin(
} }
get helpText() { get helpText() {
return ( return (this._helpTextNode && this._helpTextNode.textContent) || this.__helpText;
(this.querySelector('[slot="help-text"]') &&
this.querySelector('[slot="help-text"]').textContent) ||
this.__helpText
);
} }
set helpText(newValue) { 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'); 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 () => { it('can have a help-text', async () => {
const elAttr = await fixture(html` const elAttr = await fixture(html`
<${tag} help-text="We will not send you any spam">${inputSlot}</${tag}> <${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
@ -68,7 +78,7 @@ describe('FormControlMixin', () => {
const elElem = await fixture(html` const elElem = await fixture(html`
<${tag}> <${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} ${inputSlot}
</${tag}>`); </${tag}>`);
expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element'); 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 () => { it('can have a help-text that supports inner html', async () => {
const el = await fixture(html` const el = await fixture(html`
<${tag}> <${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} ${inputSlot}
</${tag}>`); </${tag}>`);
expect(el.helpText).to.equal('We will not send you any spam'); 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 () => { it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
const lionField = await fixture(` const lionField = await fixture(`
<${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}> <${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}>