fix(ui5-option): correct tooltip property forwarding

dobrinyonkov · Jul 1, 2024 · ee68629 · ee68629
1 parent 4d685f3
commit ee68629
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/packages/main/src/ListItemBase.hbs b/packages/main/src/ListItemBase.hbs
@@ -8,6 +8,7 @@
 	@keydown="{{_onkeydown}}"
 	draggable="{{movable}}"
 	@click="{{_onclick}}"
+	{{> listItemAttributes}}
 >
 	{{> listItemContent}}
 </li>
@@ -18,4 +19,7 @@
 			<span part="title" class="ui5-li-title"><slot></slot></span>
 		</div>
 	</div>
-{{/inline}}
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+{{/inline}}
diff --git a/packages/main/src/Option.hbs b/packages/main/src/Option.hbs
@@ -12,4 +12,8 @@
 			{{/if}}
 		</div>
 	</div>
-{{/inline}}
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	title="{{tooltip}}"
+{{/inline}}
diff --git a/packages/main/src/OptionCustom.hbs b/packages/main/src/OptionCustom.hbs
@@ -3,3 +3,7 @@
 {{#*inline "listItemContent"}}
 	<slot></slot>
 {{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	title="{{tooltip}}"
+{{/inline}}
diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html
@@ -234,6 +234,15 @@ <h2>popover max-height changed with 'popover' part (120px)</h2>
 			<ui5-option selected>Condensed</ui5-option>
 		</ui5-select>
 	</section>
+
+	<section>
+		<h2>Option with tooltip</h2>
+		<ui5-select>
+			<ui5-option id="selectOptionWithTooltip" tooltip="Tooltip">Long text for that will be truncated on small screens and it needs a tooltip</ui5-option>
+			<ui5-option>Compact</ui5-option>
+			<ui5-option selected>Condensed</ui5-option>
+		</ui5-select>
+	</section>
 </body>
 <script>
 	var countries =  [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];

diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js
@@ -539,6 +539,13 @@ describe("Select general interaction", () => {
 			"The aria-roledescription is correct.");
 	});
 
+	it("Tests options accessibility", async () => {
+		const optionWithTooltip = await browser.$("#selectOptionWithTooltip").shadow$("li.ui5-li-root");
+		const EXPECTED_TOOLTIP = "Tooltip"; 
+		assert.strictEqual(await optionWithTooltip.getAttribute("title"), EXPECTED_TOOLTIP,
+			"The tooltip is correctly set in the shadow root.");
+	});
+
 	it("Tests value state type", async () => {
 		const successSelect = await browser.$("#successSelect");
 		const successSelectValueState = successSelect.shadow$(`#${await successSelect.getProperty('_id')}-valueStateDesc`);
@@ -608,4 +615,6 @@ describe("Select general interaction", () => {
 		const selectedOption = await browser.$("#warningSelect ui5-option[selected]");
 		assert.ok(await selectedOption.isClickable(), "Selected option is visible in the viewport.");
 	});
+
+	it()
 });