From 3e9f20340ad49c5aeefb4ee5b141512e2580fada Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 19 Apr 2026 07:36:48 +0200
Subject: [PATCH] fix(ui): improve DateRangePicker accessibility and fix docs
 link

- Add aria-label="Open calendar" and aria-hidden on icon for the calendar trigger button
- Add aria-hidden on nav button icons (React Aria provides built-in labels for prev/next slots)
- Update React Aria docs link to react-aria.adobe.com format

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
---
 docs-ui/src/app/components/date-range-picker/page.mdx         | 3 +--
 .../components/DateRangePicker/DateRangePickerCalendar.tsx    | 4 ++--
 .../src/components/DateRangePicker/DateRangePickerGroup.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs-ui/src/app/components/date-range-picker/page.mdx b/docs-ui/src/app/components/date-range-picker/page.mdx
index ad7230ce4d..0299d23822 100644
--- a/docs-ui/src/app/components/date-range-picker/page.mdx
+++ b/docs-ui/src/app/components/date-range-picker/page.mdx
@@ -17,8 +17,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { ReactAriaLink } from '@/components/ReactAriaLink';
 
 export const reactAriaUrls = {
-  dateRangePicker:
-    'https://react-spectrum.adobe.com/react-aria/DateRangePicker.html',
+  dateRangePicker: 'https://react-aria.adobe.com/DateRangePicker',
 };
 
 <PageTitle
diff --git a/packages/ui/src/components/DateRangePicker/DateRangePickerCalendar.tsx b/packages/ui/src/components/DateRangePicker/DateRangePickerCalendar.tsx
index dbfdc4d1d3..49e7675915 100644
--- a/packages/ui/src/components/DateRangePicker/DateRangePickerCalendar.tsx
+++ b/packages/ui/src/components/DateRangePicker/DateRangePickerCalendar.tsx
@@ -42,11 +42,11 @@ export const DateRangePickerCalendar = () => {
     <RangeCalendar className={classes.root}>
       <header className={classes.header}>
         <Button slot="previous" className={classes.navButton}>
-          <RiArrowLeftSLine size={16} />
+          <RiArrowLeftSLine size={16} aria-hidden="true" />
         </Button>
         <Heading className={classes.heading} />
         <Button slot="next" className={classes.navButton}>
-          <RiArrowRightSLine size={16} />
+          <RiArrowRightSLine size={16} aria-hidden="true" />
         </Button>
       </header>
       <CalendarGrid className={classes.grid}>
diff --git a/packages/ui/src/components/DateRangePicker/DateRangePickerGroup.tsx b/packages/ui/src/components/DateRangePicker/DateRangePickerGroup.tsx
index a5039563b1..3d177b556d 100644
--- a/packages/ui/src/components/DateRangePicker/DateRangePickerGroup.tsx
+++ b/packages/ui/src/components/DateRangePicker/DateRangePickerGroup.tsx
@@ -53,8 +53,8 @@ export const DateRangePickerGroup = ({ dataSize }: { dataSize?: string }) => {
           )}
         </DateInput>
       </div>
-      <Button className={classes.button}>
-        <RiCalendarLine size={16} />
+      <Button className={classes.button} aria-label="Open calendar">
+        <RiCalendarLine size={16} aria-hidden="true" />
       </Button>
     </Group>
   );