Extending aria-label in CalendarCell
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
Allow for some way to extend the aria-label of a CalendarCell without using the `render` prop.
### 🤔 Expected Behavior?
A prop or something else for adding extra strings to the aria-label of a CalendarCell.
### 😯 Current Behavior
Currently the only way i found was to override the render function of the CalendarCell but that would mean re-implementing all the aria-label translations for all the different states a cell can be in.
### 💁 Possible Solution
Maybe add an additional prop to add some extra context to the aria label? That could be inserted before the "current"/"First available date" text?
```ts
extraAriaLabelContext?: string;
`Wednesday, February 5, 2020, ${extraAriaLabelContext} selected`
`Thursday, March 5, 2026, ${extraAriaLabelContext} First available date`
```
That would allow for a string like:
`Wednesday, February 5, 2020, 19 euro, selected`
### 🔦 Context
I'm trying to add additional data in each CalendarCell. More precisely, prices.
### 💻 Examples
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start at CalendarCell and inspect how its current render prop produces aria-label text across the different cell states. Determine how an extension can preserve the existing translations while adding context such as prices, then verify the resulting labels for selected and first-available dates.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100