Pushkal-Gupta opened a new pull request, #76096:
URL: https://github.com/apache/airflow/pull/76096
Three `aria-label` values were built with a template literal, so the
accessible
name stayed in English in every locale. A screen reader user on a translated
UI
hears these in English while the rest of the page is in their own language.
The three, and what they announced before this change:
| Where | Announced |
| --- | --- |
| `FilterPill` remove button | `Remove Paused filter` |
| `DateInput` clear button | `Clear start date` |
| `DagVersionIndicator` | `Version 7 indicator` |
The filter pill is the odd one. `IconButton` already derives a translated
`aria-label` from its `label` prop, but it spreads the caller's props after
its
own `aria-label={label}`, so the literal passed at the call site won. The
pill
therefore had a translated tooltip and an untranslated accessible name at the
same time. Passing `aria-label` deliberately is still useful, so the spread
order is left alone and only the value changes. The other two `IconButton`
call
sites that pass both props already pass translated values.
For the date input the literal was built from `field` and `inputType`, which
are `"start" | "end"` and `"date" | "time"`. The component already receives a
`label` that the caller translated for the visible text, and the four inputs
of
a date range get four distinct ones, so the clear button takes its name from
that and still says which input it clears.
Three new `en` keys, no other locale touched:
- `common:filters.clearInput`
- `common:filters.removeNamedFilter`
- `components:versionDetails.dagVersionIndicator`
### Closing the gap the existing check left open
#75965 fixed the fully quoted `aria-label` values and added a check that
keeps
them from coming back, but its pattern only matches a quoted string and its
comment says template literals were left for a follow-up. This is that
follow-up, so the check is widened to also match a value that is itself a
template literal.
Reverting only the three component files and running that check on its own
reports exactly the three and nothing else:
```
+ [
+ "components/FilterBar/FilterPill.tsx: aria-label={`Remove
${filter.config.label} filter`}",
+ "components/FilterBar/filters/DateInput.tsx: aria-label={`Clear ${field}
${inputType}`}",
+ "layouts/Details/Grid/VersionIndicator.tsx: aria-label={`Version
${dagVersionNumber} indicator`}",
+ ]
```
A template literal nested inside a larger expression is still allowed, so
``translate(`docs.${link.key}`)`` and the one ternary that appends an already
translated status are not flagged.
### Verification
Each of the three new component tests fails on main and passes with the
change.
Each one registers its own wording for the key it covers, so it can only pass
if the name came out of the locale bundle, rather than by happening to match
the
old English literal.
`eslint --quiet` and `tsc` both exit 0. vitest goes from 2296 tests in 269
files to 2299 in 272, which is the three new tests and nothing else.
No before and after screenshots: an accessible name is not painted, so
nothing
on screen changes. The tooltips, which are painted, are untouched.
---
##### Was generative AI tooling used to co-author this PR?
- [X] Yes (please specify the tool below)
Generated-by: Claude Code (Opus 5) following [the
guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
