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

Merge pull request #1325 from ing-bank/fix/fieldsetLabelAsChildSuffix

Browse source 
fix(form-core): a11y / types / test fixes
This commit is contained in:
Thijs Louisse 2021-04-12 14:30:02 +02:00 committed by GitHub
commit 2241f72f20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 570 additions and 331 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rotten-dots-argue.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/form-core': patch
---
**form-core**: fieldset label as child label suffix. Mimics native fieldset a11y

8
.changeset/rude-ducks-hide.md Normal file
View file

@ -0,0 +1,8 @@
---
'@lion/form-core': patch
---
**form-core**:
- cleanup group > child descriptions on disconnectedCallback
- reenable tests

6
.changeset/slimy-items-wait.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/combobox': patch
'@lion/form-core': patch
---
**combobox**: enabled and fixed types

22
packages/combobox/src/LionCombobox.js
View file

@ -1,4 +1,3 @@
// @ts-nocheck there's an error in cli that cannot be reproduced locally
import { html, css, browserDetection } from '@lion/core';
import { OverlayMixin, withDropdownConfig } from '@lion/overlays';
import { LionListbox } from '@lion/listbox';
@ -12,6 +11,8 @@ import { LionListbox } from '@lion/listbox';
* @typedef {import('@lion/listbox').LionOptions} LionOptions
* @typedef {import('@lion/overlays/types/OverlayConfig').OverlayConfig} OverlayConfig
* @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap
* @typedef {import('@lion/form-core/types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
* @typedef {import('@lion/form-core/types/FormControlMixinTypes').FormControlHost} FormControlHost
* @typedef {import('../types/SelectionDisplay').SelectionDisplay} SelectionDisplay
*/
@ -19,6 +20,7 @@ import { LionListbox } from '@lion/listbox';
* LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
* FormControl
*/
// @ts-expect-error static properties are not compatible
export class LionCombobox extends OverlayMixin(LionListbox) {
static get properties() {
return {
@ -180,7 +182,6 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* @configure FormControlMixin
* Will tell FormControlMixin that a11y wrt labels / descriptions / feedback
* should be applied here.
* @protected
*/
get _inputNode() {
if (this._ariaVersion === '1.1') {
@ -413,8 +414,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* return options.currentValue.length > 4 && super._showOverlayCondition(options);
* }
*
* @param {{ currentValue: string, lastKey:string }} options
* @param {{ currentValue: string, lastKey:string|undefined }} options
* @protected
* @returns {boolean}
*/
// eslint-disable-next-line class-methods-use-this
_showOverlayCondition({ lastKey }) {
@ -423,7 +425,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
}
// when no keyboard action involved (on focused change), return current opened state
if (!lastKey) {
return this.opened;
return /** @type {boolean} */ (this.opened);
}
const doNotShowOn = ['Tab', 'Esc', 'Enter'];
return !doNotShowOn.includes(lastKey);
@ -505,8 +507,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* should indeed not repropagate as normally. If there is no elements checked, this will be the only
* model-value-changed event that gets received, and we should repropagate it.
*
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
* @protected
* @param {FormControlHost} target
*/
_repropagationCondition(target) {
return super._repropagationCondition(target) || this.formElements.every(el => !el.checked);
@ -801,6 +802,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* @overridable
* @param {string|string[]} modelValue
* @param {string|string[]} oldModelValue
* @param {{phase?:string}} config
* @protected
*/
// eslint-disable-next-line no-unused-vars
@ -818,17 +820,17 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* @protected
*/
_syncToTextboxMultiple(modelValue, oldModelValue = []) {
const diff = modelValue.filter(x => !oldModelValue.includes(x));
const diff = modelValue.filter(x => !oldModelValue.includes(x)).toString();
this._setTextboxValue(diff); // or last selected value?
}
/**
* @override FormControlMixin - add form-control to [slot=input] instead of _inputNode
* @protected
*/
_enhanceLightDomClasses() {
if (this.querySelector('[slot=input]')) {
this.querySelector('[slot=input]').classList.add('form-control');
const formControl = /** @type {HTMLInputElement} */ (this.querySelector('[slot=input]'));
if (formControl) {
formControl.classList.add('form-control');
}
}

3
packages/combobox/test/lion-combobox.test.js
View file

@ -1562,15 +1562,12 @@ describe('lion-combobox', () => {
it('synchronizes autocomplete option to textbox', async () => {
let el;
[el] = await fruitFixture({ autocomplete: 'both' });
// @ts-expect-error
expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('both');
[el] = await fruitFixture({ autocomplete: 'list' });
// @ts-expect-error
expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('list');
[el] = await fruitFixture({ autocomplete: 'none' });
// @ts-expect-error
expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('none');
});

55
packages/form-core/src/FormControlMixin.js
View file

@ -9,6 +9,7 @@ import { Unparseable } from './validate/Unparseable.js';
* @typedef {import('@lion/core').CSSResultArray} CSSResultArray
* @typedef {import('@lion/core').nothing} nothing
* @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap
* @typedef {import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
* @typedef {import('../types/FormControlMixinTypes.js').FormControlMixin} FormControlMixin
* @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
*/
@ -321,10 +322,10 @@ const FormControlMixinImplementation = superclass =>
additionalSlots.forEach(additionalSlot => {
const element = this.__getDirectSlotChild(additionalSlot);
if (element) {
if (element.hasAttribute('data-label') === true) {
if (element.hasAttribute('data-label')) {
this.addToAriaLabelledBy(element, { idPrefix: additionalSlot });
}
if (element.hasAttribute('data-description') === true) {
if (element.hasAttribute('data-description')) {
this.addToAriaDescribedBy(element, { idPrefix: additionalSlot });
}
}
@ -346,6 +347,7 @@ const FormControlMixinImplementation = superclass =>
if (reorder) {
const insideNodes = nodes.filter(n => this.contains(n));
const outsideNodes = nodes.filter(n => !this.contains(n));
// eslint-disable-next-line no-param-reassign
nodes = [...getAriaElementsInRightDomOrder(insideNodes), ...outsideNodes];
}
@ -691,6 +693,8 @@ const FormControlMixinImplementation = superclass =>
}
/**
* This function exposes descripion elements that a FormGroup should expose to its
* children. See FormGroupMixin.__getAllDescriptionElementsInParentChain()
* @return {Array.<HTMLElement|undefined>}
* @protected
*/
@ -704,12 +708,7 @@ const FormControlMixinImplementation = superclass =>
* @param {HTMLElement} element
* @param {{idPrefix?:string; reorder?: boolean}} customConfig
*/
addToAriaLabelledBy(element, customConfig = {}) {
const { idPrefix, reorder } = {
reorder: true,
...customConfig,
};
addToAriaLabelledBy(element, { idPrefix = '', reorder = true } = {}) {
// eslint-disable-next-line no-param-reassign
element.id = element.id || `${idPrefix}-${this._inputId}`;
if (!this._ariaLabelledNodes.includes(element)) {
@ -720,18 +719,27 @@ const FormControlMixinImplementation = superclass =>
}
}
/**
* Meant for Application Developers wanting to delete from aria-labelledby attribute.
* @param {HTMLElement} element
*/
removeFromAriaLabelledBy(element) {
if (this._ariaLabelledNodes.includes(element)) {
this._ariaLabelledNodes.splice(this._ariaLabelledNodes.indexOf(element), 1);
this._ariaLabelledNodes = [...this._ariaLabelledNodes];
// This value will be read when we need to reflect to attr
/** @type {boolean} */
this.__reorderAriaLabelledNodes = false;
}
}
/**
* Meant for Application Developers wanting to add to aria-describedby attribute.
* @param {HTMLElement} element
* @param {{idPrefix?:string; reorder?: boolean}} customConfig
*/
addToAriaDescribedBy(element, customConfig = {}) {
const { idPrefix, reorder } = {
// chronologically sorts children of host element('this')
reorder: true,
...customConfig,
};
addToAriaDescribedBy(element, { idPrefix = '', reorder = true } = {}) {
// eslint-disable-next-line no-param-reassign
element.id = element.id || `${idPrefix}-${this._inputId}`;
if (!this._ariaDescribedNodes.includes(element)) {
@ -742,6 +750,20 @@ const FormControlMixinImplementation = superclass =>
}
}
/**
* Meant for Application Developers wanting to delete from aria-describedby attribute.
* @param {HTMLElement} element
*/
removeFromAriaDescribedBy(element) {
if (this._ariaDescribedNodes.includes(element)) {
this._ariaDescribedNodes.splice(this._ariaDescribedNodes.indexOf(element), 1);
this._ariaDescribedNodes = [...this._ariaDescribedNodes];
// This value will be read when we need to reflect to attr
/** @type {boolean} */
this.__reorderAriaLabelledNodes = false;
}
}
/**
* @param {string} slotName
* @return {HTMLElement | undefined}
@ -862,8 +884,9 @@ const FormControlMixinImplementation = superclass =>
/**
* TODO: Extend this in choice group so that target is always a choice input and multipleChoice exists.
* This will fix the types and reduce the need for ignores/expect-errors
* @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target
* @param {EventTarget & ChoiceInputHost} target
* @protected
* @overridable
*/
_repropagationCondition(target) {
return !(

3
packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

@ -114,9 +114,7 @@ const ChoiceInputMixinImplementation = superclass =>
if (
changedProperties.has('name') &&
// @ts-expect-error not all choice inputs have a parent form group, since this mixin does not have a strict contract with the registration system
this._parentFormGroup &&
// @ts-expect-error
this._parentFormGroup.name !== this.name
) {
this._syncNameToParentFormGroup();
@ -251,7 +249,6 @@ const ChoiceInputMixinImplementation = superclass =>
_syncNameToParentFormGroup() {
// @ts-expect-error not all choice inputs have a name prop, because this mixin does not have a strict contract with form control mixin
if (this._parentFormGroup.tagName.includes(this.tagName)) {
// @ts-expect-error
this.name = this._parentFormGroup.name;
}
}

85
packages/form-core/src/form-group/FormGroupMixin.js
View file

@ -126,7 +126,7 @@ const FormGroupMixinImplementation = superclass =>
constructor() {
super();
// inputNode = this, which always requires a value prop
// ._inputNode = this, which always requires a value prop
this.value = '';
this.disabled = false;
@ -146,6 +146,8 @@ const FormGroupMixinImplementation = superclass =>
this.addEventListener('validate-performed', this.__onChildValidatePerformed);
this.defaultValidators = [new FormElementsHaveNoError()];
this.__descriptionElementsInParentChain = new Set();
}
connectedCallback() {
@ -166,6 +168,7 @@ const FormGroupMixinImplementation = superclass =>
document.removeEventListener('click', this._checkForOutsideClick);
this.__hasActiveOutsideClickHandling = false;
}
this.__descriptionElementsInParentChain.clear();
}
__initInteractionStates() {
@ -425,20 +428,58 @@ const FormGroupMixinImplementation = superclass =>
}
/**
* @param {FormControl} child
* Traverses the _parentFormGroup tree, and gathers all aria description elements
* (feedback and helptext) that should be provided to children.
*
* In the example below, when the input for 'street' has focus, a screenreader user
* would hear the #group-error.
* In case one of the inputs was in error state as well, the SR user would
* first hear the local error, followed by #group-error
* @example
* <lion-fieldset name="address">
* <lion-input name="street" label="Street" .modelValue="${'Park Avenue'}"></lion-input>
* <lion-input name="number" label="Number" .modelValue="${100}">...</lion-input>
* <div slot="feedback" id="group-error">
* Park Avenue only has numbers up to 80
* </div>
* </lion-fieldset>
*/
__linkChildrenMessagesToParent(child) {
// aria-describedby of (nested) children
__storeAllDescriptionElementsInParentChain() {
const unTypedThis = /** @type {unknown} */ (this);
let parent = /** @type {FormControlHost & { _parentFormGroup:any }} */ (unTypedThis);
const ctor = /** @type {typeof FormGroupMixin} */ (this.constructor);
while (parent) {
ctor._addDescriptionElementIdsToField(child, parent._getAriaDescriptionElements());
const descriptionElements = parent._getAriaDescriptionElements();
const orderedEls = getAriaElementsInRightDomOrder(descriptionElements, { reverse: true });
orderedEls.forEach(el => {
this.__descriptionElementsInParentChain.add(el);
});
// Also check if the newly added child needs to refer grandparents
parent = parent._parentFormGroup;
}
}
/**
* @param {FormControl} child
*/
__linkParentMessages(child) {
this.__descriptionElementsInParentChain.forEach(el => {
if (typeof child.addToAriaDescribedBy === 'function') {
child.addToAriaDescribedBy(el, { reorder: false });
}
});
}
/**
* @param {FormControl} child
*/
__unlinkParentMessages(child) {
this.__descriptionElementsInParentChain.forEach(el => {
if (typeof child.removeFromAriaDescribedBy === 'function') {
child.removeFromAriaDescribedBy(el);
}
});
}
/**
* @override of FormRegistrarMixin.
* @desc Connects ValidateMixin and DisabledMixin
@ -451,9 +492,15 @@ const FormGroupMixinImplementation = superclass =>
if (this.disabled) {
child.makeRequestToBeDisabled();
}
// TODO: Unlink in removeFormElement
this.__linkChildrenMessagesToParent(child);
if (!this.__descriptionElementsInParentChain.size) {
this.__storeAllDescriptionElementsInParentChain();
}
this.__linkParentMessages(child);
this.validate({ clearCurrentResult: true });
if (typeof child.addToAriaLabelledBy === 'function' && this._labelNode) {
child.addToAriaLabelledBy(this._labelNode, { reorder: false });
}
}
/**
@ -464,28 +511,18 @@ const FormGroupMixinImplementation = superclass =>
return this._getFromAllFormElements('_initialModelValue');
}
/**
* Add aria-describedby to child element(field), so that it points to feedback/help-text of
* parent(fieldset)
* @param {FormControl} field - the child: lion-field/lion-input/lion-textarea
* @param {HTMLElement[]} descriptionElements - description elements like feedback and help-text
*/
static _addDescriptionElementIdsToField(field, descriptionElements) {
const orderedEls = getAriaElementsInRightDomOrder(descriptionElements, { reverse: true });
orderedEls.forEach(el => {
if (field.addToAriaDescribedBy) {
field.addToAriaDescribedBy(el, { reorder: false });
}
});
}
/**
* @override of FormRegistrarMixin. Connects ValidateMixin
* @param {FormRegisteringHost} el
* @param {FormRegisteringHost & FormControl} el
*/
removeFormElement(el) {
super.removeFormElement(el);
this.validate({ clearCurrentResult: true });
if (typeof el.removeFromAriaLabelledBy === 'function' && this._labelNode) {
el.removeFromAriaLabelledBy(this._labelNode, { reorder: false });
}
this.__unlinkParentMessages(el);
}
};

1
packages/form-core/src/registration/FormRegistrarMixin.js
View file

@ -131,6 +131,7 @@ const FormRegistrarMixinImplementation = superclass =>
*/
addFormElement(child, indexToInsertAt) {
// This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
// @ts-expect-error FormControl needs to be at the bottom of the hierarchy
// eslint-disable-next-line no-param-reassign
child._parentFormGroup = this;

1
packages/form-core/test-suites/choice-group/ChoiceGroupMixin.suite.js
View file

@ -11,7 +11,6 @@ customElements.define('choice-input-foo', ChoiceInputFoo);
class ChoiceInputBar extends ChoiceInputMixin(LionInput) {
_syncNameToParentFormGroup() {
// Always sync, without conditions
// @ts-expect-error
this.name = this._parentFormGroup.name;
}
}

226
packages/form-core/test-suites/form-group/FormGroupMixin-input.suite.js
View file

@ -5,6 +5,10 @@ import { LionInput } from '@lion/input';
import '@lion/form-core/define';
import { FormGroupMixin } from '../../src/form-group/FormGroupMixin.js';
/**
* @typedef {import('@lion/form-core').LionField} LionField
*/
/**
* @param {{ tagString?: string, childTagString?:string }} [cfg]
*/
@ -40,7 +44,7 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
localizeTearDown();
});
describe('FormGroupMixin with LionInput', () => {
describe('FormGroupMixin with LionField', () => {
it('serializes undefined values as "" (nb radios/checkboxes are always serialized)', async () => {
const fieldset = /** @type {FormGroup} */ (await fixture(html`
<${tag}>
@ -55,6 +59,34 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
'custom[]': ['custom 1', ''],
});
});
it('suffixes child labels with group label, just like in <fieldset>', async () => {
const el = /** @type {FormGroup} */ (await fixture(html`
<${tag} label="set">
<${childTag} name="A" label="fieldA"></${childTag}>
<${childTag} name="B" label="fieldB"></${childTag}>
</${tag}>
`));
/**
* @param {LionInput} formControl
*/
function getLabels(formControl) {
return /** @type {string} */ (formControl._inputNode.getAttribute('aria-labelledby')).split(
' ',
);
}
const field1 = el.formElements[0];
const field2 = el.formElements[1];
expect(getLabels(field1)).to.eql([field1._labelNode.id, el._labelNode.id]);
expect(getLabels(field2)).to.eql([field2._labelNode.id, el._labelNode.id]);
// Test the cleanup on disconnected
el.removeChild(field1);
await field1.updateComplete;
expect(getLabels(field1)).to.eql([field1._labelNode.id]);
});
});
describe('Screen reader relations (aria-describedby) for child inputs and fieldsets', () => {
@ -112,8 +144,11 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
return dom;
};
// eslint-disable-next-line no-shadow
childAriaTest = (/** @type {FormGroup} */ childAriaFixture) => {
childAriaTest = async (
// eslint-disable-next-line no-shadow
/** @type {FormGroup} */ childAriaFixture,
{ cleanupPhase = false } = {},
) => {
/* eslint-disable camelcase */
// Message elements: all elements pointed at by inputs
const msg_l1_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('#msg_l1_g'));
@ -124,75 +159,152 @@ export function runFormGroupMixinInputSuite(cfg = {}) {
const msg_l2_fb = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l2_fb'));
// Field elements: all inputs pointing to message elements
const input_l1_fa = /** @type {FormChild} */ (childAriaFixture.querySelector(
const input_l1_fa = /** @type {HTMLInputElement} */ (childAriaFixture.querySelector(
'input[name=l1_fa]',
));
const input_l1_fb = /** @type {FormChild} */ (childAriaFixture.querySelector(
const input_l1_fb = /** @type {HTMLInputElement} */ (childAriaFixture.querySelector(
'input[name=l1_fb]',
));
const input_l2_fa = /** @type {FormChild} */ (childAriaFixture.querySelector(
const input_l2_fa = /** @type {HTMLInputElement} */ (childAriaFixture.querySelector(
'input[name=l2_fa]',
));
const input_l2_fb = /** @type {FormChild} */ (childAriaFixture.querySelector(
const input_l2_fb = /** @type {HTMLInputElement} */ (childAriaFixture.querySelector(
'input[name=l2_fb]',
));
if (!cleanupPhase) {
// 'L1' fields (inside lion-fieldset[name="l1_g"]) should point to l1(group) msg
expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l1 input(a) refers parent/group',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l1 input(b) refers parent/group',
);
// Also check that aria-describedby of the inputs are not overridden (this relation was
// put there in lion-input(using lion-field)).
expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_fa.id,
'l1 input(a) refers local field',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_fb.id,
'l1 input(b) refers local field',
);
// Also make feedback element point to nested fieldset inputs
expect(input_l2_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l2 input(a) refers grandparent/group.group',
);
expect(input_l2_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l2 input(b) refers grandparent/group.group',
);
// Check order: the nearest ('dom wise': so 1. local, 2. parent, 3. grandparent) message
// should be read first by screen reader
const dA = /** @type {string} */ (input_l2_fa.getAttribute('aria-describedby'));
expect(
// @ts-expect-error
dA.indexOf(msg_l2_fa.id) < dA.indexOf(msg_l2_g.id) < dA.indexOf(msg_l1_g.id),
).to.equal(true, 'order of ids');
const dB = input_l2_fb.getAttribute('aria-describedby');
expect(
// @ts-expect-error
dB.indexOf(msg_l2_fb.id) < dB.indexOf(msg_l2_g.id) < dB.indexOf(msg_l1_g.id),
).to.equal(true, 'order of ids');
} else {
// cleanupPhase
const control_l1_fa = /** @type {LionField} */ (childAriaFixture.querySelector(
'[name=l1_fa]',
));
const control_l1_fb = /** @type {LionField} */ (childAriaFixture.querySelector(
'[name=l1_fb]',
));
const control_l2_fa = /** @type {LionField} */ (childAriaFixture.querySelector(
'[name=l2_fa]',
));
const control_l2_fb = /** @type {LionField} */ (childAriaFixture.querySelector(
'[name=l2_fb]',
));
// @ts-expect-error removeChild should always be inherited via LitElement?
control_l1_fa._parentFormGroup.removeChild(control_l1_fa);
await control_l1_fa.updateComplete;
// @ts-expect-error removeChild should always be inherited via LitElement?
control_l1_fb._parentFormGroup.removeChild(control_l1_fb);
await control_l1_fb.updateComplete;
// @ts-expect-error removeChild should always be inherited via LitElement?
control_l2_fa._parentFormGroup.removeChild(control_l2_fa);
await control_l2_fa.updateComplete;
// @ts-expect-error removeChild should always be inherited via LitElement?
control_l2_fb._parentFormGroup.removeChild(control_l2_fb);
await control_l2_fb.updateComplete;
// 'L1' fields (inside lion-fieldset[name="l1_g"]) should point to l1(group) msg
expect(input_l1_fa.getAttribute('aria-describedby')).to.not.contain(
msg_l1_g.id,
'l1 input(a) refers parent/group',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.not.contain(
msg_l1_g.id,
'l1 input(b) refers parent/group',
);
// Also check that aria-describedby of the inputs are not overridden (this relation was
// put there in lion-input(using lion-field)).
expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_fa.id,
'l1 input(a) refers local field',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_fb.id,
'l1 input(b) refers local field',
);
// Also make feedback element point to nested fieldset inputs
expect(input_l2_fa.getAttribute('aria-describedby')).to.not.contain(
msg_l1_g.id,
'l2 input(a) refers grandparent/group.group',
);
expect(input_l2_fb.getAttribute('aria-describedby')).to.not.contain(
msg_l1_g.id,
'l2 input(b) refers grandparent/group.group',
);
// Check cleanup of FormGroup on disconnect
const l2_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('[name=l2_g]'));
expect(l2_g.__descriptionElementsInParentChain.size).to.not.equal(0);
// @ts-expect-error removeChild should always be inherited via LitElement?
l2_g._parentFormGroup.removeChild(l2_g);
await l2_g.updateComplete;
expect(l2_g.__descriptionElementsInParentChain.size).to.equal(0);
}
/* eslint-enable camelcase */
// 'L1' fields (inside lion-fieldset[name="l1_g"]) should point to l1(group) msg
expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l1 input(a) refers parent/group',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l1 input(b) refers parent/group',
);
// Also check that aria-describedby of the inputs are not overridden (this relation was
// put there in lion-input(using lion-field)).
expect(input_l1_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_fa.id,
'l1 input(a) refers local field',
);
expect(input_l1_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_fb.id,
'l1 input(b) refers local field',
);
// Also make feedback element point to nested fieldset inputs
expect(input_l2_fa.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l2 input(a) refers grandparent/group.group',
);
expect(input_l2_fb.getAttribute('aria-describedby')).to.contain(
msg_l1_g.id,
'l2 input(b) refers grandparent/group.group',
);
// Check order: the nearest ('dom wise': so 1. local, 2. parent, 3. grandparent) message
// should be read first by screen reader
const dA = /** @type {string} */ (input_l2_fa.getAttribute('aria-describedby'));
expect(
// @ts-expect-error
dA.indexOf(msg_l2_fa.id) < dA.indexOf(msg_l2_g.id) < dA.indexOf(msg_l1_g.id),
).to.equal(true, 'order of ids');
const dB = input_l2_fb.getAttribute('aria-describedby');
expect(
// @ts-expect-error
dB.indexOf(msg_l2_fb.id) < dB.indexOf(msg_l2_g.id) < dB.indexOf(msg_l1_g.id),
).to.equal(true, 'order of ids');
};
});
it(`reads feedback message belonging to fieldset when child input is focused
it(`reads feedback message belonging to fieldset when child input is focused
(via aria-describedby)`, async () => {
childAriaTest(await childAriaFixture('feedback'));
});
await childAriaTest(await childAriaFixture('feedback'));
});
it(`reads help-text message belonging to fieldset when child input is focused
it(`reads help-text message belonging to fieldset when child input is focused
(via aria-describedby)`, async () => {
childAriaTest(await childAriaFixture('help-text'));
});
await childAriaTest(await childAriaFixture('help-text'));
});
it(`cleans up feedback message belonging to fieldset on disconnect`, async () => {
const el = await childAriaFixture('feedback');
await childAriaTest(el, { cleanupPhase: true });
});
it(`cleans up help-text message belonging to fieldset on disconnect`, async () => {
const el = await childAriaFixture('help-text');
await childAriaTest(el, { cleanupPhase: true });
});
});
}

417
packages/form-core/test/FormControlMixin.test.js
View file

@ -5,35 +5,13 @@ import { FormControlMixin } from '../src/FormControlMixin.js';
import { FormRegistrarMixin } from '../src/registration/FormRegistrarMixin.js';
describe('FormControlMixin', () => {
const inputSlot = '<input slot="input" />';
const inputSlot = html`<input slot="input" />`;
class FormControlMixinClass extends FormControlMixin(LitElement) {}
const tagString = defineCE(FormControlMixinClass);
const tag = unsafeStatic(tagString);
it('has a label', async () => {
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} label="Email address">${inputSlot}</${tag}>
`));
expect(elAttr.label).to.equal('Email address', 'as an attribute');
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}
.label=${'Email address'}
>${inputSlot}
</${tag}>`));
expect(elProp.label).to.equal('Email address', 'as a property');
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<label slot="label">Email address</label>
${inputSlot}
</${tag}>`));
expect(elElem.label).to.equal('Email address', 'as an element');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<${tag} hidden>
@ -43,172 +21,283 @@ describe('FormControlMixin', () => {
expect(el).not.to.be.displayed;
});
it('has a label that supports inner html', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<label slot="label">Email <span>address</span></label>
${inputSlot}
</${tag}>`));
expect(el.label).to.equal('Email address');
});
describe('Label and helpText api', () => {
it('has a label', async () => {
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} label="Email address">${inputSlot}</${tag}>
`));
it('only takes label of direct child', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<${tag} label="Email address">
expect(elAttr.label).to.equal('Email address', 'as an attribute');
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}
.label=${'Email address'}
>${inputSlot}
</${tag}>`));
expect(elProp.label).to.equal('Email address', 'as a property');
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<label slot="label">Email address</label>
${inputSlot}
</${tag}>
</${tag}>`));
expect(el.label).to.equal('');
});
</${tag}>`));
expect(elElem.label).to.equal('Email address', 'as an element');
});
it('can have a help-text', async () => {
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
`));
expect(elAttr.helpText).to.equal('We will not send you any spam', 'as an attribute');
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}
.helpText=${'We will not send you any spam'}
>${inputSlot}
</${tag}>`));
expect(elProp.helpText).to.equal('We will not send you any spam', 'as a property');
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<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');
});
it('can have a help-text that supports inner html', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<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 = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<${tag} help-text="We will not send you any spam">
it('has a label that supports inner html', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<label slot="label">Email <span>address</span></label>
${inputSlot}
</${tag}>
</${tag}>`));
expect(el.helpText).to.equal('');
});
</${tag}>`));
expect(el.label).to.equal('Email address');
});
it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(`
<${tagString} help-text="This element will be disconnected/reconnected">${inputSlot}</${tagString}>
`));
it('only takes label of direct child', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<${tag} label="Email address">
${inputSlot}
</${tag}>
</${tag}>`));
expect(el.label).to.equal('');
});
const wrapper = /** @type {LitElement} */ (await fixture(`<div></div>`));
el.parentElement?.appendChild(wrapper);
wrapper.appendChild(el);
await wrapper.updateComplete;
it('can have a help-text', async () => {
const elAttr = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
`));
expect(elAttr.helpText).to.equal('We will not send you any spam', 'as an attribute');
['aria-describedby', 'aria-labelledby'].forEach(ariaAttributeName => {
const ariaAttribute = Array.from(el.children)
.find(child => child.slot === 'input')
?.getAttribute(ariaAttributeName)
?.trim()
.split(' ');
const hasDuplicate = !!ariaAttribute?.find((elm, i) => ariaAttribute.indexOf(elm) !== i);
expect(hasDuplicate).to.be.false;
const elProp = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}
.helpText=${'We will not send you any spam'}
>${inputSlot}
</${tag}>`));
expect(elProp.helpText).to.equal('We will not send you any spam', 'as a property');
const elElem = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<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');
});
it('can have a help-text that supports inner html', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<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 = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<${tag} help-text="We will not send you any spam">
${inputSlot}
</${tag}>
</${tag}>`));
expect(el.helpText).to.equal('');
});
});
// FIXME: Broken test
it.skip('internally sorts aria-describedby and aria-labelledby ids', async () => {
const wrapper = await fixture(html`
<div id="wrapper">
<div id="additionalLabelA">should go after input internals</div>
<div id="additionalDescriptionA">should go after input internals</div>
describe('Accessibility', () => {
it('does not duplicate aria-describedby and aria-labelledby ids on reconnect', async () => {
const wrapper = /** @type {HTMLElement} */ (await fixture(html`
<div id="wrapper">
<${tag} help-text="This element will be disconnected/reconnected">${inputSlot}</${tag}>
</div>
`));
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
const labelIdsBefore = /** @type {string} */ (el._inputNode.getAttribute('aria-labelledby'));
const descriptionIdsBefore = /** @type {string} */ (el._inputNode.getAttribute(
'aria-describedby',
));
// Reconnect
wrapper.removeChild(el);
wrapper.appendChild(el);
const labelIdsAfter = /** @type {string} */ (el._inputNode.getAttribute('aria-labelledby'));
const descriptionIdsAfter = /** @type {string} */ (el._inputNode.getAttribute(
'aria-describedby',
));
expect(labelIdsBefore).to.equal(labelIdsAfter);
expect(descriptionIdsBefore).to.equal(descriptionIdsAfter);
});
it('adds aria-live="polite" to the feedback slot', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
<input slot="input" />
<label slot="label">Added to label by default</label>
<div slot="feedback">Added to description by default</div>
${inputSlot}
<div slot="feedback">Added to see attributes</div>
</${tag}>
<div id="additionalLabelB">should go after input internals</div>
<div id="additionalDescriptionB">should go after input internals</div>
</div>`);
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
const { _inputNode } = el;
`));
// 1. addToAriaLabelledBy()
// external inputs should go in order defined by user
const labelA = /** @type {HTMLElement} */ (wrapper.querySelector('#additionalLabelA'));
const labelB = /** @type {HTMLElement} */ (wrapper.querySelector('#additionalLabelB'));
el.addToAriaLabelledBy(labelA);
el.addToAriaLabelledBy(labelB);
expect(
Array.from(el.children)
.find(child => child.slot === 'feedback')
?.getAttribute('aria-live'),
).to.equal('polite');
});
const ariaLabelId = /** @type {number} */ (_inputNode
.getAttribute('aria-labelledby')
?.indexOf(`label-${el._inputId}`));
it('clicking the label should call `_onLabelClick`', async () => {
const spy = sinon.spy();
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} ._onLabelClick="${spy}">
${inputSlot}
</${tag}>
`));
expect(spy).to.not.have.been.called;
el._labelNode.click();
expect(spy).to.have.been.calledOnce;
});
const ariaLabelA = /** @type {number} */ (_inputNode
.getAttribute('aria-labelledby')
?.indexOf('additionalLabelA'));
describe('Adding extra labels and descriptions', () => {
it(`supports centrally orchestrated labels/descriptions via addToAriaLabelledBy() /
removeFromAriaLabelledBy() / addToAriaDescribedBy() / removeFromAriaDescribedBy()`, async () => {
const wrapper = /** @type {HTMLElement} */ (await fixture(html`
<div id="wrapper">
<${tag}>
${inputSlot}
<label slot="label">Added to label by default</label>
<div slot="feedback">Added to description by default</div>
</${tag}>
<div id="additionalLabel"> This also needs to be read whenever the input has focus</div>
<div id="additionalDescription"> Same for this </div>
</div>`));
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
// wait until the field element is done rendering
await el.updateComplete;
await el.updateComplete;
const ariaLabelB = /** @type {number} */ (_inputNode
.getAttribute('aria-labelledby')
?.indexOf('additionalLabelB'));
// 1a. addToAriaLabelledBy()
// Check if the aria attr is filled initially
expect(/** @type {string} */ (el._inputNode.getAttribute('aria-labelledby'))).to.contain(
`label-${el._inputId}`,
);
const additionalLabel = /** @type {HTMLElement} */ (wrapper.querySelector(
'#additionalLabel',
));
el.addToAriaLabelledBy(additionalLabel);
await el.updateComplete;
let labelledbyAttr = /** @type {string} */ (el._inputNode.getAttribute('aria-labelledby'));
// Now check if ids are added to the end (not overridden)
expect(labelledbyAttr).to.contain(`additionalLabel`);
// Should be placed in the end
expect(
labelledbyAttr.indexOf(`label-${el._inputId}`) <
labelledbyAttr.indexOf('additionalLabel'),
);
expect(ariaLabelId < ariaLabelB && ariaLabelB < ariaLabelA).to.be.true;
// 1b. removeFromAriaLabelledBy()
el.removeFromAriaLabelledBy(additionalLabel);
await el.updateComplete;
labelledbyAttr = /** @type {string} */ (el._inputNode.getAttribute('aria-labelledby'));
// Now check if ids are added to the end (not overridden)
expect(labelledbyAttr).to.not.contain(`additionalLabel`);
// 2. addToAriaDescribedBy()
// Check if the aria attr is filled initially
const descA = /** @type {HTMLElement} */ (wrapper.querySelector('#additionalDescriptionA'));
const descB = /** @type {HTMLElement} */ (wrapper.querySelector('#additionalDescriptionB'));
el.addToAriaDescribedBy(descB);
el.addToAriaDescribedBy(descA);
// 2a. addToAriaDescribedBy()
// Check if the aria attr is filled initially
expect(/** @type {string} */ (el._inputNode.getAttribute('aria-describedby'))).to.contain(
`feedback-${el._inputId}`,
);
});
const ariaDescId = /** @type {number} */ (_inputNode
.getAttribute('aria-describedby')
?.indexOf(`feedback-${el._inputId}`));
it('sorts internal elements, and allows opt-out', async () => {
const wrapper = await fixture(html`
<div id="wrapper">
<${tag}>
<input slot="input" id="myInput" />
<label slot="label" id="internalLabel">Added to label by default</label>
<div slot="help-text" id="internalDescription">
Added to description by default
</div>
</${tag}>
<div id="externalLabelB">should go after input internals</div>
<div id="externalDescriptionB">should go after input internals</div>
</div>`);
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
const ariaDescA = /** @type {number} */ (_inputNode
.getAttribute('aria-describedby')
?.indexOf('additionalDescriptionA'));
// N.B. in real life we would never add the input to aria-describedby or -labelledby,
// but this example purely demonstrates dom order is respected.
// A real life scenario would be for instance when
// a Field or FormGroup would be extended and an extra slot would be added in the template
const myInput = /** @type {HTMLElement} */ (wrapper.querySelector('#myInput'));
el.addToAriaLabelledBy(myInput);
await el.updateComplete;
el.addToAriaDescribedBy(myInput);
await el.updateComplete;
const ariaDescB = /** @type {number} */ (_inputNode
.getAttribute('aria-describedby')
?.indexOf('additionalDescriptionB'));
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-labelledby')).split(' '),
).to.eql(['myInput', 'internalLabel']);
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-describedby')).split(' '),
).to.eql(['myInput', 'internalDescription']);
// Should be placed in the end
expect(ariaDescId < ariaDescB && ariaDescB < ariaDescA).to.be.true;
});
// cleanup
el.removeFromAriaLabelledBy(myInput);
await el.updateComplete;
el.removeFromAriaDescribedBy(myInput);
await el.updateComplete;
it('adds aria-live="polite" to the feedback slot', async () => {
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag}>
${inputSlot}
<div slot="feedback">Added to see attributes</div>
</${tag}>
`));
// opt-out of reorder
el.addToAriaLabelledBy(myInput, { reorder: false });
await el.updateComplete;
el.addToAriaDescribedBy(myInput, { reorder: false });
await el.updateComplete;
expect(
Array.from(el.children)
.find(child => child.slot === 'feedback')
?.getAttribute('aria-live'),
).to.equal('polite');
});
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-labelledby')).split(' '),
).to.eql(['internalLabel', 'myInput']);
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-describedby')).split(' '),
).to.eql(['internalDescription', 'myInput']);
});
it('clicking the label should call `_onLabelClick`', async () => {
const spy = sinon.spy();
const el = /** @type {FormControlMixinClass} */ (await fixture(html`
<${tag} ._onLabelClick="${spy}">
${inputSlot}
</${tag}>
`));
expect(spy).to.not.have.been.called;
el._labelNode.click();
expect(spy).to.have.been.calledOnce;
it('respects provided order for external elements', async () => {
const wrapper = await fixture(html`
<div id="wrapper">
<div id="externalLabelA">should go after input internals</div>
<div id="externalDescriptionA">should go after input internals</div>
<${tag}>
<input slot="input" />
<label slot="label" id="internalLabel">Added to label by default</label>
<div slot="help-text" id="internalDescription">Added to description by default</div>
</${tag}>
<div id="externalLabelB">should go after input internals</div>
<div id="externalDescriptionB">should go after input internals</div>
</div>`);
const el = /** @type {FormControlMixinClass} */ (wrapper.querySelector(tagString));
// 1. addToAriaLabelledBy()
const labelA = /** @type {HTMLElement} */ (wrapper.querySelector('#externalLabelA'));
const labelB = /** @type {HTMLElement} */ (wrapper.querySelector('#externalLabelB'));
// external inputs should go in order defined by user
el.addToAriaLabelledBy(labelA);
el.addToAriaLabelledBy(labelB);
await el.updateComplete;
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-labelledby')).split(' '),
).to.eql(['internalLabel', 'externalLabelA', 'externalLabelB']);
// 2. addToAriaDescribedBy()
const descrA = /** @type {HTMLElement} */ (wrapper.querySelector('#externalDescriptionA'));
const descrB = /** @type {HTMLElement} */ (wrapper.querySelector('#externalDescriptionB'));
el.addToAriaDescribedBy(descrA);
el.addToAriaDescribedBy(descrB);
await el.updateComplete;
expect(
/** @type {string} */ (el._inputNode.getAttribute('aria-describedby')).split(' '),
).to.eql(['internalDescription', 'externalDescriptionA', 'externalDescriptionB']);
});
});
});
describe('Model-value-changed event propagation', () => {

53
packages/form-core/test/lion-field.test.js
View file

@ -193,59 +193,6 @@ describe('<lion-field>', () => {
`prefix-${el._inputId} suffix-${el._inputId}`,
);
});
// TODO: Move test below to FormControlMixin.test.js.
it(`allows to add to aria description or label via addToAriaLabelledBy() and
addToAriaDescribedBy()`, async () => {
const wrapper = /** @type {HTMLElement} */ (await fixture(html`
<div id="wrapper">
<${tag}>
${inputSlot}
<label slot="label">Added to label by default</label>
<div slot="feedback">Added to description by default</div>
</${tag}>
<div id="additionalLabel"> This also needs to be read whenever the input has focus</div>
<div id="additionalDescription"> Same for this </div>
</div>`));
const el = /** @type {LionField} */ (wrapper.querySelector(tagString));
// wait until the field element is done rendering
await el.updateComplete;
await el.updateComplete;
const { _inputNode } = el;
// 1. addToAriaLabel()
// Check if the aria attr is filled initially
expect(_inputNode.getAttribute('aria-labelledby')).to.contain(`label-${el._inputId}`);
const additionalLabel = /** @type {HTMLElement} */ (wrapper.querySelector(
'#additionalLabel',
));
el.addToAriaLabelledBy(additionalLabel);
const labelledbyAttr = /** @type {string} */ (_inputNode.getAttribute('aria-labelledby'));
// Now check if ids are added to the end (not overridden)
expect(labelledbyAttr).to.contain(`label-${el._inputId}`);
// Should be placed in the end
expect(
labelledbyAttr.indexOf(`label-${el._inputId}`) < labelledbyAttr.indexOf('additionalLabel'),
);
// 2. addToAriaDescription()
// Check if the aria attr is filled initially
expect(_inputNode.getAttribute('aria-describedby')).to.contain(`feedback-${el._inputId}`);
const additionalDescription = /** @type {HTMLElement} */ (wrapper.querySelector(
'#additionalDescription',
));
el.addToAriaDescribedBy(additionalDescription);
const describedbyAttr = /** @type {string} */ (_inputNode.getAttribute('aria-describedby'));
// Now check if ids are added to the end (not overridden)
expect(describedbyAttr).to.contain(`feedback-${el._inputId}`);
// Should be placed in the end
expect(
describedbyAttr.indexOf(`feedback-${el._inputId}`) <
describedbyAttr.indexOf('additionalDescription'),
);
});
});
describe(`Validation`, () => {

14
packages/form-core/types/FormControlMixinTypes.d.ts vendored
View file

@ -163,12 +163,26 @@ export declare class FormControlHost {
reorder?: boolean | undefined;
},
): void;
public removeFromAriaLabelledBy(
element: HTMLElement,
customConfig?: {
reorder?: boolean | undefined;
},
): void;
public removeFromAriaDescribedBy(
element: HTMLElement,
customConfig?: {
reorder?: boolean | undefined;
},
): void;
__reorderAriaDescribedNodes: boolean | undefined;
__getDirectSlotChild(slotName: string): HTMLElement;
__dispatchInitialModelValueChangedEvent(): void;
__repropagateChildrenInitialized: boolean | undefined;
protected _onBeforeRepropagateChildrenValues(ev: CustomEvent): void;
__repropagateChildrenValues(ev: CustomEvent): void;
_parentFormGroup: FormControlHost;
_repropagationCondition(target: FormControlHost): boolean;
}
export declare function FormControlImplementation<T extends Constructor<LitElement>>(

1
packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts vendored
View file

@ -49,6 +49,7 @@ export declare class ChoiceGroupHost {
__delegateNameAttribute(child: FormControlHost): void;
protected _onBeforeRepropagateChildrenValues(ev: Event): void;
__oldModelValue: any;
}
export declare function ChoiceGroupImplementation<T extends Constructor<LitElement>>(

1
packages/form-core/types/form-group/FormGroupMixinTypes.d.ts vendored
View file

@ -23,6 +23,7 @@ export declare class FormGroupHost {
_setValueForAllFormElements(property: string, value: any): void;
resetInteractionState(): void;
clearGroup(): void;
__descriptionElementsInParentChain: Set<HTMLElement>;
}
export declare function FormGroupImplementation<T extends Constructor<LitElement>>(