Skip to content

Date Picker placeholder text fails WCAG AA contrast in light mode #2776

Description

@neylwalecki

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:

<flux:date-picker label="Reporting period" mode="range" />

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:

<span
    class="text-zinc-400 ... dark:text-zinc-400 ..."
    data-flux-date-picker-placeholder
>
    Select a date range
</span>

axe 4.12.1 reports:

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)

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions