diff --git a/docs/accessibility/form-labels-remaining.md b/docs/accessibility/form-labels-remaining.md new file mode 100644 index 0000000..76a3fea --- /dev/null +++ b/docs/accessibility/form-labels-remaining.md @@ -0,0 +1,16 @@ +# Form labels still to associate (#540) + +The create and edit payment link forms are done. These forms still have labels that are not +tied to their inputs, found with a search for `(null); + const menuId = useId(); + + function close() { + setOpen(false); + triggerRef.current?.focus(); + } return ( -
+
{ + if (e.key === "Escape" && open) close(); + }} + >
diff --git a/src/components/payment-links/CreatePaymentLinkForm.tsx b/src/components/payment-links/CreatePaymentLinkForm.tsx index b29acf3..ca7fe41 100644 --- a/src/components/payment-links/CreatePaymentLinkForm.tsx +++ b/src/components/payment-links/CreatePaymentLinkForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, type FormEvent } from "react"; +import { useId, useState, type FormEvent } from "react"; import { Modal } from "@/components/dashboard/Modal"; import { ActionButton } from "@/components/dashboard/WalletUI"; import { uploadImage, validateImage } from "@/lib/uploads"; @@ -31,6 +31,7 @@ export function CreatePaymentLinkForm({ const [imageUrl, setImageUrl] = useState(null); const [uploading, setUploading] = useState(false); const [error, setError] = useState(null); + const formId = useId(); async function handleImageChange(e: React.ChangeEvent) { const file = e.target.files?.[0]; @@ -84,7 +85,7 @@ export function CreatePaymentLinkForm({
-