🎨 Palette: [UX improvement] Add delete confirmation and input ARIA labels

.Jules/palette.md

@@ -1,3 +1,6 @@
 ## 2024-04-25 - [Semantic HTML for Dashboard Cards]
 **Learning:** Found an accessibility issue pattern specific to this app where dashboard navigation cards were created using `<div>` tags with `onclick` handlers, relying on JavaScript for navigation. This breaks native keyboard navigation, screen reader support, and standard browser actions (like opening in a new tab). Also, using `alt` text identical to visible text in cards causes redundant screen reader announcements.
-**Action:** Always prefer semantic HTML elements (like `<a>` for navigation links) over `<div>`s with JavaScript handlers. For images in links where the link text already describes the destination, use `alt=""` for the image. Ensure interactive elements have distinct focus states using `:focus-visible`.
+**Action:** Always prefer semantic HTML elements (like `<a>` for navigation links) over `<div>`s with JavaScript handlers. For images in links where the link text already describes the destination, use `alt=""` for the image. Ensure interactive elements have distinct focus states using `:focus-visible`.
+## 2024-07-05 - [Add missing aria-label attributes to placeholder-reliant forms]
+**Learning:** Found an accessibility issue pattern specific to this app where many forms heavily rely on `placeholder` attributes instead of visible `<label>` tags. This pattern makes the interface difficult for screen reader users to navigate as placeholder text is not always reliably read as a label by assistive technologies.
+**Action:** When working on form inputs (`<input>`, `<select>`, `<textarea>`) that lack visible `<label>` elements, always add descriptive `aria-label` attributes to ensure they remain accessible without needing to alter the existing visual layout.

frontend/payment-management.html

@@ -24,25 +24,25 @@ <h1>Payment Management</h1>
         <section id="payment-section" class="mt-20">
             <h2>Record Payment</h2>
             <form id="payment-form">
-                <input type="number" id="payment-amount" placeholder="Payment Amount" required>
-                <input type="date" id="payment-date" required>
+                <input type="number" id="payment-amount" placeholder="Payment Amount" aria-label="Payment Amount" required>
+                <input type="date" id="payment-date" aria-label="Payment Date" required>
 
-                <select id="labor-select" required>
+                <select id="labor-select" aria-label="Select Labor" required>
                     <option value="">Select Labor</option>
                     <!-- Labor options will be dynamically loaded here -->
                 </select>
 
-                <select id="site-select" required>
+                <select id="site-select" aria-label="Select Site" required>
                     <option value="">Select Site</option>
                     <!-- Site options will be dynamically loaded here -->
                 </select>
-                <input type="text" id="material-name" placeholder="Material (Optional)">
-                <input type="text" id="payment-description" placeholder="Description (Optional)">
+                <input type="text" id="material-name" placeholder="Material (Optional)" aria-label="Material (Optional)">
+                <input type="text" id="payment-description" placeholder="Description (Optional)" aria-label="Description (Optional)">
                 <button type="submit" id="save-payment-btn" class="btn btn-primary">Add Payment</button>
                 <button type="button" id="close-payment-form" class="btn btn-secondary">Close</button>
             </form>
 
-            <input type="text" id="search-payment" placeholder="Search payments..." class="input-search">
+            <input type="text" id="search-payment" placeholder="Search payments..." aria-label="Search payments" class="input-search">
             <table id="payment-list">
                 <thead>
                     <tr>

frontend/payment-management.js

@@ -159,13 +159,17 @@ async function addPayment(paymentData) {
 
 // Delete a payment
 async function deletePayment(paymentId) {
+    if (!confirm('Are you sure you want to delete this payment?')) return;
+
     const response = await fetch(`/payments/${paymentId}`, {
         method: 'DELETE'
     });
 
     if (response.ok) {
+        alert('Payment deleted successfully!');
         await loadPayments(); // Refresh payments after deleting
     } else {
+        alert('Failed to delete payment.');
         console.error('Failed to delete payment:', await response.json());
     }
 }