@oneluiz/dual-datepicker 3.0.1 → 3.1.1

package/README.md

@@ -48,7 +48,7 @@ npm install @oneluiz/dual-datepicker
 - 🎨 **Fully Customizable** – Every color, padding, border configurable
 - 📦 **Lightweight** – ~60 KB gzipped total bundle
 - 🚀 **Performance** – OnPush change detection + trackBy optimization
-- ♿ **Accessible** – ARIA labels, semantic HTML, keyboard navigation (in progress)
+- ♿ **Accessible** – ARIA labels, semantic HTML, full keyboard navigation
 - 🌍 **i18n Ready** – Customizable month/day names
 - 📱 **Responsive** – Works on desktop and mobile
 
@@ -83,14 +83,50 @@ npm install @oneluiz/dual-datepicker
 
 ## ♿ Accessibility (A11y)
 
-**Current Status:**
-- ✅ **Screen reader support** - ARIA labels included for all interactive elements
-- ✅ **Semantic HTML** - Proper HTML structure
-- 🚧 **Full keyboard navigation** - In active development (see [Roadmap](#-roadmap))
-  - Mouse/touch interaction: ✅ Fully supported
-  - Keyboard navigation: 🚧 In progress
+**✅ WCAG 2.1 Level AA Compliant**
+
+- ✅ **Full keyboard navigation** – Complete keyboard control (v3.1.0)
+- ✅ **Screen reader support** – ARIA labels included for all interactive elements
+- ✅ **Semantic HTML** – Proper HTML structure with `role` attributes
+- ✅ **Focus management** – Intelligent focus tracking and visual indicators
+
+### ⌨️ Keyboard Navigation (NEW in v3.1.0)
+
+Navigate the datepicker entirely with your keyboard:
+
+| Key(s) | Action |
+|--------|--------|
+| **Arrow Keys** | |
+| `←` / `→` | Navigate between days (horizontal) |
+| `↑` / `↓` | Navigate by weeks (vertical) |
+| **Selection** | |
+| `Enter` / `Space` | Select focused day |
+| `Escape` | Close datepicker |
+| **Navigation Shortcuts** | |
+| `Home` | Jump to first day of visible range |
+| `End` | Jump to last day of visible range |
+| `PageUp` / `PageDown` | Navigate months |
+| `Shift + PageUp` / `Shift + PageDown` | Navigate years |
+| `Tab` | Navigate between input, presets, and calendar |
+
+**Visual Indicators:**
+- Blue outline ring indicates focused day
+- Light blue background on keyboard-focused days
+- Automatic focus management when opening/closing picker
+
+**Screen Reader Support:**
+- `role="combobox"` on input field
+- `aria-expanded`, `aria-haspopup` states
+- `aria-label`, `aria-selected`, `aria-current` on calendar days
+
+**Configuration:**
+```typescript
+// Keyboard navigation enabled by default
+<ngx-dual-datepicker></ngx-dual-datepicker>
 
-> **Note:** Full keyboard navigation support is planned and will be included in a future release. This includes arrow key navigation, Enter/Space selection, and Escape to close.
+// Disable if needed
+<ngx-dual-datepicker [enableKeyboardNavigation]="false"></ngx-dual-datepicker>
+```
 
 ## 📦 Installation
 

package/dual-datepicker.component.d.ts

@@ -35,6 +35,7 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     closeOnSelection: boolean;
     closeOnPresetSelection: boolean;
     closeOnClickOutside: boolean;
+    enableKeyboardNavigation: boolean;
     presets: PresetConfig[];
     inputBackgroundColor: string;
     inputTextColor: string;
@@ -58,6 +59,10 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     isDisabled: import("@angular/core").WritableSignal<boolean>;
     selectedRanges: import("@angular/core").WritableSignal<DateRange[]>;
     currentRangeIndex: import("@angular/core").WritableSignal<number>;
+    focusedDay: import("@angular/core").WritableSignal<{
+        date: string;
+        monthIndex: number;
+    }>;
     currentMonthName: import("@angular/core").Signal<string>;
     previousMonthName: import("@angular/core").Signal<string>;
     weekDayNames: import("@angular/core").Signal<string[]>;
@@ -69,6 +74,17 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     private onTouched;
     constructor(elementRef: ElementRef);
     onClickOutside(event: MouseEvent): void;
+    handleKeyboardNavigation(event: KeyboardEvent): void;
+    private initializeFocus;
+    private isDateInMonth;
+    private moveFocusHorizontal;
+    private moveFocusVertical;
+    private moveFocusToFirstDay;
+    private moveFocusToLastDay;
+    private moveFocusYear;
+    private adjustFocusAfterMonthChange;
+    private selectFocusedDay;
+    hasKeyboardFocus(date: string, monthIndex: number): boolean;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     formatDate(date: Date): string;
@@ -97,5 +113,5 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DualDatepickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DualDatepickerComponent, "ngx-dual-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "showPresets": { "alias": "showPresets"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "multiRange": { "alias": "multiRange"; "required": false; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; }; "closeOnPresetSelection": { "alias": "closeOnPresetSelection"; "required": false; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; }; "enableKeyboardNavigation": { "alias": "enableKeyboardNavigation"; "required": false; }; "presets": { "alias": "presets"; "required": false; }; "inputBackgroundColor": { "alias": "inputBackgroundColor"; "required": false; }; "inputTextColor": { "alias": "inputTextColor"; "required": false; }; "inputBorderColor": { "alias": "inputBorderColor"; "required": false; }; "inputBorderColorHover": { "alias": "inputBorderColorHover"; "required": false; }; "inputBorderColorFocus": { "alias": "inputBorderColorFocus"; "required": false; }; "inputPadding": { "alias": "inputPadding"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; }, { "dateRangeChange": "dateRangeChange"; "dateRangeSelected": "dateRangeSelected"; "multiDateRangeChange": "multiDateRangeChange"; "multiDateRangeSelected": "multiDateRangeSelected"; }, never, never, true, never>;
 }