@lion/ui 0.0.1

package/components/form-core/test-suites/choice-group/ChoiceInputMixin.suite.js

@@ -0,0 +1,357 @@
+import { Required, ChoiceInputMixin } from '@lion/ui/form-core.js';
+import { LionInput } from '@lion/ui/input.js';
+import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+
+import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import sinon from 'sinon';
+
+class ChoiceInput extends ChoiceInputMixin(LionInput) {
+  constructor() {
+    super();
+    this.type = 'checkbox';
+  }
+}
+customElements.define('choice-group-input', ChoiceInput);
+
+/**
+ * @param {{ tagString?:string, tagType?: string}} config
+ * @deprecated
+ */
+export function runChoiceInputMixinSuite({ tagString } = {}) {
+  const cfg = {
+    tagString: tagString || 'choice-group-input',
+  };
+
+  const tag = unsafeStatic(cfg.tagString);
+  describe(`ChoiceInputMixin: ${tagString}`, () => {
+    it('is hidden when attribute hidden is true', async () => {
+      const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag} hidden></${tag}>`));
+      expect(el).not.to.be.displayed;
+    });
+
+    it('has choiceValue', async () => {
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
+      );
+
+      expect(el.choiceValue).to.equal('foo');
+      expect(el.modelValue).to.deep.equal({
+        value: 'foo',
+        checked: false,
+      });
+    });
+
+    it('can handle complex data via choiceValue', async () => {
+      const date = new Date(2018, 11, 24, 10, 33, 30, 0);
+
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`<${tag} .choiceValue=${date}></${tag}>`)
+      );
+
+      expect(el.choiceValue).to.equal(date);
+      expect(el.modelValue.value).to.equal(date);
+    });
+
+    it('fires one "model-value-changed" event if choiceValue or checked state or modelValue changed', async () => {
+      let counter = 0;
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`
+      <${tag}
+        @model-value-changed=${() => {
+          counter += 1;
+        }}
+        .choiceValue=${'foo'}
+      ></${tag}>
+    `)
+      );
+      expect(counter).to.equal(1); // undefined to set value
+
+      el.checked = true;
+      expect(counter).to.equal(2);
+
+      // no change means no event
+      el.checked = true;
+      el.choiceValue = 'foo';
+      el.modelValue = { value: 'foo', checked: true };
+      expect(counter).to.equal(2);
+
+      el.modelValue = { value: 'foo', checked: false };
+      expect(counter).to.equal(3);
+    });
+
+    it('fires one "user-input-changed" event after user interaction', async () => {
+      let counter = 0;
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`
+      <${tag}
+        @user-input-changed="${() => {
+          counter += 1;
+        }}"
+      >
+        <input slot="input" />
+      </${tag}>
+    `)
+      );
+      const { _inputNode } = getFormControlMembers(el);
+
+      expect(counter).to.equal(0);
+      // Here we try to mimic user interaction by firing browser events
+      const nativeInput = _inputNode;
+      nativeInput.dispatchEvent(new CustomEvent('input', { bubbles: true })); // fired by (at least) Chrome
+      expect(counter).to.equal(0);
+      nativeInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      expect(counter).to.equal(1);
+    });
+
+    it('fires one "click" event when clicking label or input, using the right target', async () => {
+      const spy = sinon.spy();
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`
+        <${tag}
+          @click="${spy}"
+        >
+          <input slot="input" />
+        </${tag}>
+      `)
+      );
+      const { _inputNode, _labelNode } = getFormControlMembers(el);
+
+      el.click();
+      expect(spy.args[0][0].target).to.equal(el);
+      expect(spy.callCount).to.equal(1);
+      _labelNode.click();
+      expect(spy.args[1][0].target).to.equal(_labelNode);
+      expect(spy.callCount).to.equal(2);
+      _inputNode.click();
+      expect(spy.args[2][0].target).to.equal(_inputNode);
+      expect(spy.callCount).to.equal(3);
+    });
+
+    it('adds "isTriggerByUser" flag on model-value-changed', async () => {
+      let isTriggeredByUser;
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`
+      <${tag}
+        @model-value-changed="${(/** @type {CustomEvent} */ event) => {
+          isTriggeredByUser = event.detail.isTriggeredByUser;
+        }}"
+      >
+        <input slot="input" />
+      </${tag}>
+    `)
+      );
+      const { _inputNode } = getFormControlMembers(el);
+
+      _inputNode.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      expect(isTriggeredByUser).to.be.true;
+    });
+
+    it('can be required', async () => {
+      const el = /** @type {ChoiceInput} */ (
+        await fixture(html`
+      <${tag} .choiceValue=${'foo'} .validators=${[new Required()]}></${tag}>
+    `)
+      );
+
+      expect(el.hasFeedbackFor).to.include('error');
+      expect(el.validationStates.error).to.exist;
+      expect(el.validationStates.error.Required).to.exist;
+      el.checked = true;
+      expect(el.hasFeedbackFor).not.to.include('error');
+      expect(el.validationStates.error).to.exist;
+      expect(el.validationStates.error.Required).not.to.exist;
+    });
+
+    describe('Checked state synchronization', () => {
+      it('synchronizes checked state initially (via attribute or property)', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        expect(el.checked).to.equal(false, 'initially unchecked');
+
+        const precheckedElementAttr = /** @type {ChoiceInput} */ (
+          await fixture(html`
+        <${tag} .checked=${true}></${tag}>
+      `)
+        );
+        expect(precheckedElementAttr.checked).to.equal(true, 'initially checked via attribute');
+      });
+
+      it('can be checked and unchecked programmatically', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const { _inputNode } = getFormControlMembers(el);
+
+        expect(el.checked).to.be.false;
+        el.checked = true;
+        expect(el.checked).to.be.true;
+
+        await el.updateComplete;
+        expect(/** @type {HTMLInputElement} */ (_inputNode).checked).to.be.true;
+      });
+
+      it('can be checked and unchecked via user interaction', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const { _inputNode } = getFormControlMembers(el);
+
+        _inputNode.click();
+        expect(el.checked).to.be.true;
+        _inputNode.click();
+        await el.updateComplete;
+        if (el.type === 'checkbox') {
+          expect(el.checked).to.be.false;
+        }
+      });
+
+      it('can not toggle the checked state when disabled via user interaction', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag} disabled></${tag}>`));
+        const { _inputNode } = getFormControlMembers(el);
+
+        _inputNode.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        expect(el.checked).to.be.false;
+      });
+
+      it('synchronizes modelValue to checked state and vice versa', async () => {
+        const el = /** @type {ChoiceInput} */ (
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
+        );
+        expect(el.checked).to.be.false;
+        expect(el.modelValue).to.deep.equal({
+          checked: false,
+          value: 'foo',
+        });
+        el.checked = true;
+        expect(el.checked).to.be.true;
+        expect(el.modelValue).to.deep.equal({
+          checked: true,
+          value: 'foo',
+        });
+      });
+
+      it('ensures optimal synchronize performance by preventing redundant computation steps', async () => {
+        /* we are checking private apis here to make sure we do not have cyclical updates
+        which can be quite common for these type of connected data */
+        const el = /** @type {ChoiceInput} */ (
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
+        );
+        expect(el.checked).to.be.false;
+
+        // @ts-ignore [allow-private] in test
+        const spyModelCheckedToChecked = sinon.spy(el, '__syncModelCheckedToChecked');
+        // @ts-ignore [allow-private] in test
+        const spyCheckedToModel = sinon.spy(el, '__syncCheckedToModel');
+        el.checked = true;
+        expect(el.modelValue.checked).to.be.true;
+        expect(spyModelCheckedToChecked.callCount).to.equal(0);
+        expect(spyCheckedToModel.callCount).to.equal(1);
+
+        el.modelValue = { value: 'foo', checked: false };
+        expect(el.checked).to.be.false;
+        expect(spyModelCheckedToChecked.callCount).to.equal(1);
+        expect(spyCheckedToModel.callCount).to.equal(1);
+
+        // not changing values should not trigger any updates
+        el.checked = false;
+        el.modelValue = { value: 'foo', checked: false };
+        expect(spyModelCheckedToChecked.callCount).to.equal(1);
+        expect(spyCheckedToModel.callCount).to.equal(1);
+      });
+
+      it('synchronizes checked state to [checked] attribute for styling purposes', async () => {
+        /** @param {ChoiceInput} el */
+        const hasAttr = el => el.hasAttribute('checked');
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        const elChecked = /** @type {ChoiceInput} */ (
+          await fixture(html`
+        <${tag} .checked=${true}>
+          <input slot="input" />
+        </${tag}>
+      `)
+        );
+        const { _inputNode } = getFormControlMembers(el);
+        const { _inputNode: _inputNodeChecked } = getFormControlMembers(elChecked);
+
+        // Initial values
+        expect(hasAttr(el)).to.equal(false, 'initial unchecked element');
+        expect(hasAttr(elChecked)).to.equal(true, 'initial checked element');
+
+        // Via user interaction
+        _inputNode.click();
+        _inputNodeChecked.click();
+        await el.updateComplete;
+        expect(el.checked).to.be.true;
+        expect(hasAttr(el)).to.equal(true, 'user click checked');
+        if (el.type === 'checkbox') {
+          expect(hasAttr(elChecked)).to.equal(false, 'user click unchecked');
+        }
+
+        // reset
+        el.checked = false;
+        elChecked.checked = true;
+
+        // Programmatically via checked
+        el.checked = true;
+        elChecked.checked = false;
+
+        await el.updateComplete;
+        expect(hasAttr(el)).to.equal(true, 'programmatically checked');
+        expect(hasAttr(elChecked)).to.equal(false, 'programmatically unchecked');
+
+        // reset
+        el.checked = false;
+        elChecked.checked = true;
+
+        // Programmatically via modelValue
+        el.modelValue = { value: '', checked: true };
+        elChecked.modelValue = { value: '', checked: false };
+        await el.updateComplete;
+        expect(hasAttr(el)).to.equal(true, 'modelValue checked');
+        expect(hasAttr(elChecked)).to.equal(false, 'modelValue unchecked');
+      });
+    });
+
+    describe('Format/parse/serialize loop', () => {
+      it('creates a modelValue object like { checked: true, value: foo } on init', async () => {
+        const el = /** @type {ChoiceInput} */ (
+          await fixture(html`<${tag} .choiceValue=${'foo'}></${tag}>`)
+        );
+        expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
+
+        const elChecked = /** @type {ChoiceInput} */ (
+          await fixture(html`
+        <${tag} .choiceValue=${'foo'} .checked=${true}></${tag}>
+      `)
+        );
+        expect(elChecked.modelValue).deep.equal({ value: 'foo', checked: true });
+      });
+
+      it('creates a formattedValue based on modelValue.value', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        expect(el.formattedValue).to.equal('');
+
+        const elementWithValue = /** @type {ChoiceInput} */ (
+          await fixture(html`
+        <${tag} .choiceValue=${'foo'}></${tag}>
+      `)
+        );
+        expect(elementWithValue.formattedValue).to.equal('foo');
+      });
+
+      it('can clear the checked state', async () => {
+        const el = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        el.modelValue = { value: 'foo', checked: true };
+        el.clear();
+        expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
+      });
+    });
+
+    describe('Interaction states', () => {
+      it('is considered prefilled when checked and not considered prefilled when unchecked', async () => {
+        const el = /** @type {ChoiceInput} */ (
+          await fixture(html`<${tag} .checked=${true}></${tag}>`)
+        );
+        expect(el.prefilled).equal(true, 'checked element not considered prefilled');
+
+        const elUnchecked = /** @type {ChoiceInput} */ (await fixture(html`<${tag}></${tag}>`));
+        expect(elUnchecked.prefilled).equal(false, 'unchecked element not considered prefilled');
+      });
+    });
+  });
+}

