🎨 Palette: Add aria-label attributes to form elements for screen reader accessibility

.jules/palette.md

@@ -3,3 +3,9 @@
 **Learning:** When unifying basic UI across multiple static HTML and CSS files, adding a central set of CSS variables (`:root`) alongside a modern grid framework significantly improves consistency and maintainability. Playwright provides a reliable mechanism to ensure the static DOM files are syntax-error-free and structure looks correct via screenshots during headless local test runs.
 
 **Action:** Rebuilt the frontend CSS and modified static files to inject modern typography (`Inter`), variables for colors, spacing, radius, and standard input/button styling. Verified all `file://` URLs headless using `playwright`.
+
+## 2024-11-20 - Accessible Form Inputs
+
+**Learning:** When using placeholders instead of visible `<label>` tags for form inputs (which is common for simpler or compact UIs), screen readers may fail to announce the field's purpose correctly if `aria-label` attributes are missing. However, these attributes should not be applied to hidden inputs (`<input type="hidden">`), as this can confuse screen readers by presenting interactive elements that are not actually accessible to the user.
+
+**Action:** Added `aria-label` attributes to all visible inputs and select menus across the application's forms to ensure proper accessibility without altering the existing visual layout.

frontend/index.html

@@ -17,13 +17,13 @@ <h1>Labour Management</h1>
 
         <!-- Labour Form -->
         <form id="labour-form">
-            <input type="text" id="name" placeholder="Name" class="form-control mb-2" required>
-            <input type="number" id="age" placeholder="Age" class="form-control mb-2" required>
-            <select id="gender" class="form-select mb-2">
+            <input type="text" id="name" placeholder="Name" aria-label="Name" class="form-control mb-2" required>
+            <input type="number" id="age" placeholder="Age" aria-label="Age" class="form-control mb-2" required>
+            <select id="gender" aria-label="Select Gender" class="form-select mb-2">
                 <option value="M">Male</option>
                 <option value="F">Female</option>
             </select>
-            <input type="number" id="daily-wage" placeholder="Daily Wage" class="form-control mb-2" required>
+            <input type="number" id="daily-wage" placeholder="Daily Wage" aria-label="Daily Wage" class="form-control mb-2" required>
             <button type="submit" class="btn btn-primary">Add Labour</button>
         </form>
 

frontend/inventory-management.html

@@ -25,13 +25,13 @@ <h1>Materials Management</h1>
         <section id="site-section">
             <h2>Sites</h2>
             <form id="site-form">
-                <input type="text" id="site-name" placeholder="Site Name" required>
-                <input type="text" id="site-location" placeholder="Site Location" required>
+                <input type="text" id="site-name" placeholder="Site Name" aria-label="Site Name" required>
+                <input type="text" id="site-location" placeholder="Site Location" aria-label="Site Location" required>
                 <button type="submit" id="save-site-btn" class="btn btn-success">Add Or Update Site</button>
                 <button type="button" id="close-site-form" class="btn btn-secondary">Close</button>
             </form>
 
-            <input type="text" id="search-site" placeholder="Search sites by name..." class="input-search">
+            <input type="text" id="search-site" placeholder="Search sites by name..." aria-label="Search sites by name" class="input-search">
             <table id="site-list">
                 <thead>
                     <tr>
@@ -49,9 +49,9 @@ <h2>Sites</h2>
         <section id="material-section" class="mt-20">
             <h2>Materials</h2>
             <form id="material-form">
-                <input type="text" id="material-name" placeholder="Material Name" required>
-                <input type="number" id="material-quantity" placeholder="Quantity" required>
-                <select id="material-unit" required>
+                <input type="text" id="material-name" placeholder="Material Name" aria-label="Material Name" required>
+                <input type="number" id="material-quantity" placeholder="Quantity" aria-label="Quantity" required>
+                <select id="material-unit" aria-label="Select Unit" required>
                     <option value="">Select Unit</option>
                     <option value="kg">Kilogram (kg)</option>
                     <option value="liter">Liter</option>
@@ -78,12 +78,12 @@ <h2>Materials</h2>
                     <option value="nos">Nos</option>
                     <option value="pieces/box">Pieces/Box</option>
                 </select>
-                <select id="material-site" required>
+                <select id="material-site" aria-label="Select Site" required>
                     <option value="">Select Site</option>
                     <!-- Sites will be dynamically loaded here -->
                 </select>
-                <input type="date" id="arrival-date" required>
-                <select id="transport-type" required>
+                <input type="date" id="arrival-date" aria-label="Arrival Date" required>
+                <select id="transport-type" aria-label="Select Transport Type" required>
                     <option value="">Select Transport Type</option>
                     <option value="pickup">Pickup</option>
                     <option value="truck">Truck</option>
