Skip to content

feat: Update dropdown menu styling with dark theme and WCAG AA compliance #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Update dropdown menu styling with dark theme and WCAG AA compliance #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 134 additions & 1 deletion styles-optimized.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,33 @@ body::before {

.control-group select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
Comment on lines 502 to +506
Copy link

@gemini-code-assist gemini-code-assist bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Thanks for improving the focus states for accessibility. I have two points of feedback on this:

  1. Accessibility Concern: The PR description mentions WCAG AA compliance for focus indicators (3:1 contrast ratio). My calculations suggest the box-shadow color rgba(255, 255, 255, 0.1) has a contrast ratio of about 1.5:1 against the dark page background, which is below the required 3:1. To ensure compliance and improve visibility, I recommend increasing the opacity.

  2. Code Duplication: These focus styles are repeated for other elements like #preset-select:focus and .api-key-container input:focus. To improve maintainability, it would be best to group these selectors into a single rule and remove the duplicated style blocks.

Here's a suggestion to improve the contrast. Please apply this change and also refactor the duplicated focus styles throughout the file.

Suggested change
.control-group select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.control-group select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}


/* Dark Theme Dropdown Option Styling - WCAG AA Compliant */
.control-group select option {
background: #1a1a24;
color: var(--text-primary);
padding: 10px 14px;
}

.control-group select option:hover,
.control-group select option:focus {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}

.control-group select option:checked {
background: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
font-weight: 600;
}

.control-group select option:disabled {
background: rgba(255, 255, 255, 0.02);
color: var(--text-tertiary);
cursor: not-allowed;
}
Comment on lines +508 to 531
Copy link

@gemini-code-assist gemini-code-assist bot Oct 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

These new styles for dropdown options are great for consistency. However, I've noticed a significant amount of style duplication for both select and option elements across the file.

For example:

  • The styles for option (and its :hover, :focus, :checked states) are repeated for .control-group select, #preset-select, .api-key-container select, and .library-filters select.
  • The base styles for the select element itself (like the custom arrow background-image, appearance, cursor, etc.) are also duplicated across these same selectors.

To improve maintainability and reduce the file size, I strongly recommend consolidating these into shared rulesets. You could group the selectors for common styles, and then have separate, smaller rules for any specific overrides (like the padding on #preset-select option).

Also, the :disabled state is only defined for .control-group select option. It would be good to apply this consistently to the other dropdowns as well if that's the intended behavior.


#preset-select {
Expand All @@ -519,6 +545,36 @@ body::before {
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
transition: var(--transition);
}

#preset-select:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}

#preset-select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

#preset-select option {
background: #1a1a24;
color: var(--text-primary);
padding: 8px 10px;
}

#preset-select option:hover,
#preset-select option:focus {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}

#preset-select option:checked {
background: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
font-weight: 600;
}

#preset-name-input {
Expand Down Expand Up @@ -1264,9 +1320,44 @@ audio {
.api-key-container input:focus,
.api-key-container select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.api-key-container select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
transition: var(--transition);
}

.api-key-container select:hover {
background-color: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}

.api-key-container select option {
background: #1a1a24;
color: var(--text-primary);
padding: 10px 14px;
}

.api-key-container select option:hover,
.api-key-container select option:focus {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}

.api-key-container select option:checked {
background: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
font-weight: 600;
}

.api-key-actions {
display: flex;
gap: 10px;
Expand Down Expand Up @@ -1518,6 +1609,48 @@ audio {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
font-size: 13px;
transition: var(--transition);
}

.library-filters input:focus,
.library-filters select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
}

.library-filters select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
}

.library-filters select:hover {
background-color: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}

.library-filters select option {
background: #1a1a24;
color: var(--text-primary);
padding: 10px 14px;
}

.library-filters select option:hover,
.library-filters select option:focus {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}

.library-filters select option:checked {
background: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
font-weight: 600;
}

.library-filters input {
Expand Down