Merge branch 'main' into user-settings-appearance-view

Author: SvilenDarvenyashki

packages/fiori/src/themes/UserSettingsDialog.css

@@ -9,6 +9,10 @@
 	padding: 0;
 }
 
+.ui5-user-settings-dialog::part(footer) {
+	padding: 0;
+}
+
 .ui5-user-settings-root {
 	display: flex;
 	height: 100%;

packages/main/cypress/specs/DateTimePicker.cy.tsx

@@ -550,6 +550,26 @@ describe("DateTimePicker general interaction", () => {
 });
 
 describe("Accessibility", () => {
+	it("initial focus goes to calendar's current date in phone mode", () => {
+		// Using viewport instead of device simulation (focus is not available on actual phone devices), to trigger SegmentedButton view.
+		cy.viewport(500, 800);
+
+		cy.mount(<DateTimePickerTemplate value="13/04/2020, 03:16:16 PM" formatPattern="dd/MM/yyyy, hh:mm:ss a" />);
+
+		cy.get<DateTimePicker>("[ui5-datetime-picker]").as("dtp");
+		
+		cy.get<DateTimePicker>("@dtp").ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.find("[ui5-calendar]")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find(".ui5-dp-item--selected")
+			.should("be.focused");
+	});
+
 	it("picker popover accessible name", () => {
 		const LABEL = "Deadline";
 		cy.mount(<DateTimePicker accessible-name={LABEL} />);

packages/main/cypress/specs/Link.cy.tsx

@@ -260,4 +260,65 @@ describe("General API", () => {
 		cy.get("@signInDialog")
 			.should("be.visible");
 	});
+
+	it("tabindex should update when text content is added after mount", () => {
+		// Mount link without text content
+		cy.mount(<Link id="dynamic-link"></Link>);
+
+		// Initially, tabindex should be -1 because there's no text content
+		cy.get("#dynamic-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "-1");
+
+		// Add text content dynamically
+		cy.get("#dynamic-link")
+			.then($link => {
+				$link[0].textContent = "Click me";
+			});
+
+		// After text is added, tabindex should become 0
+		cy.get("#dynamic-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "0");
+	});
+
+	it("tabindex should remain 0 when text content changes", () => {
+		cy.mount(<Link id="text-change-link">Initial Text</Link>);
+
+		cy.get("#text-change-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#text-change-link")
+			.then($link => {
+				$link[0].textContent = "Updated Text";
+			});
+
+		cy.get("#text-change-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "0");
+	});
+
+	it("tabindex should be -1 when text content is removed", () => {
+		cy.mount(<Link id="remove-text-link">Some text</Link>);
+
+		cy.get("#remove-text-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#remove-text-link")
+			.then($link => {
+				$link[0].textContent = "";
+			});
+
+		cy.get("#remove-text-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "tabindex", "-1");
+	});
 });

packages/main/src/Calendar.ts

@@ -612,6 +612,14 @@ class Calendar extends CalendarPart {
 		return this.shadowRoot!.querySelector(`[ui5-${this._currentPicker}picker]`)! as unknown as ICalendarPicker;
 	}
 
+	/**
+	 * Returns the focusable element inside the Calendar (the current picker)
+	 * @override
+	 */
+	getFocusDomRef() {
+		return this._currentPickerDOM as HTMLElement | undefined;
+	}
+
 	/**
 	 * The year clicked the "Previous" button in the header
 	 */

packages/main/src/DatePickerPopoverTemplate.tsx

@@ -14,10 +14,11 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
-export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook }) {
+export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook, initialFocus?: string }) {
 	const header = hooks?.header || defaultHeader;
 	const content = hooks?.content || defaultContent;
 	const footer = hooks?.footer || defaultFooter;
+	const initialFocus = hooks?.initialFocus;
 
 	return (
 		<ResponsivePopover
@@ -31,6 +32,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 			accessibleName={this.pickerAccessibleName}
 			hideArrow={true}
 			_hideHeader={this._shouldHideHeader}
+			initialFocus={initialFocus}
 			onKeyDown={this._onkeydown}
 			onClose={this.onResponsivePopoverAfterClose}
 			onOpen={this.onResponsivePopoverAfterOpen}

packages/main/src/DateTimePicker.ts

@@ -322,6 +322,14 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 		return false;
 	}
 
+	/**
+	 * Returns the ID of the element to focus initially when the picker opens in phone mode
+	 * @private
+	 */
+	get _initialFocusId() {
+		return this._phoneMode ? `${this._id}-calendar` : undefined;
+	}
+
 	/**
 	 * EVENT HANDLERS
 	 */

packages/main/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
 	];
 }
 

packages/main/src/Link.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -268,6 +269,15 @@ class Link extends UI5Element implements ITabbable {
 	@property()
 	endIcon?: string;
 
+	/**
+	 * Defines the text of the component.
+	 *
+	 * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 * @public
+	 */
+	@slot({ type: Node, "default": true })
+	text!: Array<Node>;
+
 	@property({ noAttribute: true })
 	_rel: string | undefined;
 

packages/main/src/StepInput.ts

@@ -513,6 +513,13 @@ class StepInput extends UI5Element implements IFormInputElement {
 	}
 
 	get _isValueWithCorrectPrecision() {
+		// check if the value will be displayed with correct precision
+		// _displayValue has special formatting logic
+		if ((this.value === 0) || (Number.isInteger(this.value))) {
+			// integers and zero will be formatted with toFixed, so they're always valid
+			return true;
+		}
+
 		// gets either "." or "," as delimiter which is based on locale, and splits the number by it
 		const delimiter = this.input?.value?.includes(".") ? "." : ",";
 		const numberParts = this.input?.value?.split(delimiter);