chore(a11y): 🤖 enable keyboard date range picker selection by punkbit · Pull Request #856 · ClickHouse/click-ui

punkbit · 2026-02-26T13:23:11Z

Why?

Enable keyboard date range picker selection

Added keyboard navigation support to the DatePicker component, allowing users to select dates without using a mouse. This improves accessibility and provides a faster workflow for power users.

⚠️ WARNING: Depends on #838 which should be merged first
🤖 Switch base branch to main once #838 is merged

How?

Replaced Dropdown with Popover component for better focus management
Added focus management with refs to track keyboard position
Implemented keyboard event handlers for Arrow keys, Enter, and Space
Active elements (today's date, selected date) temporarily revert to default styling when keyboard focused to ensure the yellow focus ring is always visible

Preview?

Latest update (feb 27 12:15pm GMT)

demo-datepicker-keyboard-navigation.mov

Contrast issue found, e.g. lack contrast on keyboard navigation matching an active element

demo-keyboard-nav-no-contrast-on-active-match.mov

Solution for contrast issue, e.g. replaces active by navigation default focus style

demo-date-picker-solved-selection-nav-matching-active.mov

Result use-cases

demo-date-picking-keyboard-nav-flow.mov

…ow that clears if not complete

…vron to month

…nth selection

…Picker

…over action

…the current date

… month and year

…hore/enable-keyboard-date-range-picker-selection

…ction

hoorayimhelping · 2026-03-03T14:27:26Z

How do you actually trigger the DatePicker with just the keyboard? This video is me getting the input focus then trying to open the DatePicker using enter, spacebar, and various keys on the keyboard

Screen.Recording.2026-03-03.at.9.25.53.AM.mov

hoorayimhelping · 2026-03-03T14:35:33Z

src/components/DatePicker/Common.tsx

+  const monthGridRef = useRef<(HTMLButtonElement | null)[]>([]);
+  const yearGridRef = useRef<(HTMLButtonElement | null)[]>([]);
+  const headerNavRefs = useRef<(HTMLButtonElement | null)[]>([null, null, null]);
+


We prefer the form Array<type> rather than type[] for readability purposes.

@hoorayimhelping, that's quite subjective, can we not impose it? If you hover a type in your text editor, TypeScript will show the form type[] and not Array, it's the default. A quick search in the project or control plane show plenty of examples of type[] usage.

hoorayimhelping · 2026-03-03T14:39:49Z

src/components/DatePicker/Common.tsx

+          newIndex = (index - columns + totalItems) % totalItems;
+          break;
+        case 'Enter':
+        case ' ':


Is ' ' the same as spacebar?

Yes https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Can we use space or spacebar or do we have to use ' ' since it's a value? I'd prefer spacebar since it's more explicit and clear

hoorayimhelping · 2026-03-03T14:43:31Z

src/components/DatePicker/Common.tsx


  const renderYearsGrid = () => {
-    const years = [];
+    const years: number[] = [];


Suggested change

const years: number[] = [];

const years: Array<number> = [];

src/components/DatePicker/Common.tsx

hoorayimhelping · 2026-03-03T14:46:00Z

src/components/DatePicker/DatePicker.test.tsx


  describe('disabling dates', () => {
-    // this test was throwing an error if `vi.useFakeTimers` was called outside
-    // of beforeAll, so it needed to be put in here


I think you should leave this comment here. We rarely use beforeAll, so explaining why it's here and giving a hint that it shouldn't be changed is probably valuable

Ok put it back

hoorayimhelping · 2026-03-03T14:50:17Z

src/components/DatePicker/DatePicker.test.tsx

+      expect(document.activeElement).toBe(getByTestId('month-cell-1'));
+    });
+
+    it('calendar title is keyboard accessible', async () => {


Suggested change

it('calendar title is keyboard accessible', async () => {

it('allows accessing the calendar title by keyboard', async () => {

hoorayimhelping · 2026-03-03T14:51:07Z

src/components/DatePicker/DatePicker.test.tsx

+      expect(getByTestId('years-grid')).toBeInTheDocument();
+    });
+
+    it('day grid supports keyboard navigation and Enter to select', async () => {


I think we this should be wrapped in a describe as well

describe('the day grid', () => { it('supports keyboard navigation and selects with Enter', async ()

hoorayimhelping · 2026-03-03T14:53:03Z

src/components/DatePicker/DatePicker.tsx

+    selectedDate ? isSameDate(selectedDate, day.value) : isSameDate(today, day.value)
+  );
+
+  const [focusedDayIndex, setFocusedDayIndex] = useState(


Suggested change

const [focusedDayIndex, setFocusedDayIndex] = useState(

const [focusedDayIndex, setFocusedDayIndex] = useState<number>(

hoorayimhelping · 2026-03-03T14:53:15Z

src/components/DatePicker/DatePicker.tsx

+  const [focusedDayIndex, setFocusedDayIndex] = useState(
+    initialFocusIndex >= 0 ? initialFocusIndex : 0
+  );
+  const dayRefs = useRef<(HTMLTableCellElement | null)[]>([]);


Suggested change

const dayRefs = useRef<(HTMLTableCellElement | null)[]>([]);

const dayRefs = useRef<Array<(HTMLTableCellElement | null)>>([]);

hoorayimhelping · 2026-03-03T14:53:49Z

src/components/DatePicker/DatePicker.tsx


  return (
-    <Dropdown
+    <Popover.Root


Why the change from Dropdown to Popover?

Keyboard support, test here:
https://www.radix-ui.com/primitives/docs/components/dropdown-menu
https://www.radix-ui.com/primitives/docs/components/popover

punkbit · 2026-03-03T15:03:46Z

How do you actually trigger the DatePicker with just the keyboard? This video is me getting the input focus then trying to open the DatePicker using enter, spacebar, and various keys on the keyboard

Screen.Recording.2026-03-03.at.9.25.53.AM.mov

Tab, then space

…ction

hoorayimhelping · 2026-03-03T19:15:15Z

Tab, then space

I can't get this to work in Firefox. I'm trying to load the preview in chrome. Where can I find the latest vercel preview? The one auto-posted in a comment is an older build. Chromatic requires a login, which I'm not going to both with on Chrome

punkbit added 30 commits February 18, 2026 09:34

chore: 🤖 create get month names util

5045040

chore: 🤖 add date terms

e8ad577

refactor: 💡 add two phase selection process for month and year selection

e836d1b

chore: 🤖 add nr days of a week

7e0334e

refactor: 💡 make date constants

7f04495

refactor: 💡 apply date constants to date component

6f7596e

refactor: 💡 apply date constants to grid calcs

6de2944

refactor: 💡 on month, hide date chevron nav

2605d94

style: 💄 unselectable date title, prevent position shift

43cb3b4

style: 💄 use theme gap

1451a1d

chore: 🤖 add changeset

bb879c6

chore: 🤖 format

2dffd60

chore: 🤖 format

fd3edc7

chore: 🤖 use Select Year

a1ba8b1

refactor: 💡 on title select, show year first

ba9b076

style: 💄 active year has yellow background

6ae3137

style: 💄 set row gap to 8px

dbec51b

style: 💄 highlight day (yello bg)

1a4573c

style: 💄 highlight month (yello bg)

5657587

test: 💍 update test logic with new approach

8a452ef

Merge branch 'main' into feat/date-range-picker-allow-jump-year

36551da

fix: 🐛 unselect active

a21ae72

refactor: 💡 prefer is selected for active state

cabc5f9

refactor: 💡 track user selection with a partial date state display fl…

872e3b2

…ow that clears if not complete

test: 💍 date selection partial date display progressive approach

f345784

chore: 🤖 update changeset

370e73f

chore: 🤖 format

02948ae

chore: 🤖 generate base POC with llm

6428264

style: 💄 add missing border

7875cfc

refactor: 💡 navigate days in default view

17cfefe

punkbit added 4 commits February 26, 2026 13:32

chore: 🤖 remove comments

7c9ba04

chore: 🤖 support top nav control with cursor keys, e.g. move from che…

7344d6b

…vron to month

chore: 🤖 format

e49b2a2

chore: 🤖 update changeset

d631f51

Base automatically changed from feat/date-range-picker-allow-jump-year to main February 26, 2026 16:45

punkbit added 16 commits February 27, 2026 09:50

style: 💄 make bold matching day month and year

94acd22

style: 💄 use bg placeholder #333 for testing

4c5842b

style: 💄 use range background colour

ff44353

style: 💄 use disabled/range colour and take precedence on year and mo…

0495980

…nth selection

style: 💄 use disabled/range colour and take precedence on year and mo…

8f9f745

…nth selection

style: 💄 use disabled/range colour and take precedence on day selection

5676d63

chore: 🤖 format

0aefc1e

chore: 🤖 add c ontrol to make title non-clickable, e.g. ion DateRange…

2da85bb

…Picker

chore: 🤖 add changeset

63bc18d

style: 💄 hover + muted style on intersection of current date + user h…

7f7d97e

…over action

style: 💄 If the date is selected, the selected state should override …

d3753da

…the current date

style: 💄 if date match, show active + muted bg for matching date day,…

33d0984

… month and year

Merge branch 'style/datepicker-make-curr-date-more-noticeable' into c…

5c8026a

…hore/enable-keyboard-date-range-picker-selection

fix: 🐛 lint amend

cd69a50

Merge branch 'main' into chore/enable-keyboard-date-range-picker-sele…

d76b8aa

…ction

style: 💄 missing hover and keyboard styles on matching active item

596acef

hoorayimhelping reviewed Mar 3, 2026

View reviewed changes

punkbit added 5 commits March 3, 2026 15:44

chore: 🤖 pr comments

289eab4

Merge branch 'main' into chore/enable-keyboard-date-range-picker-sele…

2a14cf6

…ction

chore: 🤖 linter

b381a57

chore: 🤖 add keydown listener to capture enter key

78f898f

chore: 🤖 format

4432e1e

	it('calendar title is keyboard accessible', async () => {
	it('allows accessing the calendar title by keyboard', async () => {

	const [focusedDayIndex, setFocusedDayIndex] = useState(
	const [focusedDayIndex, setFocusedDayIndex] = useState<number>(

	const dayRefs = useRef<(HTMLTableCellElement \| null)[]>([]);
	const dayRefs = useRef<Array<(HTMLTableCellElement \| null)>>([]);

Conversation

punkbit commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why?

How?

Preview?

Latest update (feb 27 12:15pm GMT)

Contrast issue found, e.g. lack contrast on keyboard navigation matching an active element

Solution for contrast issue, e.g. replaces active by navigation default focus style

Result use-cases

Uh oh!

hoorayimhelping commented Mar 3, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

punkbit commented Mar 3, 2026

Uh oh!

hoorayimhelping commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

punkbit commented Feb 26, 2026 •

edited

Loading

hoorayimhelping commented Mar 3, 2026 •

edited

Loading