Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Change Proposal: Read-only styling for Switch, Checkbox, and Radio

Ouverte
  • Quelque chose ne va pas ?
#331 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 2 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
À clarifier
Activité
Active
Stack technique
react, typescript
Domaine
accessibility, frontend

Piste de recherche

Start by reviewing issue #272 and PR #328 to understand the existing read-only treatment for text-like controls, then locate the Switch, Checkbox, and Radio implementations. Done means the three controls support the proposed read-only interface, remain focusable and announced appropriately, prevent changes, and have an agreed visual treatment with coverage for these behaviors.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

needs-triage

What is being proposed?

A read-only variant for MuiSwitch, MuiCheckbox, and MuiRadio, distinct from disabled.

Why is this needed?

Follow-up from #272 / PR #328, which gave TextField/Select/Autocomplete a dedicated read-only look.

These three controls have no native readOnly support in MUI (unlike text-like inputs), and they currently have only disabled, which mutes the value and drops the control from the tab order even when the value itself still needs to be shown and announced, with no read-only treatment at all.

What will change?

  • Behaviour: enforce read-only via controlled checked + no-op onChange, since native readonly on checkbox/radio inputs doesn't block clicks
  • Accessibility: aria-readonly instead of aria-disabled, keeping the control focusable/announced
  • Visual: likely closer to full saturation than the muted --ds-surface-readonly wash used for text inputs, since the value is meaningful and being displayed, not unavailable

Interface changes (if any)

<Switch readOnly checked={value} />
<Checkbox readOnly checked={value} />
<Radio readOnly checked={value} />

Breaking change?

  • No

Next steps

A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.

Langage dominant
TypeScript
Étoiles
9
Forks
3
Merge moyen
6 j 7 h
PR mergées (30 j)
20

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de DiamondLightSource/sci-react-ui

Toutes les issues de DiamondLightSource/sci-react-ui

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.