♿️ feat: fix accessibility warnings, PWA icons, and form field attributes
- add DialogDescription (sr-only) to EventDialog to satisfy Radix UI aria-describedby requirement and silence the React console warning - add htmlFor/id pairing to the all-day checkbox label in EventDialog - add id and name attributes to all raw form fields (textarea, checkbox) in event-dialog to resolve biome a11y lint warnings (4 fields fixed) - add name attribute to hidden file inputs in image-picker and ics-file-picker - generate public/icon-192x192.png and public/icon-512x512.png so the PWA manifest no longer returns 404 for the app icons
This commit is contained in:
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
@@ -66,32 +67,45 @@ export const EventDialog = ({
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? "Edit Event" : "Add Event"}</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Fill in the event details below. Title and start date are required.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Input
|
||||
id="event-title"
|
||||
name="title"
|
||||
placeholder="Title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
<textarea
|
||||
id="event-description"
|
||||
name="description"
|
||||
className="border rounded p-2 w-full"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
id="event-location"
|
||||
name="location"
|
||||
placeholder="Location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
id="event-url"
|
||||
name="url"
|
||||
placeholder="URL"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
|
||||
|
||||
<label className="flex items-center gap-2 mt-2">
|
||||
<label className="flex items-center gap-2 mt-2" htmlFor="event-all-day">
|
||||
<input
|
||||
id="event-all-day"
|
||||
name="allDay"
|
||||
type="checkbox"
|
||||
checked={allDay}
|
||||
onChange={(e) => setAllDay(e.target.checked)}
|
||||
|
||||
@@ -44,6 +44,7 @@ export function IcsFilePicker({
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
name="ics-file"
|
||||
accept=".ics"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
|
||||
@@ -42,6 +42,7 @@ export function ImagePicker({
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
name="image-upload"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
|
||||
Reference in New Issue
Block a user