fix(ui5-date-time-picker): correct initial focus on small screens (#12752)

Previously on initial open of the ui5-date-time-picker web component on smaller screen, the focus was being set on the ui5-segmented-button component. The reason behind this was that, the button was first in the DOM tree.

So now, instead of relying on automatic detection, we explicitly tell the ui5-responsive-popover which element should receive focus, by utilizing the initialFocus property (in phone mode only).

Author: hinzzx

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/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 }),
 	];
 }