ionic-team / ionic-team/ionic-framework

bug: ion-input clear icon color does not have enough contrast upon focus using keyboard (accessibility issue)

Aperta
#31,141 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
triage
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

When I have an ion-input with [clearInput]="true", a clear icon shows when the input has a value.
If you tab through the page and the focus is on the clear icon, the opacity changes to 0.5 which makes the icon a lighter color. That lighter color does not satisfy the WCAG AA contrast rule.
Also it makes the icon look disabled, which it is not.

### Expected Behavior

When the user tabs to get the focus on the clear icon, the contrast should be good and it should be visible that that button has the focus without seeming disabled.

### Steps to Reproduce

1. Go to https://ionicframework.com/docs/api/input#clear-options
2. Put the cursor on the value of the "Input with clear icon".
3. Tab to focus on the clear icon
You see the icon becomes a lighter gray, without enough contrast for WCAG AA accessibility, and making it look disabled instead of focused.

### Code Reproduction URL

https://ionicframework.com/docs/api/input#clear-options

### Ionic Info

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v24.15.0
npm : 11.12.1
OS : Windows 10

### Additional Information

In our application we always show a focus ring to indicate focus like described in https://web.dev/articles/style-focus.
I would like to be able to configure the ion-input to achieve that focus ring, by being allowed to specify the opacity (to keep it at 1), border and outline for the clear icon upon focus. Or ideally, that ion-input would by default leave the opacity at 1 and add
border: 1px solid black;
outline: 2px solid white;
upon focus on the clear button.
And while I'm discussing AA accessibility: the aria-label for the clear-icon is fixed as "reset", I would like a way to translate or rephrase that.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with the ion-input clear-options example linked in the issue and reproduce the keyboard focus behavior on the clear icon. Trace the ion-input clear-button styling and label handling, then verify that the focused icon meets WCAG AA contrast, remains visibly enabled, and that any label change is covered by the requested accessibility behavior.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
accessibility, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.