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

feat: add onClose prop and accessibility improvements to SingleWeekPicker component
All checks were successful
Publish to npm / publish (push) Successful in 30s
Details

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 19:19:25 +11:00
parent 04dd1134ab
commit 91a370da01
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/SingleWeekPicker.tsx
View File

@ -52,6 +52,14 @@ export interface SingleWeekPickerProps {
weekYear: number,
weekNum: number
}) => void
/**
* User requires to close the panel without select a specific date. Note that the close button is not
* visible, but can be read by screen reader. The close button for the screen reader is only available
* when this prop is not `undefined`.
* @default undefined
*/
onClose?: () => void
}
/**
@ -62,7 +70,7 @@ export interface SingleWeekPickerProps {
*
* @param
*/
export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0' }: SingleWeekPickerProps) => {
export default ({ localization, mainColor = '#000000', accentColor = '#000000', reversedColor = '#ffffff', hoverColor = '#00000017', borderColor = '#e0e0e0', onClose }: SingleWeekPickerProps) => {
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
const [selectedWeek, setSelectedWeek] = useState<{ weekYear: number, weekNum: number }>(calculateWeekNum(new Date()))
@ -157,6 +165,7 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
</button>)}
</div>
</div>
{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
</div>
} else {
return <div className='datenel-component' role="dialog" aria-label="Week selection panel" id={`__datenel-${uniqueId}`}>
@ -186,7 +195,7 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
{calendarWeeks.map((week, index) => {
const isSelected = selectedWeek.weekYear === calculateWeekNum(week[0]).weekYear && selectedWeek.weekNum === calculateWeekNum(week[0]).weekNum
return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])}>
return <button className={`listitem ${isSelected ? 'active' : ''}`} key={index} onClick={() => selectWeek(week[0])} aria-label={`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization || navigator.language, { dateStyle: "full" })} to ${week[6].toLocaleString(localization || navigator.language, { weekday: 'long' })}, ${week[6].toLocaleString(localization || navigator.language, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`}>
{week.map(date => <div
className={`item date ${currentMonth !== date.getMonth() && 'extra-month'}`}
key={date.getDate()}
@ -198,6 +207,8 @@ export default ({ localization, mainColor = '#000000', accentColor = '#000000',
})}
</div>
</div>
{!!onClose && <button className='sr-only' onClick={onClose}>Close the panel</button>}
</div>
}
}