livewire / livewire/flux

Date Picker placeholder text fails WCAG AA contrast in light mode

Open Beginner friendly
#2,776 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Blade
Stars
977
Forks
112
Avg merge
1d 4h
Merged PRs (30d)
21

Description

### Flux version

v2.17.1

### Livewire version

v4.4.2

### Tailwind version

v4.3.3

### Browser and Operating System

Google Chrome 147.0.0.0 on macOS 27.0

### What is the problem?

The default button trigger for `flux:date-picker` renders its placeholder with
`text-zinc-400`. In light mode this resolves to `#9f9fa9` on a white
background, producing a contrast ratio of 2.62:1.

axe 4.12.1 reports the serious `color-contrast` rule because normal-sized text
requires at least 4.5:1 under WCAG 2 AA. The failure affects the default
single-date and range placeholders. The same isolated reproduction does not
report a contrast violation in dark mode.

### Code snippets to replicate the problem

After completing the standard Flux Pro installation, render:

```blade

```

Steps:

1. Include the documented Flux assets without published component overrides.
2. Build the assets and clear compiled Blade views.
3. Open the page in light mode with no selected date.
4. Run axe with the WCAG A and AA tags.
5. Observe `color-contrast` on `[data-flux-date-picker-placeholder]`.

Rendered placeholder:

```html

Select a date range

```

axe 4.12.1 reports:

```text
color-contrast (serious)
Foreground: #9f9fa9
Background: #ffffff
Contrast ratio: 2.62:1
Expected: 4.5:1
```

### Screenshots/ screen recordings of the problem

Not included. The computed foreground and background colors, contrast ratio
and exact axe result are included above as searchable text.

### How do you expect it to work?

The default placeholder should meet WCAG AA contrast in light mode while
remaining visually distinguishable from a selected value. For example, a
darker placeholder token could be used for the light theme while preserving
the existing dark-theme treatment.

### Please confirm (incomplete submissions will not be addressed)

- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Search the date-picker component for [data-flux-date-picker-placeholder] and the text-zinc-400 class, then inspect the light and dark theme styles. Reproduce the issue with the documented flux:date-picker example and axe using WCAG A and AA tags; done means the light-mode placeholder reaches at least 4.5:1 contrast without regressing dark mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
tailwindcss
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.