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

fix: enhance accessibility in SingleDatePicker by adding roles and improving aria-labels

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-19 22:07:03 +11:00
parent 7b20bcbf14
commit 44ace7cddb
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/SingleDatePicker.tsx
View File

@ -79,7 +79,8 @@ export default ({ value, onSelect, localization }: Props) => {
else setCurrentMonth(currentMonth + 1) else setCurrentMonth(currentMonth + 1)
} }
if (selectMonth) return (<div className='datenel-component' aria-label="Date picker, you are now at month and year quick-select panel"> if (selectMonth) return (
<div className='datenel-component' role="dialog" aria-label="Date selection panel, you are now at month and year quick-select">
<div className='header'> <div className='header'>
<button className='stepper' onClick={() => { <button className='stepper' onClick={() => {
if (currentYear === 0) return if (currentYear === 0) return
@ -103,8 +104,10 @@ export default ({ value, onSelect, localization }: Props) => {
{new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })} {new Date(currentYear, index).toLocaleString(localization || navigator.language, { month: 'long' })}
</button>)} </button>)}
</div> </div>
</div>) </div>
else return (<div className='datenel-component' aria-label="Date picker. Click Tab button to switch between months, or select a date"> )
else return (
<div className='datenel-component' role="dialog" aria-label="Date selection panel">
<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.`}>
@ -112,7 +115,7 @@ export default ({ value, onSelect, localization }: Props) => {
</button> </button>
<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><img src={RightArrowIcon} /></button> <button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><img src={RightArrowIcon} /></button>
</div> </div>
<div className='calendar-view-body'> <div className='calendar-view-body' aria-live="polite">
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)} {l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
{dates.map(date => <button {dates.map(date => <button
@ -127,5 +130,6 @@ export default ({ value, onSelect, localization }: Props) => {
{date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>} {date.toDateString() === new Date().toDateString() && <svg xmlns="http://www.w3.org/2000/svg" className='today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>}
</button>)} </button>)}
</div> </div>
</div>) </div>
)
} }