feat(ui5-checkbox): implement ariaLabelledby property (#2272)

Author: fifoosid

packages/main/src/CheckBox.hbs

@@ -4,7 +4,7 @@
 	aria-checked="{{checked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabel}}"
+	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
@@ -18,7 +18,15 @@
 				<ui5-icon name="accept" class="ui5-checkbox-icon"></ui5-icon>
 			{{/if}}
 
-			<input id="{{_id}}-CB" type='checkbox' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" data-sap-no-tab-ref/>
+			<input
+				id="{{_id}}-CB"
+				type='checkbox'
+				?checked="{{checked}}"
+				?readonly="{{readonly}}"
+				?disabled="{{disabled}}"
+				role="none"
+				data-sap-no-tab-ref
+			/>
 		</div>
 
 		{{#if _label.text}}

packages/main/src/CheckBox.js

@@ -2,6 +2,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -136,6 +137,18 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Receives id(or many ids) of the elements that label the checkbox
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.9
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_label: {
 			type: Object,
 		},
@@ -297,8 +310,16 @@ class CheckBox extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+		if (!this.ariaLabelText) {
+			return this.text ? `${this._id}-label` : undefined;
+		}
+
+		return undefined;
 	}
 
 	get ariaDescribedBy() {