AOSSIE-Org / AOSSIE-Org/DebateAI

[BUG]: High Contrast Theme Has Missing Borders and Poor Visual Affordance on Profile Controls

Fermée
#488 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
84
Forks
198
Merge moyen
2 j 19 h
PR mergées (30 j)
30

Description

### Bug Description

Several interactive elements on the Profile page are not visually distinguishable in the High Contrast Theme.

After signing in and navigating to Profile, the following issues can be observed:

Saved Debate Transcripts
The Search topic or opponent... input field has no clearly visible border.
The All Outcomes and All Modes dropdowns also lack a clear border/visual affordance, making them appear less like clickable controls.

Ratings
The All Time dropdown does not have a visible border in High Contrast mode.
It appears more like plain text than an interactive dropdown.

Socials
The Twitter handle input field has no visible border in High Contrast mode.
This makes the field difficult to identify as an editable input.

These controls are clearly distinguishable in the Light Theme, but their visual affordance is lost in High Contrast mode.

### Steps to Reproduce

Sign in to DebateAI.
Navigate to the Profile section.
Enable the High Contrast Theme.
Scroll through the Profile page.
Check the Saved Debate Transcripts, Ratings, and Socials sections.
Compare these controls with their appearance in the Light Theme.

Expected Behavior

All interactive controls should remain visually distinguishable and clearly indicate their purpose in High Contrast mode.
Search input should have a visible border.
All Outcomes and All Modes should clearly appear as dropdown controls.
All Time should clearly appear as a dropdown.
Social input fields should have a visible border and clearly appear editable.

Actual Behavior
In High Contrast mode, several inputs and dropdowns lose their visible borders and appear similar to plain text, making them difficult to recognize as interactive elements.

### Logs and Screenshots

Below is the comparison between light and high contrast theme respectively

Image

Image

Image

Image

Image

Image

### Environment Details

_No response_

### Impact

Medium - Feature works but has issues

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Piste de recherche

Start at the Profile page and reproduce the issue in the High Contrast Theme, checking the Saved Debate Transcripts, Ratings, and Socials controls named in the report. Trace the styles applied to these inputs and dropdowns, then verify that each control has a visible border and clear interactive affordance in High Contrast mode while preserving the Light Theme appearance.

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

Évaluation

Stack technique
typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
65/100

Recevez les nouvelles issues par e-mail

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