@oneluiz/dual-datepicker 3.0.1 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ npm install @oneluiz/dual-datepicker
|
|
|
48
48
|
- 🎨 **Fully Customizable** – Every color, padding, border configurable
|
|
49
49
|
- 📦 **Lightweight** – ~60 KB gzipped total bundle
|
|
50
50
|
- 🚀 **Performance** – OnPush change detection + trackBy optimization
|
|
51
|
-
- ♿ **Accessible** – ARIA labels, semantic HTML, keyboard navigation
|
|
51
|
+
- ♿ **Accessible** – ARIA labels, semantic HTML, full keyboard navigation
|
|
52
52
|
- 🌍 **i18n Ready** – Customizable month/day names
|
|
53
53
|
- 📱 **Responsive** – Works on desktop and mobile
|
|
54
54
|
|
|
@@ -83,14 +83,41 @@ npm install @oneluiz/dual-datepicker
|
|
|
83
83
|
|
|
84
84
|
## ♿ Accessibility (A11y)
|
|
85
85
|
|
|
86
|
-
**
|
|
87
|
-
|
|
88
|
-
- ✅ **
|
|
89
|
-
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
86
|
+
**✅ WCAG 2.1 Level AA Compliant**
|
|
87
|
+
|
|
88
|
+
- ✅ **Full keyboard navigation** – Complete keyboard control (v3.1.0)
|
|
89
|
+
- ✅ **Screen reader support** – ARIA labels included for all interactive elements
|
|
90
|
+
- ✅ **Semantic HTML** – Proper HTML structure with `role` attributes
|
|
91
|
+
- ✅ **Focus management** – Intelligent focus tracking and visual indicators
|
|
92
|
+
|
|
93
|
+
### ⌨️ Keyboard Navigation (NEW in v3.1.0)
|
|
94
|
+
|
|
95
|
+
Navigate the datepicker entirely with your keyboard:
|
|
96
|
+
|
|
97
|
+
| Key(s) | Action |
|
|
98
|
+
|--------|--------|
|
|
99
|
+
| **Arrow Keys** | |
|
|
100
|
+
| `←` / `→` | Navigate between days (horizontal) |
|
|
101
|
+
| `↑` / `↓` | Navigate by weeks (vertical) |
|
|
102
|
+
| **Selection** | |
|
|
103
|
+
| `Enter` / `Space` | Select focused day |
|
|
104
|
+
| `Escape` | Close datepicker |
|
|
105
|
+
| **Navigation Shortcuts** | |
|
|
106
|
+
| `Home` | Jump to first day of visible range |
|
|
107
|
+
| `End` | Jump to last day of visible range |
|
|
108
|
+
| `PageUp` / `PageDown` | Navigate months |
|
|
109
|
+
| `Shift + PageUp` / `Shift + PageDown` | Navigate years |
|
|
110
|
+
| `Tab` | Navigate between input, presets, and calendar |
|
|
111
|
+
|
|
112
|
+
**Visual Indicators:**
|
|
113
|
+
- Blue outline ring indicates focused day
|
|
114
|
+
- Light blue background on keyboard-focused days
|
|
115
|
+
- Automatic focus management when opening/closing picker
|
|
116
|
+
|
|
117
|
+
**Screen Reader Support:**
|
|
118
|
+
- `role="combobox"` on input field
|
|
119
|
+
- `aria-expanded`, `aria-haspopup` states
|
|
120
|
+
- `aria-label`, `aria-selected`, `aria-current` on calendar days
|
|
94
121
|
|
|
95
122
|
## 📦 Installation
|
|
96
123
|
|
|
@@ -58,6 +58,10 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
|
|
|
58
58
|
isDisabled: import("@angular/core").WritableSignal<boolean>;
|
|
59
59
|
selectedRanges: import("@angular/core").WritableSignal<DateRange[]>;
|
|
60
60
|
currentRangeIndex: import("@angular/core").WritableSignal<number>;
|
|
61
|
+
focusedDay: import("@angular/core").WritableSignal<{
|
|
62
|
+
date: string;
|
|
63
|
+
monthIndex: number;
|
|
64
|
+
}>;
|
|
61
65
|
currentMonthName: import("@angular/core").Signal<string>;
|
|
62
66
|
previousMonthName: import("@angular/core").Signal<string>;
|
|
63
67
|
weekDayNames: import("@angular/core").Signal<string[]>;
|
|
@@ -69,6 +73,17 @@ export declare class DualDatepickerComponent implements OnInit, OnChanges, Contr
|
|
|
69
73
|
private onTouched;
|
|
70
74
|
constructor(elementRef: ElementRef);
|
|
71
75
|
onClickOutside(event: MouseEvent): void;
|
|
76
|
+
handleKeyboardNavigation(event: KeyboardEvent): void;
|
|
77
|
+
private initializeFocus;
|
|
78
|
+
private isDateInMonth;
|
|
79
|
+
private moveFocusHorizontal;
|
|
80
|
+
private moveFocusVertical;
|
|
81
|
+
private moveFocusToFirstDay;
|
|
82
|
+
private moveFocusToLastDay;
|
|
83
|
+
private moveFocusYear;
|
|
84
|
+
private adjustFocusAfterMonthChange;
|
|
85
|
+
private selectFocusedDay;
|
|
86
|
+
hasKeyboardFocus(date: string, monthIndex: number): boolean;
|
|
72
87
|
ngOnInit(): void;
|
|
73
88
|
ngOnChanges(changes: SimpleChanges): void;
|
|
74
89
|
formatDate(date: Date): string;
|