AOSSIE-Org / AOSSIE-Org/DebateAI

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

已关闭
#488 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
84
派生
198
平均合并
2 天 19 小时
30 天内合并 PR
30

描述

### 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

贡献指南

这个仓库没有索引到贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
65/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。