fix: (ui5-li): add accessible name to single select radio button (#3842)

Author: dobrinyonkov

packages/main/src/ListItem.hbs

@@ -62,6 +62,7 @@
 	{{#if modeSingleSelect}}
 		<ui5-radiobutton
 				?disabled="{{isInactive}}"
+				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"

packages/main/src/ListItem.js

@@ -8,7 +8,7 @@ import ListItemBase from "./ListItemBase.js";
 import RadioButton from "./RadioButton.js";
 import CheckBox from "./CheckBox.js";
 import Button from "./Button.js";
-import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX } from "./generated/i18n/i18n-defaults.js";
+import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX, ARIA_LABEL_LIST_ITEM_RADIO_BUTTON } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -322,6 +322,7 @@ class ListItem extends ListItemBase {
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			listItemAriaLabel: undefined,
 		};
 	}

packages/main/src/RadioButton.hbs

@@ -3,7 +3,7 @@
 	aria-checked="{{selected}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{ariaLabelledBy}}"
+	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
 	dir="{{effectiveDir}}"

packages/main/src/RadioButton.js

@@ -162,6 +162,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the text alternative of the component.
+		 * If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
@@ -383,8 +396,8 @@ class RadioButton extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+	get ariaLabelText() {
+		return [this.text, this.accessibleName].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {

packages/main/src/i18n/messagebundle.properties

@@ -97,6 +97,9 @@ LIST_ITEM_SELECTED=Selected
 #XBUT: List Multi Selection Mode Checkbox aria-label text
 ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.
 
+#XBUT: List Single Selection Mode RadioButton aria-label text
+ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Item Selection.
+
 #XTOL: Tooltip of messgae strip close button
 MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close
 

packages/main/test/pages/RadioButton.html

@@ -91,6 +91,11 @@
 		<ui5-input id="field"></ui5-input>
 	</section>
 
+	<section>
+		<ui5-radio-button id="rb-acc-name" accessible-name="Sample Label"></ui5-radio-button>
+		<ui5-radio-button id="rb-acc-name-text" text="Sample Text" accessible-name="Sample Label"></ui5-radio-button>
+	</section>
+
 	<p>*Params</p>
 	<p>
 		<ui5-label>- for compact add 'ui5-content-density-compact' class to any dom element</ui5-label>

packages/main/test/specs/RadioButton.spec.js

@@ -153,4 +153,14 @@ describe("RadioButton general interaction", () => {
 		assert.strictEqual(truncatingRbHeight, RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is : " + truncatingRbHeight);
 		assert.ok(wrappingRbHeight > RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is more than: " + RADIOBUTTON_DEFAULT_HEIGHT);
 	});
+
+	it("tests accessibleName", () => {
+		const rbAccName = browser.$("#rb-acc-name");
+		const rbAccNameText = browser.$("#rb-acc-name-text");
+		const RADIOBUTTON_LABEL = "Sample Label";
+		const RADIOBUTTON_TEXT = "Sample Text";
+
+		assert.strictEqual(rbAccName.getProperty("ariaLabelText"), RADIOBUTTON_LABEL, "The ariaLabelledByText includes the accessibleName.");
+		assert.strictEqual(rbAccNameText.getProperty("ariaLabelText"), `${RADIOBUTTON_TEXT} ${RADIOBUTTON_LABEL}`, "The ariaLabelledByText includes both the text and the accessibleName.");
+	});
 });