fix(checkbox): suppress label warning when aria-label or aria-labelledby is set

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -39,7 +39,11 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
 
     firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
       super.firstUpdated(_changedProperties);
-      if (!this.label) {
+      if (
+        !this.label &&
+        !this.getAttribute('aria-label') &&
+        !this.getAttribute('aria-labelledby')
+      ) {
         console.warn(this.tagName + ' needs a `label`', this);
       }
     }

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -4,6 +4,7 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { css, html, LitElement, TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { UUIBooleanInputEvent } from './UUIBooleanInputEvent';
 
@@ -199,7 +200,12 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
           .checked=${this.checked}
           .indeterminate=${this.indeterminate}
           aria-checked="${this.checked ? 'true' : 'false'}"
-          aria-label=${this.label}
+          aria-label=${ifDefined(
+            this.label || this.getAttribute('aria-label') || undefined,
+          )}
+          aria-labelledby=${ifDefined(
+            this.getAttribute('aria-labelledby') || undefined,
+          )}
           role="${this.inputRole}" />
         ${this.renderCheckbox()} ${this.renderLabel()}
       </label>

packages/uui-checkbox/lib/uui-checkbox.test.ts

@@ -102,4 +102,54 @@ describe('UUICheckbox', () => {
     await elementUpdated(element);
     expect(window.getComputedStyle(iconCheck as Element).opacity).to.equal('1');
   });
+
+  describe('label warning', () => {
+    let originalWarn: typeof console.warn;
+    let labelWarnFired: boolean;
+
+    beforeEach(() => {
+      labelWarnFired = false;
+      originalWarn = console.warn;
+      console.warn = (...args: unknown[]) => {
+        if (
+          typeof args[0] === 'string' &&
+          args[0].includes('needs a `label`')
+        ) {
+          labelWarnFired = true;
+        }
+      };
+    });
+
+    afterEach(() => {
+      console.warn = originalWarn;
+    });
+
+    it('warns when no label or aria attributes are set', async () => {
+      await fixture(html`<uui-checkbox></uui-checkbox>`);
+      expect(labelWarnFired).to.be.true;
+    });
+
+    it('does not warn when label is set', async () => {
+      await fixture(html`<uui-checkbox label="test"></uui-checkbox>`);
+      expect(labelWarnFired).to.be.false;
+    });
+
+    it('does not warn when aria-label is set', async () => {
+      const el = await fixture<UUICheckboxElement>(
+        html`<uui-checkbox aria-label="Select item"></uui-checkbox>`,
+      );
+      const input = el.shadowRoot!.querySelector('#input') as HTMLInputElement;
+      expect(labelWarnFired).to.be.false;
+      expect(input.getAttribute('aria-label')).to.equal('Select item');
+    });
+
+    it('does not warn when aria-labelledby is set', async () => {
+      const el = await fixture<UUICheckboxElement>(
+        html`<uui-checkbox aria-labelledby="some-label-id"></uui-checkbox>`,
+      );
+      const input = el.shadowRoot!.querySelector('#input') as HTMLInputElement;
+      expect(labelWarnFired).to.be.false;
+      expect(input.getAttribute('aria-labelledby')).to.equal('some-label-id');
+    });
+  });
 });