Date Pickers and Calendar keyboard navigation issues

[damyanpetev]

Description

Related to #14918
Some parts of the calendar - Active month, Year, Prev/Next buttons, still prevent the keyboard handling of the pickers/overlay. I've already removed some of the propagation stops for the related issue, but those only resolved the main items navigation.

• igniteui-angular version: 17.2.x, 18.2.x
• browser: N/A

Steps to reproduce

1. Open https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker#angular-datepicker-example
   OR https://stackblitz.com/edit/nd6bbo
2. Open the date picker
3. Hit Tab to focus the active month (or year or the previous/next buttons)
4. Attempt to close the picker with Escape or Alt + ArrowUp

Result

The picker doesn't close when the focus is on those items. For the months button for example the block is here:

igniteui-angular/projects/igniteui-angular/src/lib/calendar/calendar.component.ts

Lines 996 to 997 in 593a033

	public onActiveViewYearKB(date: Date, event: KeyboardEvent, activeViewIdx: number): void {
	event.stopPropagation();

However, removing this one with the button still being under the main calendar wrapper actually breaks the calendar navigation.

Currently only have two suggestions:

• One will be to use capturing handlers on the parent picker component so we can actually handle the ones we're interested in. That should do for the arrow, but IIRC the escape is actually handled by the overlay which would mean a change there. My only worry is that'd actually drop any scenario where a component inside the overlay would like to handle the escape itself, rather than cause a close. So thread carefully kind of situation.
• Option two would be consolidate the handling to the calendar wrapper and merely track the active node (somewhat grid nav-like) to dictate what the handler does. Again, prob won't be a very simple refactor as well.

Expected result

Should be able to use the picker's documented key shortcuts to close the calendar popup regardless of where the focus is in the calendar.

Attachments

Attach a sample if available, and screenshots, if applicable.

[github-actions]

There has been no recent activity and this issue has been marked inactive.