Skip to content

🎨 Palette: [Add aria-labels for accessibility] #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shadowcoder8 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [Add aria-labels for accessibility] #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-10-24 - Accessible Form Inputs

**Learning:** When HTML forms rely heavily on `placeholder` attributes instead of visible `<label>` tags to save space, screen readers cannot properly announce the input purpose. Adding `aria-label` attributes to `<input>` and `<select>` elements significantly improves accessibility. However, applying `aria-label` to hidden inputs (`<input type="hidden">`) is an anti-pattern as it can cause screen readers to incorrectly interpret them as interactive elements.

**Action:** Always add `aria-label` attributes to visible form elements that lack explicit visible labels, deriving the label text from the placeholder or element ID. Skip hidden elements during this process.
8 changes: 4 additions & 4 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" class="form-control mb-2" required aria-label="Name">
<input type="number" id="age" placeholder="Age" class="form-control mb-2" required aria-label="Age">
<select id="gender" class="form-select mb-2" aria-label="Gender">
<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" class="form-control mb-2" required aria-label="Daily Wage">
<button type="submit" class="btn btn-primary">Add Labour</button>
</form>

Expand Down
20 changes: 10 additions & 10 deletions frontend/inventory-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" required aria-label="Site Name">
<input type="text" id="site-location" placeholder="Site Location" required aria-label="Site Location">
<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..." class="input-search" aria-label="Search sites by name">
<table id="site-list">
<thead>
<tr>
Expand All @@ -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" required aria-label="Material Name">
<input type="number" id="material-quantity" placeholder="Quantity" required aria-label="Quantity">
<select id="material-unit" required aria-label="Material Unit">
<option value="">Select Unit</option>
<option value="kg">Kilogram (kg)</option>
<option value="liter">Liter</option>
Expand All @@ -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" required aria-label="Material Site">
<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" required aria-label="Arrival Date">
<select id="transport-type" required aria-label="Transport Type">
<option value="">Select Transport Type</option>
<option value="pickup">Pickup</option>
<option value="truck">Truck</option>
Expand All @@ -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..." class="input-search" aria-label="Search materials by name">
<table id="material-list">
<thead>
<tr>
Expand Down
22 changes: 11 additions & 11 deletions frontend/labor-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" required aria-label="Laborer Name">
<input type="number" id="labor-age" placeholder="Age" required aria-label="Age">
<select id="labor-gender" required aria-label="Labor Gender">
<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" required aria-label="Daily Wage">
<input type="date" id="labor-date" placeholder="Date of Joining" required aria-label="Date of Joining">
<input type="hidden" id="labor-id">
<div class="btn-group">
<button type="submit" id="save-laborer-btn" class="btn btn-success">Add Laborer</button>
Expand All @@ -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..." class="input-search" aria-label="Search by name">
</div>

<table id="labor-list">
Expand Down Expand Up @@ -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..." class="input-search" aria-label="Search by labor name">
</div>
<table id="attendance-list">
<thead>
Expand Down Expand Up @@ -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" required aria-label="Attendance Date">
<select id="attendance-status" required aria-label="Attendance Status">
<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" required aria-label="Hours Worked">
<input type="text" id="attendance-site-name" placeholder="Site Name" required aria-label="Site Name">
<button type="submit" class="btn btn-success">Save Attendance</button>
</form>
<button id="close-attendance-modal" class="btn btn-secondary">Close</button>
Expand Down
14 changes: 7 additions & 7 deletions frontend/payment-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" required aria-label="Payment Amount">
<input type="date" id="payment-date" required aria-label="Payment Date">

<select id="labor-select" required>
<select id="labor-select" required aria-label="Labor Select">
<option value="">Select Labor</option>
<!-- Labor options will be dynamically loaded here -->
</select>

<select id="site-select" required>
<select id="site-select" required aria-label="Site Select">
<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..." class="input-search" aria-label="Search payments">
<table id="payment-list">
<thead>
<tr>
Expand Down