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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 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.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/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>);