AOSSIE-Org / AOSSIE-Org/DebateAI

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

クローズ
#488 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
84
フォーク
198
平均マージ
2日 19時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。