eschutho opened a new pull request, #42081:
URL: https://github.com/apache/superset/pull/42081
## Summary
- The "Name" field in `CssTemplateModal` rendered its visible label as a
plain `<div className="control-label">`, with no `htmlFor`/`id`, `aria-label`,
or `aria-labelledby` connecting it to the adjacent `<Input>`. Screen readers
announce the field with no accessible name.
- Changed the `<div>` to a `<label htmlFor="css-template-name">` and added
`id="css-template-name"` to the `Input`, matching the existing pattern already
used elsewhere in this codebase (e.g. `TagModal.tsx`,
`DuplicateDatasetModal.tsx`).
- Added a regression test asserting the input is reachable via
`screen.findByLabelText('Name*')`.
**WCAG 2.1 SC 4.1.2 (Name, Role, Value) — Level A.**
Behavior is unchanged — this only adds a programmatic label association; no
visual or functional change.
**Known follow-up (out of scope for this PR):** the `css` field directly
below has the identical issue (its label `<div>` isn't associated with the code
editor). Left out of this PR since associating a label with the Ace editor
widget is a different pattern (likely `aria-labelledby` on the editor container
rather than a simple `htmlFor`/`id` pair) and deserves its own focused PR.
## Test plan
- [x] `CssTemplateModal.test.tsx` — added `associates the Name label with
its input` test asserting `screen.findByLabelText('Name*')` resolves to the
input; all 4 tests in the file pass.
- [ ] Manual: open the "Add CSS template" or "Edit CSS template" modal, tab
to the Name field with a screen reader active, and verify it announces "Name,
required, edit text" (or equivalent) instead of no label.
--
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]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
