From 7b20bcbf14c15a82a1978b32a2100f76ddd54f58 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 19 Feb 2025 21:51:52 +1100
Subject: [PATCH] fix: improve accessibility by adding aria-labels to
 SingleDatePicker components

---
 src/components/SingleDatePicker.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index d6f7627..fca667d 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -79,7 +79,7 @@ export default ({ value, onSelect, localization }: Props) => {
 		else setCurrentMonth(currentMonth + 1)
 	}
 
-	if (selectMonth) return (<div className='datenel-component'>
+	if (selectMonth) return (<div className='datenel-component' aria-label="Date picker, you are now at month and year quick-select panel">
 		<div className='header'>
 			<button className='stepper' onClick={() => {
 				if (currentYear === 0) return
@@ -104,7 +104,7 @@ export default ({ value, onSelect, localization }: Props) => {
 			</button>)}
 		</div>
 	</div>)
-	else return (<div className='datenel-component'>
+	else return (<div className='datenel-component' aria-label="Date picker. Click Tab button to switch between months, or select a date">
 		<div className='header'>
 			<button className='stepper' onClick={skipToLastMonth} aria-label={`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><img src={LeftArrowIcon} /></button>
 			<button className='indicator' onClick={() => setSelectMonth(true)} aria-label={`You are now at ${new Date(currentYear, currentMonth).toLocaleString(localization || navigator.language, { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`}>