Skip to content

Fix dropdown visibility contrast issue #397

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
hussainjamal760 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fix dropdown visibility contrast issue #397

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
20b3160
Fix dropdown visibility contrast issue
hussainjamal760 May 8, 2026
7e3b905
Merge branch 'main' into fix-dropdown-contrast-issue
hussainjamal760 May 8, 2026
05a8264
Potential fix for pull request finding
hussainjamal760 May 9, 2026
084df87
Merge branch 'main' into fix-dropdown-contrast-issue
hussainjamal760 May 9, 2026
81473a0
fix: improve dark mode select dropdown accessibility
hussainjamal760 May 9, 2026
12511cf
Potential fix for pull request finding
hussainjamal760 May 9, 2026
85739ec
fix: improve dark mode
hussainjamal760 May 9, 2026
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
32 changes: 19 additions & 13 deletions ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Info } from "lucide-react";
import { Info, ChevronDown } from "lucide-react";
import type { Telemetry } from "@/types/javaagent";

interface ConfigurationSelectorProps {
Expand Down Expand Up @@ -53,18 +53,24 @@ export function ConfigurationSelector({
>
Configuration
</label>
<select
id="config-select"
value={selectedWhen}
onChange={(e) => onWhenChange(e.target.value)}
className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 min-w-0 flex-1 cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none sm:min-w-[200px] sm:flex-none"
>
{telemetry.map((t) => (
<option key={t.when} value={t.when}>
{getConfigLabel(t.when)}
</option>
))}
</select>
<div className="relative flex-1 sm:flex-none">
<select
id="config-select"
value={selectedWhen}
onChange={(e) => onWhenChange(e.target.value)}
className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark] sm:min-w-[200px]"
>
{telemetry.map((t) => (
<option key={t.when} value={t.when}>
{getConfigLabel(t.when)}
</option>
))}
</select>
<ChevronDown
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
</div>
</div>
</div>
</div>
Expand Down
92 changes: 55 additions & 37 deletions ...plorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import { Info } from "lucide-react";
import { Info, ChevronDown } from "lucide-react";
import type { VersionInfo } from "@/types/javaagent";

interface VersionSelectorPanelProps {
Expand Down Expand Up @@ -59,18 +59,24 @@ export function VersionSelectorPanel({
>
From
</label>
<select
id="from-version-select"
value={fromVersion}
onChange={(e) => onFromVersionChange(e.target.value)}
className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
>
{versions.map((v) => (
<option key={v.version} value={v.version}>
{v.version} {v.is_latest ? "(latest)" : ""}
</option>
))}
</select>
<div className="relative">
<select
id="from-version-select"
value={fromVersion}
onChange={(e) => onFromVersionChange(e.target.value)}
className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
>
Comment on lines +63 to +68
{versions.map((v) => (
<option key={v.version} value={v.version}>
{v.version} {v.is_latest ? "(latest)" : ""}
</option>
))}
Comment thread
hussainjamal760 marked this conversation as resolved.
</select>
<ChevronDown
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
</div>
</div>

{/* To version selector */}
Expand All @@ -81,18 +87,24 @@ export function VersionSelectorPanel({
>
To
</label>
<select
id="to-version-select"
value={toVersion}
onChange={(e) => onToVersionChange(e.target.value)}
className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
>
{versions.map((v) => (
<option key={v.version} value={v.version}>
{v.version} {v.is_latest ? "(latest)" : ""}
</option>
))}
</select>
<div className="relative">
<select
id="to-version-select"
value={toVersion}
onChange={(e) => onToVersionChange(e.target.value)}
className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
>
Comment on lines +91 to +96
{versions.map((v) => (
<option key={v.version} value={v.version}>
{v.version} {v.is_latest ? "(latest)" : ""}
</option>
))}
</select>
<ChevronDown
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
</div>
</div>
</div>

Expand All @@ -104,18 +116,24 @@ export function VersionSelectorPanel({
>
Configuration
</label>
<select
id="when-condition-select"
value={whenCondition}
onChange={(e) => onWhenConditionChange(e.target.value)}
className="border-primary/20 bg-primary/5 text-foreground hover:border-primary/40 hover:bg-primary/10 focus:ring-primary/50 focus:border-primary/50 w-full cursor-pointer rounded-lg border-2 px-4 py-2.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:ring-2 focus:outline-none"
>
{availableConditions.map((c) => (
<option key={c} value={c}>
{c === "default" ? "Default" : c}
</option>
))}
</select>
<div className="relative">
<select
id="when-condition-select"
value={whenCondition}
onChange={(e) => onWhenConditionChange(e.target.value)}
className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
>
{availableConditions.map((c) => (
<option key={c} value={c}>
{c === "default" ? "Default" : c}
</option>
))}
</select>
<ChevronDown
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
</div>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion ecosystem-explorer/src/features/java-agent/components/version-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function VersionSelector({
id={id}
value={currentVersion}
onChange={(e) => onVersionChange(e.target.value)}
className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none"
className="border-border/60 bg-background/80 focus:border-primary/50 focus:ring-primary/20 cursor-pointer appearance-none rounded-lg border py-1.5 pr-8 pl-3 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]"
>
{versions.map((v) => (
<option key={v.version} value={v.version}>
Expand Down
4 changes: 2 additions & 2 deletions ...stem-explorer/src/features/java-agent/configuration/components/controls/control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@
* touches one place.
*/
export const INPUT_CLASS =
"w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
"w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";

/**
* Compact variant used by list-of-input controls (string-list, number-list)
* where each row needs a tighter vertical rhythm than a standalone input.
*/
export const LIST_INPUT_CLASS =
"w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
"w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2 text-sm backdrop-blur-sm transition-all duration-200 placeholder:text-muted-foreground/50 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
51 changes: 30 additions & 21 deletions ...tem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
* limitations under the License.
*/
import { useId } from "react";
import { ChevronDown } from "lucide-react";
import type { SelectNode } from "@/types/configuration";
import { useConfigurationBuilder } from "@/hooks/use-configuration-builder";
import { ControlWrapper } from "./control-wrapper";
Expand All @@ -26,7 +27,7 @@ interface SelectControlProps {
}

const SELECT_CLASS =
"w-full rounded-lg border border-border/60 bg-background/80 px-4 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20";
"w-full appearance-none rounded-lg border border-border/60 bg-background/80 px-4 pr-10 py-2.5 text-sm backdrop-blur-sm transition-all duration-200 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:[color-scheme:dark]";
Comment thread
hussainjamal760 marked this conversation as resolved.
Outdated

export function SelectControl({ node, path, value, onChange }: SelectControlProps) {
const id = useId();
Expand All @@ -41,26 +42,34 @@ export function SelectControl({ node, path, value, onChange }: SelectControlProp
descriptionId={node.description ? descId : undefined}
error={error}
>
<select
id={id}
value={value ?? ""}
aria-describedby={node.description ? descId : undefined}
aria-required={node.required || undefined}
onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
onBlur={() => validateField(path)}
className={SELECT_CLASS}
>
{node.nullable ? (
<option value="">{node.nullBehavior ?? node.defaultBehavior ?? "Default"}</option>
) : value === null ? (
<option value="" disabled hidden />
) : null}
{node.enumOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.value}
</option>
))}
</select>
<div className="relative">
<select
id={id}
value={value ?? ""}
aria-describedby={node.description ? descId : undefined}
aria-required={node.required || undefined}
onChange={(e) => onChange(path, e.target.value === "" ? null : e.target.value)}
onBlur={() => validateField(path)}
className={SELECT_CLASS}
>
{node.nullable ? (
<option value="">
{node.nullBehavior ?? node.defaultBehavior ?? "Default"}
</option>
) : value === null ? (
<option value="" disabled hidden />
) : null}
{node.enumOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.value}
</option>
))}
Comment thread
hussainjamal760 marked this conversation as resolved.
</select>
<ChevronDown
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2"
aria-hidden="true"
/>
</div>
</ControlWrapper>
);
}
Loading