@@ -94,7 +94,7 @@ <h2>Materials</h2>
                 <button type="button" id="close-material-form" class="btn btn-secondary">Close</button>
             </form>
 
-            <input type="text" id="search-material" placeholder="Search materials by name..." class="input-search">
+            <input type="text" id="search-material" placeholder="Search materials by name..." aria-label="Search materials by name" class="input-search">
             <table id="material-list">
                 <thead>
                     <tr>

frontend/labor-management.html

@@ -37,15 +37,15 @@ <h1>Labor Management</h1>
         <section id="labor-details">
             <h2>Manage Laborers</h2>
             <form id="labor-form" class="form-group">
-                <input type="text" id="labor-name" placeholder="Laborer Name" required>
-                <input type="number" id="labor-age" placeholder="Age" required>
-                <select id="labor-gender" required>
+                <input type="text" id="labor-name" placeholder="Laborer Name" aria-label="Laborer Name" required>
+                <input type="number" id="labor-age" placeholder="Age" aria-label="Age" required>
+                <select id="labor-gender" aria-label="Select Gender" required>
                     <option value="">Select Gender</option>
                     <option value="M">Male</option>
                     <option value="F">Female</option>
                 </select>
-                <input type="number" id="labor-wage" placeholder="Daily Wage" required>
-                <input type="date" id="labor-date" placeholder="Date of Joining" required>
+                <input type="number" id="labor-wage" placeholder="Daily Wage" aria-label="Daily Wage" required>
+                <input type="date" id="labor-date" placeholder="Date of Joining" aria-label="Date of Joining" required>
                 <input type="hidden" id="labor-id">
                 <div class="btn-group">
                     <button type="submit" id="save-laborer-btn" class="btn btn-success">Add Laborer</button>
@@ -56,7 +56,7 @@ <h2>Manage Laborers</h2>
             <!-- Search and Heading in one line -->
             <div class="header-row">
                 <h3>Laborers List</h3>
-                <input type="text" id="search-bar" placeholder="Search by name..." class="input-search">
+                <input type="text" id="search-bar" placeholder="Search by name..." aria-label="Search by name" class="input-search">
             </div>
 
             <table id="labor-list">
@@ -84,7 +84,7 @@ <h3>Laborers List</h3>
         <section id="attendance-history">
             <div class="header-row">
                 <h2>Attendance History</h2>
-                <input type="text" id="search-bar-labor" placeholder="Search by labor name..." class="input-search">
+                <input type="text" id="search-bar-labor" placeholder="Search by labor name..." aria-label="Search by labor name" class="input-search">
             </div>
             <table id="attendance-list">
                 <thead>
@@ -119,13 +119,13 @@ <h2>Attendance History</h2>
             <h3>Record Attendance</h3>
             <form id="attendance-form">
                 <input type="hidden" id="attendance-labor-id">
-                <input type="date" id="attendance-date" required>
-                <select id="attendance-status" required>
+                <input type="date" id="attendance-date" aria-label="Attendance Date" required>
+                <select id="attendance-status" aria-label="Attendance Status" required>
                     <option value="Present">Present</option>
                     <option value="Absent">Absent</option>
                 </select>
-                <input type="number" id="hours-worked" placeholder="Hours Worked" required>
-                <input type="text" id="attendance-site-name" placeholder="Site Name" required>
+                <input type="number" id="hours-worked" placeholder="Hours Worked" aria-label="Hours Worked" required>
+                <input type="text" id="attendance-site-name" placeholder="Site Name" aria-label="Site Name" required>
                 <button type="submit" class="btn btn-success">Save Attendance</button>
             </form>
             <button id="close-attendance-modal" class="btn btn-secondary">Close</button>

frontend/login.html

@@ -64,11 +64,11 @@ <h2 class="text-center mb-4 font-weight-bold" style="color: var(--text-main);">A
                         <form id="login-form">
                             <div class="mb-4">
                                 <label for="username" class="form-label fw-bold" style="color: var(--text-muted);">Username</label>
-                                <input type="text" id="username" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
+                                <input type="text" id="username" aria-label="Username" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
                             </div>
                             <div class="mb-4">
                                 <label for="password" class="form-label fw-bold" style="color: var(--text-muted);">Password</label>
-                                <input type="password" id="password" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
+                                <input type="password" id="password" aria-label="Password" class="form-control" style="border-radius: var(--radius-md); padding: 0.75rem 1rem;" required>
                             </div>
                             <button type="submit" class="btn btn-primary w-100 py-2" style="border-radius: var(--radius-md); font-weight: 600;">Sign In</button>
                         </form>

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 Name">
+                <input type="text" id="payment-description" placeholder="Description (Optional)" aria-label="Payment Description">
                 <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>