package/components/form-core/test-suites/form-group/FormGroupMixin-input.suite.js

@@ -0,0 +1,327 @@
+import { LitElement } from 'lit';
+import '@lion/ui/define/lion-field.js';
+import '@lion/ui/define/lion-validation-feedback.js';
+import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
+import { LionInput } from '@lion/ui/input.js';
+import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
+import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { FormGroupMixin } from '@lion/ui/form-core.js';
+
+/**
+ * @typedef {import('@lion/ui/form-core.js').LionField} LionField
+ */
+
+/**
+ * @param {{ tagString?: string, childTagString?:string }} [cfg]
+ */
+export function runFormGroupMixinInputSuite(cfg = {}) {
+  const FormChild = class extends LionInput {
+    get slots() {
+      return {
+        ...super.slots,
+        input: () => document.createElement('input'),
+      };
+    }
+  };
+
+  const childTagString = cfg.childTagString || defineCE(FormChild);
+
+  const FormGroup = class extends FormGroupMixin(LitElement) {
+    constructor() {
+      super();
+      /** @override from FormRegistrarMixin */
+      this._isFormOrFieldset = true;
+      /**
+       * @type {'fieldset' | 'child' | 'choice-group'}
+       */
+      this._repropagationRole = 'fieldset'; // configures FormControlMixin
+    }
+  };
+
+  const tagString = cfg.tagString || defineCE(FormGroup);
+  const tag = unsafeStatic(tagString);
+  const childTag = unsafeStatic(childTagString);
+
+  beforeEach(() => {
+    localizeTearDown();
+  });
+
+  describe('FormGroupMixin with LionField', () => {
+    it('serializes undefined values as "" (nb radios/checkboxes are always serialized)', async () => {
+      const fieldset = /**  @type {FormGroup} */ (
+        await fixture(html`
+        <${tag}>
+          <${childTag} name="custom[]"></${childTag}>
+          <${childTag} name="custom[]"></${childTag}>
+        </${tag}>
+      `)
+      );
+      fieldset.formElements['custom[]'][0].modelValue = 'custom 1';
+      fieldset.formElements['custom[]'][1].modelValue = undefined;
+
+      expect(fieldset.serializedValue).to.deep.equal({
+        '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}>
+      `)
+      );
+      const { _labelNode } = getFormControlMembers(el);
+
+      /**
+       * @param {LionInput} formControl
+       */
+      function getLabels(formControl) {
+        const control = getFormControlMembers(formControl);
+
+        return /** @type {string} */ (control._inputNode.getAttribute('aria-labelledby')).split(
+          ' ',
+        );
+      }
+      const field1 = el.formElements[0];
+      const field2 = el.formElements[1];
+
+      expect(getLabels(field1)).to.eql([field1._labelNode.id, _labelNode.id]);
+      expect(getLabels(field2)).to.eql([field2._labelNode.id, _labelNode.id]);
+
+      // Test the cleanup on disconnected
+      el.removeChild(field1);
+
+      // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
+      // await field1.updateComplete;
+      // expect(getLabels(field1)).to.eql([field1._labelNode.id]);
+    });
+  });
+
+  describe('Screen reader relations (aria-describedby) for child inputs and fieldsets', () => {
+    /** @type {Function} */
+    let childAriaFixture;
+    /** @type {Function} */
+    let childAriaTest;
+
+    before(() => {
+      // Legend:
+      // - l1 means level 1 (outer) fieldset
+      // - l2 means level 2 (inner) fieldset
+      // - g means group: the help-text or feedback belongs to group
+      // - f means field(lion-input in fixture below): the help-text or feedback belongs to field
+      // - 'a' or 'b' behind 'f' indicate which field in a fieldset is meant (a: first, b: second)
+
+      childAriaFixture = async (
+        msgSlotType = 'feedback', // eslint-disable-line no-shadow
+      ) => {
+        const dom = /**  @type {FormGroup} */ (
+          await fixture(html`
+        <${tag} name="l1_g">
+          <${childTag} name="l1_fa">
+            <div slot="${msgSlotType}" id="msg_l1_fa"></div>
+            <!-- field referred by: #msg_l1_fa (local), #msg_l1_g (parent/group) -->
+          </${childTag}>
+
+          <${childTag} name="l1_fb">
+            <div slot="${msgSlotType}" id="msg_l1_fb"></div>
+            <!-- field referred by: #msg_l1_fb (local), #msg_l1_g (parent/group) -->
+          </${childTag}>
+
+          <!-- [ INNER FIELDSET ] -->
+
+          <${tag} name="l2_g">
+            <${childTag} name="l2_fa">
+              <div slot="${msgSlotType}" id="msg_l2_fa"></div>
+              <!-- field referred by: #msg_l2_fa (local), #msg_l2_g (parent/group), #msg_l1_g (grandparent/group.group) -->
+            </${childTag}>
+
+            <${childTag} name="l2_fb">
+              <div slot="${msgSlotType}" id="msg_l2_fb"></div>
+              <!-- field referred by: #msg_l2_fb (local), #msg_l2_g (parent/group), #msg_l1_g (grandparent/group.group) -->
+            </${childTag}>
+
+            <div slot="${msgSlotType}" id="msg_l2_g"></div>
+            <!-- group referred by: #msg_l2_g (local), #msg_l1_g (parent/group)  -->
+          </${tag}>
+
+          <!-- [ / INNER FIELDSET ] -->
+
+          <div slot="${msgSlotType}" id="msg_l1_g"></div>
+          <!-- group referred by: #msg_l1_g (local) -->
+        </${tag}>
+      `)
+        );
+        return dom;
+      };
+
+      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'));
+        const msg_l1_fa = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l1_fa'));
+        const msg_l1_fb = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l1_fb'));
+        const msg_l2_g = /** @type {FormGroup} */ (childAriaFixture.querySelector('#msg_l2_g'));
+        const msg_l2_fa = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l2_fa'));
+        const msg_l2_fb = /** @type {FormChild} */ (childAriaFixture.querySelector('#msg_l2_fb'));
+
+        // Field elements: all inputs pointing to message elements
+        const input_l1_fa = /** @type {HTMLInputElement} */ (
+          childAriaFixture.querySelector('input[name=l1_fa]')
+        );
+        const input_l1_fb = /** @type {HTMLInputElement} */ (
+          childAriaFixture.querySelector('input[name=l1_fb]')
+        );
+        const input_l2_fa = /** @type {HTMLInputElement} */ (
+          childAriaFixture.querySelector('input[name=l2_fa]')
+        );
+        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]'));
+          // @ts-ignore [allow-private] in test
+          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;
+          // @ts-ignore [allow-private] in test
+          expect(l2_g.__descriptionElementsInParentChain.size).to.equal(0);
+        }
+        /* eslint-enable camelcase */
+      };
+    });
+
+    it(`reads feedback message belonging to fieldset when child input is focused
+        (via aria-describedby)`, async () => {
+      await childAriaTest(await childAriaFixture('feedback'));
+    });
+
+    it(`reads help-text message belonging to fieldset when child input is focused
+        (via aria-describedby)`, async () => {
+      await childAriaTest(await childAriaFixture('help-text'));
+    });
+
+    // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
+    it.skip(`cleans up feedback message belonging to fieldset  on disconnect`, async () => {
+      const el = await childAriaFixture('feedback');
+      await childAriaTest(el, { cleanupPhase: true });
+    });
+
+    // TODO: wait for updated on disconnected to be fixed: https://github.com/lit/lit/issues/1901
+    it.skip(`cleans up help-text message belonging to fieldset on disconnect`, async () => {
+      const el = await childAriaFixture('help-text');
+      await childAriaTest(el, { cleanupPhase: true });
+    });
+  });
+}