@ui5/webcomponents 2.11.0-rc.0 → 2.11.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.11.0-rc.1...v2.11.0-rc.2) (2025-05-22)
+
+
+### Bug Fixes
+
+* **popups:** fix header styles according to the specification ([#11513](https://github.com/SAP/ui5-webcomponents/issues/11513)) ([6fbd0e2](https://github.com/SAP/ui5-webcomponents/commit/6fbd0e2341e322331745f7a9dc80992ac07fac46))
+* **ui5-avatar:** disable click on disabled interactive ([#11527](https://github.com/SAP/ui5-webcomponents/issues/11527)) ([de188c2](https://github.com/SAP/ui5-webcomponents/commit/de188c290f71f871b05292c1e2270a21b1dd19a3))
+* **ui5-color-palette:** show tooltip on focused hovered items ([#11519](https://github.com/SAP/ui5-webcomponents/issues/11519)) ([d6ee5ea](https://github.com/SAP/ui5-webcomponents/commit/d6ee5ea8848a2b7387dc30fc794fa78505d706fa))
+* **ui5-li-custom:** correct padding for ListItemCustom ([#11487](https://github.com/SAP/ui5-webcomponents/issues/11487)) ([93066c6](https://github.com/SAP/ui5-webcomponents/commit/93066c6036360c0c28262586bce138ff9ceb5bc5))
+* **ui5-list:** adjust observer to handle sticky headers ([#11526](https://github.com/SAP/ui5-webcomponents/issues/11526)) ([e46b867](https://github.com/SAP/ui5-webcomponents/commit/e46b867f77412ff2a4b57a025dda13799bc9ac16)), closes [#11242](https://github.com/SAP/ui5-webcomponents/issues/11242) [#11461](https://github.com/SAP/ui5-webcomponents/issues/11461)
+* **ui5-split-button:** fire click event when focused with shift + tab ([#11197](https://github.com/SAP/ui5-webcomponents/issues/11197)) ([aac7449](https://github.com/SAP/ui5-webcomponents/commit/aac744979ccad4829a9b6b51ac24f937dde739fb))
+
+
+
+
+
+# [2.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.11.0-rc.0...v2.11.0-rc.1) (2025-05-15)
+
+
+### Bug Fixes
+
+* **f6navigation:** delegate fast navigation to openui5 ([#11505](https://github.com/SAP/ui5-webcomponents/issues/11505)) ([b23ee41](https://github.com/SAP/ui5-webcomponents/commit/b23ee41258835e0561e175150a099e0d9669a977)), closes [#10462](https://github.com/SAP/ui5-webcomponents/issues/10462)
+* **ui5-button:** announce accessible name ([#11396](https://github.com/SAP/ui5-webcomponents/issues/11396)) ([8c30f2a](https://github.com/SAP/ui5-webcomponents/commit/8c30f2a15d6b630e9651b609a6fc84d4596b42d5)), closes [#11350](https://github.com/SAP/ui5-webcomponents/issues/11350)
+* **ui5-slider, ui5-range-slider:** correct f2 announcement ([#11476](https://github.com/SAP/ui5-webcomponents/issues/11476)) ([850fa42](https://github.com/SAP/ui5-webcomponents/commit/850fa4294b60c6b771573da1b0bd9172359f91a8))
+* **ui5-textarea:** remove symbols encoding when growing ([#11305](https://github.com/SAP/ui5-webcomponents/issues/11305)) ([642101e](https://github.com/SAP/ui5-webcomponents/commit/642101ea7ee3b96e76e8001ed89f3041bf780f3c)), closes [#9868](https://github.com/SAP/ui5-webcomponents/issues/9868)
+* **ui5-textarea:** remove z-index from focused textarea wrapper ([#11408](https://github.com/SAP/ui5-webcomponents/issues/11408)) ([606abbe](https://github.com/SAP/ui5-webcomponents/commit/606abbed8b5df22fca3a0f5b22c714dea7392d80))
+
+
+### Features
+
+* **f6navigation:** add option to bypass groups ([#11494](https://github.com/SAP/ui5-webcomponents/issues/11494)) ([7039c24](https://github.com/SAP/ui5-webcomponents/commit/7039c24d260406d8b69883fe843de1b5c3cdc819))
+* **ui5-bar:** allow role change ([#11134](https://github.com/SAP/ui5-webcomponents/issues/11134)) ([db49d09](https://github.com/SAP/ui5-webcomponents/commit/db49d099e9f3a882d0fee403bf96a022b3223484)), closes [#10990](https://github.com/SAP/ui5-webcomponents/issues/10990)
+* **ui5-color-palette-item:** add aria-pressed when being selected ([#11472](https://github.com/SAP/ui5-webcomponents/issues/11472)) ([cb1de2b](https://github.com/SAP/ui5-webcomponents/commit/cb1de2b56c40906510ac05953c6e59ab20d9cfea))
+* **ui5-list:** focus() now focuses item ([#11486](https://github.com/SAP/ui5-webcomponents/issues/11486)) ([025ec46](https://github.com/SAP/ui5-webcomponents/commit/025ec4659b5bd20bb5b008bf1b323b7cdce15679))
+* **ui5-slider/ui5-range-slider:** enable for attribute support ([#11469](https://github.com/SAP/ui5-webcomponents/issues/11469)) ([2b219f3](https://github.com/SAP/ui5-webcomponents/commit/2b219f3d001cd37e8f556e634e693f777fd47cde))
+
+
+
+
+
 # [2.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0...v2.11.0-rc.0) (2025-05-08)
 
 

package/cypress/specs/Avatar.cy.tsx

@@ -1,4 +1,6 @@
 import Avatar from "../../src/Avatar.js";
+import Tag from "../../src/Tag.js";
+import Icon from "../../src/Icon.js";
 import "@ui5/webcomponents-icons/dist/supplier.js";
 
 describe("Accessibility", () => {
@@ -30,4 +32,24 @@ describe("Accessibility", () => {
 			.find("svg")
 			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
 	});
+
+	it("doesn't fire ui5-click event, when disabled property is set", () => {
+		cy.mount(
+			<div>
+				<Avatar interactive disabled initials="JD" id="diabled-avatar" onClick={increment}>
+				<Tag slot="badge">
+					<Icon slot="icon" name="accelerated"></Icon>
+				</Tag>
+				</Avatar>
+				<input value="0" id="click-event" />
+			</div>
+		);
+
+		function increment() {
+			const input = document.getElementById("click-event") as HTMLInputElement;
+			input.value = "1";
+		}
+		cy.get("#diabled-avatar").realClick();
+		cy.get("#click-event").should("have.value", "0");
+	});
 });

package/cypress/specs/Button.cy.tsx

@@ -6,7 +6,7 @@ import download from "@ui5/webcomponents-icons/dist/download.js";
 import employee from "@ui5/webcomponents-icons/dist/employee.js";
 
 import {
-	BUTTON_ARIA_TYPE_REJECT,
+	BUTTON_ARIA_TYPE_EMPHASIZED,
 } from "../../src/generated/i18n/i18n-defaults.js";
 
 describe("Button general interaction", () => {
@@ -304,28 +304,47 @@ describe("Accessibility", () => {
 			.should("have.attr", "role", "button");
 	});
 
-	it("aria-describedby properly applied on the button tag", () => {
-		cy.mount(<Button design="Attention">Content</Button>);
+	it("accessibleDescription in combination with design property applied on the button tag", () => {
+		cy.mount(<Button design="Negative" accessibleDescription="Decline">Content</Button>);
 
 		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
 			.as("button");
 
 		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-description", "Warning");
+			.should("have.attr", "aria-description", "Decline");
 	});
 
-	it("accessibleDescription in combination with design property applied on the button tag", () => {
-		cy.mount(<Button design="Negative" accessibleDescription="Decline">Content</Button>);
 
+	it("accessibleName when the button has a ui5-button-badge with more than 1 items", () => {
+		cy.mount(
+			<Button accessibleName="Download">
+				<ButtonBadge design="OverlayText" text="999+" slot="badge"></ButtonBadge>
+			</Button>
+		);
 		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
 			.as("button");
 
 		cy.get("@button")
+			.should("have.attr", "aria-label", `Download 999+ items`);
+	});
+
+	it("accessibleName when the button has a ui5-button-badge with 1 item", () => {
+		cy.mount(
+			<Button design="Emphasized" accessibleName="Download">
+				<ButtonBadge text="1" design="InlineText" slot="badge"></ButtonBadge>
+			</Button>
+		);
+		cy.get("[ui5-button]")
 			.shadow()
 			.find("button")
-			.should("have.attr", "aria-description", `${BUTTON_ARIA_TYPE_REJECT.defaultText} Decline`);
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "aria-label", `Download ${BUTTON_ARIA_TYPE_EMPHASIZED.defaultText} 1 item`);
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {

package/cypress/specs/F6.cy.tsx

@@ -1,5 +1,6 @@
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import Button from "../../src/Button.js";
+import Bar from "../../src/Bar.js";
 
 describe("F6 navigation", () => {
 	describe("F6 Forward navigation", () => {
@@ -903,4 +904,74 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 	});
+
+
+	describe.only("Bypass groups", () => {
+		it("Custom defined groups", () => {
+			cy.mount(
+				<div>
+					<div class="section">
+						<button id="before">Before element</button>
+					</div>
+					<div class="section" data-sap-ui-fastnavgroup="false">
+						<Button>Skipped element</Button>
+					</div>
+					<div class="section">
+						<Button>Something focusable</Button>
+					</div>
+					<div class="section" data-sap-ui-fastnavgroup="true">
+						<Button id="first">First focusable</Button>
+					</div>
+				</div>
+			);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress("F6");
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+		});
+
+		it("Built-in groups", () => {
+			cy.mount(
+				<div>
+					<div class="section">
+						<button id="before">Before element</button>
+					</div>
+					<Bar>
+						<Button id="first">First focusable element</Button>
+					</Bar>
+
+					<Bar data-sap-ui-fastnavgroup="false" id="skippedBar">
+						<Button>Skipped element</Button>
+					</Bar>
+					<div class="section">
+						<Button>Something focusable</Button>
+					</div>
+					<div class="section" data-sap-ui-fastnavgroup="true">
+						<Button id="second">Second focusable</Button>
+					</div>
+				</div>
+			);
+
+			// act
+			cy.get("#before").focus();
+			cy.realPress("F6");
+
+			// assert 1st group is focused
+			cy.get("#first")
+				.should("be.focused");
+
+			cy.get("#skippedBar")
+				.should("have.attr", "data-sap-ui-fastnavgroup", "false");
+
+			cy.realPress("F6");
+
+			// assert 2nd group is focused
+			cy.get("#second")
+				.should("be.focused");
+		});
+	});
 });

package/cypress/specs/List.cy.tsx

@@ -1,3 +1,4 @@
+import type UI5Element from "@ui5/webcomponents-base";
 import List from "../../src/List.js";
 import ListItemStandard from "../../src/ListItemStandard.js";
 
@@ -256,3 +257,53 @@ describe("List - Wrapping Behavior", () => {
 			.should("not.exist");
 	});
 });
+
+describe("List - getFocusDomRef Method", () => {
+	it("should return undefined when the list is empty", () => {
+		cy.mount(<List></List>);
+
+		cy.get<List>("[ui5-list]")
+			.then(($el) => {
+				expect($el[0].getFocusDomRef()).to.be.undefined;
+			});
+	});
+
+	it("should return first item if no item was focused before", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+				<ListItemStandard>Item 2</ListItemStandard>
+				<ListItemStandard>Item 3</ListItemStandard>
+			</List>
+		);
+
+		cy.get<UI5Element>("[ui5-list], #item1")
+			.then(($el) => {
+				const list = $el[0];
+				const item = $el[1];
+
+				expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef());
+			});
+	});
+
+	it("should return last focused item in the list", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard>Item 1</ListItemStandard>
+				<ListItemStandard id="item2">Item 2</ListItemStandard>
+				<ListItemStandard>Item 3</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item2").click();
+		cy.get("#item2").should("be.focused");
+
+		cy.get<UI5Element>("[ui5-list], #item2")
+			.then(($el) => {
+				const list = $el[0];
+				const item = $el[1];
+
+				expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef());
+			});
+	});
+});

package/cypress/specs/RangeSlider.cy.tsx

@@ -0,0 +1,52 @@
+import RangeSlider from "../../src/RangeSlider.js";
+
+describe("Accessibility", () => {
+	it("should apply associated label text as aria-label on the slider element", () => {
+		const labelText = "basic range slider";
+		cy.mount(
+			<>
+				<label for="rs">{labelText}</label>
+				<RangeSlider id="rs" min={0} max={20}></RangeSlider>
+			</>
+		);
+
+		cy.get("[ui5-range-slider]")
+			.shadow()
+			.find(".ui5-slider-progress")
+			.should("have.attr", "aria-label", `${labelText} Range`);
+    });
+	it("Aria attributes of the progress bar are set correctly", () => {
+		cy.mount(
+			<RangeSlider id="range-slider-tickmarks" min={0} max={40} step={1} end-value={20} show-tickmarks></RangeSlider>
+		);
+
+		cy.get("#range-slider-tickmarks")
+			.shadow()
+			.find(".ui5-slider-progress")
+			.as("sliderProgress");
+
+		cy.get("ui5-range-slider").then(($el) => {
+			const rangeSlider = $el[0] as RangeSlider;
+			const minValue = rangeSlider.min;
+			const maxValue = rangeSlider.max;
+			const startValue = rangeSlider.startValue;
+			const endValue = rangeSlider.endValue;
+
+			cy.get("@sliderProgress")
+			.should("have.attr", "aria-label", "Range");
+
+			cy.get("@sliderProgress")
+				.should("have.attr", "aria-valuemin", `${minValue}`);
+
+			cy.get("@sliderProgress")
+				.should("have.attr", "aria-valuemax", `${maxValue}`);
+
+			cy.get("@sliderProgress")
+				.should("have.attr", "aria-valuetext", `From ${startValue} to ${endValue}`);
+
+			cy.get("@sliderProgress")
+				.should("have.attr", "aria-valuenow", `${endValue}`);
+
+		});
+	});
+});

package/cypress/specs/Slider.cy.tsx

@@ -24,3 +24,64 @@ describe("General interactions", () => {
 		});
 	});
 });
+
+describe("Accessibility", () => {
+	it("aria-keyshortcuts should not be set on regular slider", () => {
+		cy.mount(
+			<Slider min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]")
+			.shadow()
+			.find(".ui5-slider-handle")
+			.should("not.have.attr", "aria-keyshortcuts");
+	});
+
+	it("aria-keyshortcuts should be set on slider with editable tooltips", () => {
+		cy.mount(
+			<Slider editableTooltip={true} min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]")
+			.shadow()
+			.find(".ui5-slider-handle")
+			.should("have.attr", "aria-keyshortcuts");
+	});
+
+	it("should apply associated label text as aria-label on the slider element", () => {
+		const labelText = "label for slider";
+		cy.mount(
+			<>
+				<label for="slider">{labelText}</label>
+				<Slider id="slider" min={0} max={20}></Slider>
+			</>
+		);
+
+		cy.get("[ui5-slider]")
+			.shadow()
+			.find(".ui5-slider-handle")
+			.should("have.attr", "aria-label", `${labelText} Slider handle`);
+});
+	it("Aria attributes are set correctly", () => {
+			cy.mount(
+				<Slider id="basic-slider" accessible-name="Basic Slider" min={0} max={10}></Slider>
+			);
+
+			cy.get("#basic-slider")
+				.shadow()
+				.find(".ui5-slider-handle")
+				.as("sliderHandle");
+
+			cy.get("@sliderHandle")
+				.should("have.attr", "aria-label", "Basic Slider Slider handle");
+
+			cy.get("@sliderHandle")
+				.should("have.attr", "aria-valuemin", "0");
+
+			cy.get("@sliderHandle")
+				.should("have.attr", "aria-valuemax", "10");
+
+			cy.get("@sliderHandle")
+				.should("have.attr", "aria-valuenow", "0");
+		});
+});

package/cypress/specs/TextArea.cy.tsx

@@ -397,8 +397,31 @@ describe("TextArea general interaction", () => {
 						.should("be.equal", initialTextareaSize);
 				});
 		});
+
+		it("should grow correctly when typing symbols (&)", () => {
+			cy.mount(<TextArea growing={true} value="&&&" style="width: 100px"></TextArea>);
+
+			cy.get("[ui5-textarea]")
+				.as("textarea");
+
+			cy.get("@textarea")
+				.realClick();
+
+			cy.get("@textarea")
+				.then(textarea => {
+					const initialTextareaSize = textarea.height();
+
+					cy.focused()
+						.realType("&");
+
+					cy.get("@textarea")
+						.invoke("height")
+						.should("be.equal", initialTextareaSize);
+				});
+		});
 	});
 
+
 	describe("When having max length set", () => {
 		it("prevents input when max is reached", () => {
 			cy.mount(<TextArea maxlength={10}></TextArea>);