Visitar URL original
feat(ui5-time-picker, ui5-datetime-picker): add keyboard/clock toggle… by Todor-ads · Pull Request #14216 · UI5/webcomponents · GitHub
Skip to content

feat(ui5-time-picker, ui5-datetime-picker): add keyboard/clock toggle… - #14216

Merged
Todor-ads merged 24 commits into
mainfrom
tp_change_view
Nov 10, 2026
Merged

Todor-ads merged 24 commits into
mainfrom
tp_change_view

Conversation

@Todor-ads

@Todor-ads Todor-ads commented Oct 27, 2026 •

Copy link
Copy Markdown
Contributor

Adds a clock/keyboard toggle button to the TimePicker and DateTimePicker dialog header on phone devices

Phone dialog header - a Bar-based header is rendered on mobile with the picker title in startContent and the toggle button in endContent

Toggle behavior - tapping the button switches between the analog clock (TimeSelectionClocks) and the numeric inputs (TimeSelectionInputs) view, the state resets when the dialog closes

Click vs. focus - clicking the input field on mobile opens the dialog directly in inputs view, opening via the icon opens in clock view

Phone-only - the toggle button is rendered only when isPhone() is true (not on narrow desktop or tablet)

… on mobile

On mobile devices, the picker dialog header now contains a toggle button
that switches between the analog clock view (TimeSelectionClocks) and the
keyboard input view (TimeSelectionInputs with visible labels). The active
mode is reset to clock view when the picker closes or, for DateTimePicker,
when switching back to the date view.

Clicking the input field on mobile opens the dialog directly in keyboard
input mode; clicking the icon opens it in clock mode (default).

The separate inputs popover (previously triggered by tapping the text
field on mobile) has been removed — the main dialog now handles both
interaction paths.

TimeSelectionInputs receives a new _showLabels property that renders
short labels (Hours:, Min:, Sec:) above each numeric input and keeps
AM/PM on its own row, providing a clearer layout inside the dialog.
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

Fixes no-multiple-empty-lines lint error at line 725.
…er on mobile

On mobile, the picker dialog now shows a proper header using ui5-bar:
- Title from the associated label (empty when no label is set)
- Toggle button (clock ↔ keyboard) in the end content slot

Focus handling is improved: in keyboard-input mode, initial focus
goes to the hours input instead of the toggle button.

DateTimePicker also gets the Bar-based header (title + date/time
segmented button + toggle), and showHeader now respects _phoneView
so the header appears in narrow-desktop mode too.
When the dialog opens in clock mode, initial focus now lands on the
toggle button so keyboard users can immediately switch to input mode.
In input mode the focus goes to the hours input as before.
Instead of relying on the initialFocus prop (which cannot resolve
elements inside shadow DOM via getElementById), focus is now applied
manually in onResponsivePopoverAfterOpen:
- clock mode → toggle button receives focus
- inputs mode → hours input receives focus (via TimeSelectionInputs
  focus delegation through data-sap-focus-ref)
Focus the toggle button unconditionally (when present) instead of
gating on showHeader or _useInputsMode, so focus is consistent
regardless of how the dialog was opened or which view is active.
…one only

Remove manual focus from onResponsivePopoverAfterOpen and restrict
the clock/keyboard toggle button to isPhone() only, so it does not
appear on narrow-desktop (phoneMode) or tablet views.
Move _openPickerInInputsMode from _onfocusin to _handleInputClick so
the dialog opens only on tap/click and not when VoiceOver or keyboard
navigation brings focus to the input field.
…log open

When the dialog opens on phone (showHeader=true): focus the first hours
input if in inputs mode, or the mode-toggle button if in clock mode.
…gle button

Add accessibleName ("Input view") and accessibleDescription ("Screen reader
users can use this view to enter a time.") to the phone mode-toggle button,
matching the ariaLabelledBy/ariaDescribedBy pattern from openui5 TimePicker.
…ode-toggle button

The description "Screen reader users can use this view to enter a time."
was ambiguous — it implied the clock view allows entry. Remove it and
keep only accessibleName="Input view" which correctly names the destination.
…le button

When in clock view: "Switch to Input view to enter hours, minutes, and seconds."
When in inputs view: "In this view you can enter hours, minutes, and seconds."
…de toggle

When toggling between clock and inputs view on phone, announce assertively:
- "Time input view displayed" when switching to inputs mode
- "Clock view" when switching back to clock mode
Matches the openui5 TimePicker InvisibleMessage.announce() behavior.
The accessible description is static in both views:
"Screen reader users can use this view to enter a time."
Only the tooltip changes dynamically per view.
…le button

Clock view: "Screen reader users should switch to Input view to enter a time."
Inputs view: "Screen reader users can use this view to enter a time."
…ui5 screenshots

Both clock and inputs view show the same static description:
"Screen reader users can use this view to enter a time."
Only the tooltip changes: "Switch to keyboard input" / "Switch to clock view"
…utton

Clock view: "Screen reader users should switch to Input view to enter a time."
Inputs view: "Screen reader users can use this view to enter a time."
@cla-assistant

cla-assistant Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@GDamyanov GDamyanov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cypress tests are missing

Comment thread packages/main/src/DateTimePicker.ts Resolved
Comment thread packages/main/src/DateTimePicker.ts Resolved
Comment thread packages/main/src/TimePicker.ts Resolved
Comment thread packages/main/src/TimePicker.ts Resolved
Comment thread packages/main/src/DateTimePicker.ts Resolved
- Rename _useInputsMode → _useInputs in TimePicker
- Rename _useTimeInputsMode → _useTimeInputs in DateTimePicker
- Add announce() call in DateTimePicker._toggleDtpTimeMode
- Fix DateTimePicker._showTimeViewToggle to use _phoneView instead of isPhone()
- Remove redundant ui5-dt-cal--hidden class from TimeSelectionClocks
- Remove unused TIMEPICKER_MOBILE_HEADER_TITLE i18n key
- Fix Min.: → Min: and Sec.: → Sec: in messagebundle.properties
- Clean up messagebundle_en.properties: remove unnecessary keys
@Todor-ads
Todor-ads deployed to netlify-preview November 9, 2026 11:01 — with GitHub Actions Active
@GDamyanov
GDamyanov self-requested a review November 9, 2026 13:48
@Todor-ads
Todor-ads deployed to netlify-preview November 9, 2026 14:35 — with GitHub Actions Active
@Todor-ads
Todor-ads deployed to netlify-preview November 9, 2026 14:49 — with GitHub Actions Active
GDamyanov
GDamyanov previously approved these changes Nov 9, 2026
@Todor-ads
Todor-ads deployed to netlify-preview November 10, 2026 12:08 — with GitHub Actions Active
@Todor-ads
Todor-ads deployed to netlify-preview November 10, 2026 12:39 — with GitHub Actions Active
@Todor-ads
Todor-ads merged commit caca4ac into main Nov 10, 2026
13 checks passed
@Todor-ads
Todor-ads deleted the tp_change_view branch November 10, 2026 13:10
@Todor-ads
Todor-ads deployed to netlify-preview November 10, 2026 13:10 — with GitHub Actions Active
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🧹 Preview deployment cleaned up: https://pr-14216--ui5-webcomponents.netlify.app

This branch was successfully deployed

1 active deployment
netlify-preview — 7a42625e Deployed Nov 10, 2026 by Todor-ads via cleanup-preview #761
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants