fix: ensure slotted label ID is set properly (#3447) (#3458)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Feb 16, 2022 · 1570b57 · 1570b57
1 parent 50901fd
commit 1570b57
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/field-base/src/label-controller.js b/packages/field-base/src/label-controller.js
@@ -41,6 +41,8 @@ export class LabelController extends SlotController {
    * @override
    */
   initCustomNode(labelNode) {
+    this.__updateLabelId(labelNode);
+
     const hasLabel = this.__hasLabel(labelNode);
     this.__toggleHasLabel(hasLabel);
   }

diff --git a/packages/field-base/test/field-mixin.test.js b/packages/field-base/test/field-mixin.test.js
@@ -675,6 +675,26 @@ describe('field-mixin', () => {
         });
       });
     });
+
+    describe('slotted label', () => {
+      beforeEach(async () => {
+        element = fixtureSync(`
+          <field-mixin-element>
+            <label slot="label">Label</label>
+            <input slot="input">
+          </field-mixin-element>
+        `);
+        input = element.querySelector('[slot=input]');
+        label = element.querySelector('[slot=label]');
+        await nextFrame();
+      });
+
+      it('should set aria-labelledby on the custom slotted label', () => {
+        const aria = input.getAttribute('aria-labelledby');
+        expect(aria).to.be.ok;
+        expect(aria).to.equal(label.id);
+      });
+    });
   });
 
   describe('aria-required', () => {