pico
pico copied to clipboard
Published
20 hours ago •
picocss
picocss
Fix: Make calendar icon for input[type="date"][aria-invalid] clickable on Chrom*
On Chrom*, the calendar icon is currently not clickable (in order to open the calendar to pick a new date), if the input field (i.e. of type="date") has the aria-invalid attribute.
Minimal file to display the bug:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
<title>Date Input Field Bug</title>
</head>
<body>
<main>
<h1>Date Input Field Bug</h1>
<p>Calendar icon is not clickable when <code>aria-invalid</code> attribute is present on Chrom*.</p>
<small>Note: on Safari and Firefox it seems to work as expected.</small>
<h2>Icon clickable as expected</h2>
<input type="date" id="date" name="date">
<h2>Icon NOT clickable</h2>
<input type="date" id="date" name="date" aria-invalid="true">
<input type="date" id="date" name="date" aria-invalid="false">
</main>
</body>
</html>
@lucaslarroche No worries. 👍
Should I still rebase this branch to solve the conflicts shown above, or is this PR not relevant?
Cheers.
Thanks for the find.
I hadn't had time to test. I just did. Sorry for the delay.
I'm going to merge into dev, then change the syntax from :not([type="A"]):not([type="A"]) to :not([type="A"], [type="B"]) and add all the other types: datetime-local, month, time, week