Astrian/datenel-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: improve accessibility by adding aria-labels to SingleDatePicker components

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-19 21:51:52 +11:00
parent b17a95c47b
commit 7b20bcbf14
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/SingleDatePicker.tsx
View File

@ -79,7 +79,7 @@ export default ({ value, onSelect, localization }: Props) => {
else setCurrentMonth(currentMonth + 1) 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'> <div className='header'>
<button className='stepper' onClick={() => { <button className='stepper' onClick={() => {
if (currentYear === 0) return if (currentYear === 0) return
@ -104,7 +104,7 @@ export default ({ value, onSelect, localization }: Props) => {
</button>)} </button>)}
</div> </div>
</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'> <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='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.`}> <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.`}>