Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: date picker a11y bug #16219

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+7 −29
Open

fix: date picker a11y bug #16219

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6208a4f
fix: date picker a11y bug
andreancardona Apr 16, 2024
0a90950
Merge branch 'main' into 15251-date-picker-a11y-bug
andreancardona Apr 17, 2024
13ac964
fix: update tests
andreancardona Apr 17, 2024
5c76001
Merge branch '15251-date-picker-a11y-bug' of https://github.com/andre…
andreancardona Apr 17, 2024
4551e22
fix: update tests avt
andreancardona Apr 17, 2024
aac5457
fix: update avt tests
andreancardona Apr 17, 2024
1809b53
Merge branch 'main' into 15251-date-picker-a11y-bug
2nikhiltom Jun 19, 2024
977fb5d
Merge branch 'main' into 15251-date-picker-a11y-bug
riddhybansal Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 2 additions & 16 deletions e2e/components/DatePicker/DatePicker-test.avt.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ test.describe('@avt DatePicker', () => {
},
});

// for some reason the firs tab is not working to focus the first tabstop, so focusing manually
// for some reason the first tab is not working to focus the first tabstop, so focusing manually
await page.getByRole('textbox', { name: 'Date Picker label' }).focus();
await expect(
page.getByRole('textbox', { name: 'Date Picker label' })
Expand All @@ -96,9 +96,6 @@ test.describe('@avt DatePicker', () => {
await page.keyboard.press('ArrowDown');
await expect(page.locator('span.today')).toBeFocused();
await page.keyboard.press('Escape');
await expect(
page.getByRole('textbox', { name: 'Date Picker label' })
).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
/open/
);
Expand Down Expand Up @@ -126,18 +123,7 @@ test.describe('@avt DatePicker', () => {
await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await expect(
page.locator('input#date-picker-input-id-start')
).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
/open/
);
await page.keyboard.press('Tab');
await expect(
page.locator('input#date-picker-input-id-finish')
).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
await page.keyboard.press('Escape');
await page.keyboard.press('Enter');
await expect(
page.locator('input#date-picker-input-id-finish')
).toBeFocused();
Expand Down
13 changes: 0 additions & 13 deletions e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ test.describe('@avt FluidDatePicker', () => {
await page.keyboard.press('ArrowDown');
await expect(page.locator('span.today')).toBeFocused();
await page.keyboard.press('Escape');
await expect(page.getByRole('textbox', { name: 'Label' })).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
/open/
);
Expand Down Expand Up @@ -98,18 +97,6 @@ test.describe('@avt FluidDatePicker', () => {
await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Enter');
await expect(
page.locator('input#date-picker-input-id-start')
).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
/open/
);
await page.keyboard.press('Tab');
await expect(
page.locator('input#date-picker-input-id-finish')
).toBeFocused();
await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
await page.keyboard.press('Escape');
await expect(
page.locator('input#date-picker-input-id-finish')
).toBeFocused();
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/components/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,8 @@ const DatePicker = React.forwardRef(function DatePicker(

// fix datepicker deleting the selectedDate when the calendar closes
const onCalendarClose = (selectedDates, dateStr) => {
endInputField?.current?.focus();
calendarRef.current.calendarContainer.classList.remove('open');
setTimeout(() => {
if (
lastStartValue.current &&
Expand Down Expand Up @@ -671,6 +673,9 @@ const DatePicker = React.forwardRef(function DatePicker(
}

if (match(event, keys.ArrowDown)) {
if (event.target == endInputField.current) {
calendar.calendarContainer.classList.add('open');
}
const {
calendarContainer,
selectedDateElem: fpSelectedDateElem,
Expand Down