fix(ui5-rating-indicator): Aria-readonly attribute is added when RatingIndicator in not editable (#3219)

Author: niyap

packages/main/src/RatingIndicator.hbs

@@ -6,7 +6,7 @@
 	aria-valuemax="{{maxValue}}"
 	aria-orientation="horizontal"
 	aria-disabled="{{_ariaDisabled}}"
-	?aria-readonly="{{readOnly}}"
+	aria-readonly="{{ariaReadonly}}"
 	tabindex="{{tabIndex}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"

packages/main/src/RatingIndicator.js

@@ -294,6 +294,10 @@ class RatingIndicator extends UI5Element {
 	get _ariaDisabled() {
 		return this.disabled || undefined;
 	}
+
+	get ariaReadonly() {
+		return this.readonly ? "true" : undefined;
+	}
 }
 
 RatingIndicator.define();

packages/main/test/pages/RatingIndicator.html

@@ -47,7 +47,7 @@ <h3>test change event</h3>
 	<br>
 
 	<h3>readonly</h3>
-	<ui5-rating-indicator value="1" max-value="3" readonly></ui5-rating-indicator>
+	<ui5-rating-indicator id="rating-indicator-readonly" value="1" max-value="3" readonly></ui5-rating-indicator>
 	<br>
 	<br>
 	<br>

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

@@ -66,6 +66,8 @@ describe("Rating Indicator general interaction", () => {
 
 	it("Tests ACC attrs", () => {
 		const ratingIndicator = browser.$("#rating-indicator1").shadow$(".ui5-rating-indicator-root");
+		const ratingIndicatorReadOnly = browser.$("#rating-indicator-readonly").shadow$(".ui5-rating-indicator-root");
+
 		const TOOLTIP = "Rating";
 		const ARIA_LABEL = "Hello World";
 
@@ -74,5 +76,8 @@ describe("Rating Indicator general interaction", () => {
 
 		assert.strictEqual(ratingIndicator.getAttribute("title"), TOOLTIP,
 			"The default tooltip is displayed");
+
+		assert.notOk(ratingIndicator.getAttribute("aria-readonly"), "The aria-readonly attribute is not presented");
+		assert.strictEqual(ratingIndicatorReadOnly.getAttribute("aria-readonly"), 'true', "The aria-readonly attribute is presented");
 	});
 });