fix(ui5-radio-button): exploratory testing issues (#3740)

Author: kskondov

packages/main/src/themes/RadioButton.css

@@ -10,6 +10,7 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	color: var(--sapField_BorderColor);
+	cursor: pointer;
 }
 
 /* Checked */
@@ -98,7 +99,7 @@
 .ui5-radio-root {
 	height: var(--_ui5_radio_button_height);
 	position: relative;
-	display: flex;
+	display: inline-flex;
 	flex-wrap: nowrap;
 	outline: none;
 	max-width: 100%;

packages/main/test/samples/RadioButton.sample.html

@@ -14,13 +14,15 @@ <h3>Basic RadioButton Types</h3>
 		<ui5-radio-button text="Option C" value-state="Warning" name="GroupA"></ui5-radio-button>
 		<ui5-radio-button text="Option D" value-state="Error" name="GroupA"></ui5-radio-button>
 		<ui5-radio-button text="Option E" disabled name="GroupA"></ui5-radio-button>
+		<ui5-radio-button text="Option F" readonly name="GroupA"></ui5-radio-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-radio-button text="Option A" checked name="GroupA"></ui5-radio-button>
 <ui5-radio-button text="Option B" value-state="None" name="GroupA"></ui5-radio-button>
 <ui5-radio-button text="Option C" value-state="Warning" name="GroupA"></ui5-radio-button>
 <ui5-radio-button text="Option D" value-state="Error" name="GroupA"></ui5-radio-button>
 <ui5-radio-button text="Option E" disabled name="GroupA"></ui5-radio-button>
+<ui5-radio-button text="Option F" readonly name="GroupA"></ui5-radio-button>
 	</xmp></pre>
 </section>
 

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

@@ -7,7 +7,7 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests change event", () => {
-		const radioButton = browser.$("#rb1");
+		const radioButton = browser.$("#rb1").shadow$(".ui5-radio-root");
 		const field = browser.$("#field");
 
 		radioButton.click();
@@ -18,8 +18,8 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests change event upon ENTER", () => {
-		const radioButton1 = browser.$("#rb1");
-		const radioButton2 = browser.$("#rb2");
+		const radioButton1 = browser.$("#rb1").shadow$(".ui5-radio-root");
+		const radioButton2 = browser.$("#rb2").shadow$(".ui5-radio-root");;
 		const field = browser.$("#field");
 
 		radioButton1.click();
@@ -33,8 +33,8 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests change event upon SPACE", () => {
-		const radioButton1 = browser.$("#rb2");
-		const radioButton2 = browser.$("#rb3");
+		const radioButton1 = browser.$("#rb2").shadow$(".ui5-radio-root");;
+		const radioButton2 = browser.$("#rb3").shadow$(".ui5-radio-root");;
 		const field = browser.$("#field");
 
 		radioButton1.click();
@@ -48,7 +48,7 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests change event not fired, when disabled", () => {
-		const radioButton = browser.$("#rb4");
+		const radioButton = browser.$("#rb4").shadow$(".ui5-radio-root");;
 		const field = browser.$("#field");
 
 		radioButton.click();
@@ -132,11 +132,12 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests change event from radio buttons within group", () => {
+		const radioButtonToBeSelectedShadow = browser.$("#groupRb7").shadow$(".ui5-radio-root");
 		const radioButtonToBeSelected = browser.$("#groupRb7");
 		const lblEventCounter = browser.$("#lblEventCounter");
 		const lblSelectedRadio = browser.$("#lblRadioGroup");
 
-		radioButtonToBeSelected.click();
+		radioButtonToBeSelectedShadow.click();
 
 		assert.equal(lblEventCounter.getHTML(false), "1", 'The change event is fired once');
 		assert.equal(lblSelectedRadio.getHTML(false), radioButtonToBeSelected.getProperty("text"), "The correct radio is selected");