AOSSIE-Org / AOSSIE-Org/DebateAI

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

Closed
#488 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
84
Forks
198
Avg merge
2d 19h
Merged PRs (30d)
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

Contributor guide

No contributing guide indexed for this repository

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.