fix(ui5-flexible-column-layout): add aria-valuenow attribute to separators

packages/fiori/cypress/specs/FCL.cy.tsx

@@ -106,4 +106,27 @@ describe("ACC", () => {
 			.find("slot[name=endColumn]")
 			.should("have.attr", "aria-hidden");
 	});
+
+	it("verifies that aria-valuenow is set on separators", () => {
+		cy.mount(
+			<FlexibleColumnLayout id="fcl" style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div class="column" id="startColumn" slot="startColumn">some content</div>
+				<div class="column" id="midColumn" slot="midColumn">some content</div>
+				<div class="column" id="endColumn" slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.as("fcl");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("have.attr", "aria-valuenow");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("have.attr", "aria-valuenow");
+	});
 });

packages/fiori/src/FlexibleColumnLayout.ts

@@ -64,6 +64,11 @@ const COLUMN = {
 	END: 2,
 } as const;
 
+const SEPARATOR_DEFAULT_VALUES = {
+	START: 50,
+	END: 75,
+} as const;
+
 const COLUMN_MIN_WIDTH = 248;
 
 type SeparatorMovementSession = {
@@ -1072,6 +1077,25 @@ class FlexibleColumnLayout extends UI5Element {
 		return this.effectiveSeparatorsInfo[0].arrowVisible;
 	}
 
+	get startSeparatorValue() {
+		const startColumnWidth = this.startColumnWidth;
+		if (typeof startColumnWidth === "string" && startColumnWidth.endsWith("%")) {
+			return parseInt(startColumnWidth);
+		}
+		return SEPARATOR_DEFAULT_VALUES.START;
+	}
+
+	get endSeparatorValue() {
+		const startColumnWidth = this.startColumnWidth;
+		const midColumnWidth = this.midColumnWidth;
+
+		if (typeof startColumnWidth === "string" && startColumnWidth.endsWith("%")
+			&& typeof midColumnWidth === "string" && midColumnWidth.endsWith("%")) {
+			return parseInt(startColumnWidth) + parseInt(midColumnWidth);
+		}
+		return SEPARATOR_DEFAULT_VALUES.END;
+	}
+
 	get startArrowDirection() {
 		return this.effectiveSeparatorsInfo[0].arrowDirection;
 	}

packages/fiori/src/FlexibleColumnLayoutTemplate.tsx

@@ -32,6 +32,7 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				class="ui5-fcl-separator ui5-fcl-separator-start"
 				style={{ display: this.showStartSeparator ? "flex" : "none" }}
 				tabindex={this.startSeparatorTabIndex}
+				aria-valuenow={this.startSeparatorValue}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
 				onKeyDown={this._onSeparatorKeydown}
@@ -61,6 +62,7 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				class="ui5-fcl-separator ui5-fcl-separator-end"
 				style={{ display: this.showEndSeparator ? "flex" : "none" }}
 				tabindex={this.endSeparatorTabIndex}
+				aria-valuenow={this.endSeparatorValue}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
 				onKeyDown={this._onSeparatorKeydown}