adobe / adobe/react-spectrum

Extending aria-label in CalendarCell

Open
#9,735 2 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Image

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.