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

fix(field): no DomHelpers for FormControl and apply all needed mixins

Browse source
This commit is contained in:
Thomas Allmer 2019-07-12 20:01:22 +02:00 committed by Thijs Louisse
parent b0543f07d5
commit bb1c702d8a
1 changed files with 43 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { html, css, nothing, dedupeMixin } from '@lion/core';
import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core';
import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
/**
@ -14,7 +14,7 @@ import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
export const FormControlMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-shadow, no-unused-vars
class FormControlMixin extends ObserverMixin(superclass) {
class FormControlMixin extends ObserverMixin(SlotMixin(superclass)) {
static get properties() {
return {
...super.properties,
@ -75,8 +75,21 @@ export const FormControlMixin = dedupeMixin(
};
}
/** @deprecated will be this._inputNode in next breaking release */
get inputElement() {
return (this.$$slot && this.$$slot('input')) || this.querySelector('[slot=input]'); // eslint-disable-line
return this.__getDirectSlotChild('input');
}
get _labelNode() {
return this.__getDirectSlotChild('label');
}
get _helpTextNode() {
return this.__getDirectSlotChild('help-text');
}
get _feedbackNode() {
return this.__getDirectSlotChild('feedback');
}
constructor() {
@ -107,29 +120,31 @@ export const FormControlMixin = dedupeMixin(
}
_enhanceLightDomA11y() {
if (this.inputElement) {
this.inputElement.id = this.inputElement.id || this._inputId;
const { inputElement, _labelNode, _helpTextNode, _feedbackNode } = this;
if (inputElement) {
inputElement.id = inputElement.id || this._inputId;
}
if (this.$$slot('label')) {
this.$$slot('label').setAttribute('for', this._inputId);
this.$$slot('label').id = this.$$slot('label').id || `label-${this._inputId}`;
const labelledById = ` ${this.$$slot('label').id}`;
if (_labelNode) {
_labelNode.setAttribute('for', this._inputId);
_labelNode.id = _labelNode.id || `label-${this._inputId}`;
const labelledById = ` ${_labelNode.id}`;
if (this._ariaLabelledby.indexOf(labelledById) === -1) {
this._ariaLabelledby += ` ${this.$$slot('label').id}`;
this._ariaLabelledby += ` ${_labelNode.id}`;
}
}
if (this.$$slot('help-text')) {
this.$$slot('help-text').id = this.$$slot('help-text').id || `help-text-${this._inputId}`;
const describeIdHelpText = ` ${this.$$slot('help-text').id}`;
if (_helpTextNode) {
_helpTextNode.id = _helpTextNode.id || `help-text-${this._inputId}`;
const describeIdHelpText = ` ${_helpTextNode.id}`;
if (this._ariaDescribedby.indexOf(describeIdHelpText) === -1) {
this._ariaDescribedby += ` ${this.$$slot('help-text').id}`;
this._ariaDescribedby += ` ${_helpTextNode.id}`;
}
}
if (this.$$slot('feedback')) {
this.$$slot('feedback').id = this.$$slot('feedback').id || `feedback-${this._inputId}`;
const describeIdFeedback = ` ${this.$$slot('feedback').id}`;
if (_feedbackNode) {
_feedbackNode.id = _feedbackNode.id || `feedback-${this._inputId}`;
const describeIdFeedback = ` ${_feedbackNode.id}`;
if (this._ariaDescribedby.indexOf(describeIdFeedback) === -1) {
this._ariaDescribedby += ` ${this.$$slot('feedback').id}`;
this._ariaDescribedby += ` ${_feedbackNode.id}`;
}
}
this._enhanceLightDomA11yForAdditionalSlots();
@ -181,7 +196,7 @@ export const FormControlMixin = dedupeMixin(
additionalSlots = ['prefix', 'suffix', 'before', 'after'],
) {
additionalSlots.forEach(additionalSlot => {
const element = this.$$slot(additionalSlot);
const element = this.__getDirectSlotChild(additionalSlot);
if (element) {
element.id = element.id || `${additionalSlot}-${this._inputId}`;
if (element.hasAttribute('data-label') === true) {
@ -218,14 +233,14 @@ export const FormControlMixin = dedupeMixin(
}
_onLabelChanged({ label }) {
if (this.$$slot && this.$$slot('label')) {
this.$$slot('label').textContent = label;
if (this._labelNode) {
this._labelNode.textContent = label;
}
}
_onHelpTextChanged({ helpText }) {
if (this.$$slot && this.$$slot('help-text')) {
this.$$slot('help-text').textContent = helpText;
if (this._helpTextNode) {
this._helpTextNode.textContent = helpText;
}
}
@ -552,7 +567,7 @@ export const FormControlMixin = dedupeMixin(
// Returns dom references to all elements that should be referred to by field(s)
_getAriaDescriptionElements() {
return [this.$$slot('help-text'), this.$$slot('feedback')];
return [this._helpTextNode, this._feedbackNode];
}
/**
@ -574,5 +589,9 @@ export const FormControlMixin = dedupeMixin(
addToAriaDescription(id) {
this._ariaDescribedby += ` ${id}`;
}
__getDirectSlotChild(slotName) {
return [...this.children].find(el => el.slot === slotName);
}
},
);