AOSSIE-Org / AOSSIE-Org/DebateAI
[BUG]: High Contrast Theme Has Missing Borders and Poor Visual Affordance on Profile Controls
- Vorherrschende Sprache
- TypeScript
- Sterne
- 84
- Forks
- 198
- Ø Merge
- 2 T. 19 Std.
- Gemergte PRs (30 T.)
- 30
Beschreibung
### 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
### 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
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
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.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Aktiv
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 65/100