AOSSIE-Org / AOSSIE-Org/DebateAI

[BUG]: Tournament Creation Inputs Have No Visible Borders in High Contrast Theme

Closed Beginner friendly
#490 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

The Create New Tournament form inside the Tournament Arena section has a visual accessibility issue in the High Contrast Theme.

In the Light and Dark themes, the form controls have clearly visible borders, making it easy for users to distinguish the input fields and dropdown from the surrounding content.

However, in the High Contrast Theme, the borders around the following controls are not visible:
Tournament Name input
Date input
Max Participants dropdown
Description textarea

As a result, the controls blend into the surrounding background and do not clearly appear as interactive form fields.

### Steps to Reproduce

Sign in to DebateAI.
Navigate to the Tournaments section.
Open the Tournament Arena.
Navigate to Create New Tournament.
Enable the High Contrast Theme.
Observe the form input fields and dropdown.
Compare their appearance with the Light or Dark Theme.

Expected Behavior
All form controls should have clearly visible borders in the High Contrast Theme, consistent with their behavior in the Light and Dark themes.
The borders should clearly distinguish each input field, textarea, and dropdown from the surrounding background.

Actual Behavior
In the High Contrast Theme, the borders of the form controls are not clearly visible, causing the fields to blend into the background and making them difficult to identify as interactive elements.

### Logs and Screenshots

High Contrast Theme:

Image

Light Theme:

Image

Dark Theme:

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 by locating the Tournament Arena's Create New Tournament form and the styles or theme handling for its four named controls: tournament name, date, max participants, and description. Reproduce the form in the High Contrast Theme, compare it with Light and Dark themes, and verify that each control has a clearly visible border without regressing the other themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.