fix(core): datepicker addon button should not be tabindex, popover opens with f4 key

libs/core/date-picker/date-picker.component.html

@@ -60,6 +60,7 @@
             [attr.aria-describedby]="_formValueStateMessageId"
             [ngModel]="_inputFieldDate"
             (keyup.enter)="handleInputChange($any($event.target).value, false)"
+            (keydown.f4)="toggleCalendar()"
             (ngModelChange)="handleInputChange($event, true)"
             (click)="mobile && openCalendar()"
             (blur)="_onBlur($event)"

libs/core/date-picker/date-picker.component.spec.ts

@@ -466,6 +466,14 @@ describe('DatePickerComponent', () => {
         expect(component.selectedMultipleDateRangesChange.emit).not.toHaveBeenCalled();
         expect(component.isModelValid()).toBe(false);
     });
+
+    it('should toggle the calendar with the f4 key', () => {
+        jest.spyOn(component, 'toggleCalendar');
+        component._inputElement.nativeElement.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'f4'
+        }));
+        expect(component.toggleCalendar).toHaveBeenCalled();
+    });
 });
 
 describe('DatePickerComponent Accessibility', () => {

libs/core/date-picker/date-picker.component.ts

@@ -262,11 +262,10 @@ export class DatePickerComponent<D>
     }
 
     /**
-     * Whether AddOn Button should be focusable
-     * @default true
+     * @deprecated Popover is toggled with f4 key
      */
     @Input()
-    buttonFocusable = true;
+    buttonFocusable = false;
 
     /**
      * Special days mark, it can be used by passing array of object with

libs/core/datetime-picker/datetime-picker.component.html

@@ -52,6 +52,7 @@
             [placeholder]="placeholder"
             [disabled]="disabled"
             [ngModel]="_inputFieldDate | translateDayPeriod"
+            (keydown.f4)="togglePopover()"
             (keyup.enter)="handleInputChange($any($event.target).value, false)"
             (ngModelChange)="handleInputChange($event, true)"
             (blur)="handleOnTouched($event)"

libs/core/datetime-picker/datetime-picker.component.spec.ts

@@ -175,6 +175,14 @@ describe('DatetimePickerComponent', () => {
         expect(component._inputFieldDate).toEqual('1/25/2022');
         expect(component._isInvalidDateInput).toEqual(false);
     });
+
+    it('should toggle the popover with the f4 key', () => {
+        jest.spyOn(component, 'togglePopover');
+        component._inputElement.nativeElement.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'f4'
+        }));
+        expect(component.togglePopover).toHaveBeenCalled();
+    });
 });
 
 const DATE_TIME_PICKER_IDENTIFIER = 'core-date-time-picker-unit-test';

libs/core/datetime-picker/datetime-picker.component.ts

@@ -255,11 +255,10 @@ export class DatetimePickerComponent<D>
     }
 
     /**
-     * Whether AddOn Button should be focusable
-     * @default true
+     * @deprecated Popover is toggled with f4 key
      */
     @Input()
-    buttonFocusable = true;
+    buttonFocusable = false;
 
     /**
      * Special days mark, it can be used by passing array of object with