From d4e420b1e65c8c8bc631f28f543d47e20f5f64e2 Mon Sep 17 00:00:00 2001
From: Thomas Godwin <leddfoot36@gmail.com>
Date: Tue, 6 Dec 2022 10:15:53 +0100
Subject: [PATCH] Update ExpenseForm.js
Increase form accessibility.
https://a11y-101.com/development/inputs
---
.../src/components/NewExpense/ExpenseForm.js | 10 ++++++----
1 file changed, 6 insertions(+), 4 deletions(-)
diff --git a/code/03-working-with-multiple-states/src/components/NewExpense/ExpenseForm.js b/code/03-working-with-multiple-states/src/components/NewExpense/ExpenseForm.js
index 4492b85d66..a68f6092fc 100644
--- a/code/03-working-with-multiple-states/src/components/NewExpense/ExpenseForm.js
+++ b/code/03-working-with-multiple-states/src/components/NewExpense/ExpenseForm.js
@@ -23,25 +23,27 @@ const ExpenseForm = () => {
<form>
<div className='new-expense__controls'>
<div className='new-expense__control'>
- <label>Title</label>
- <input type='text' onChange={titleChangeHandler} />
+ <label htmlFor'expense-title'>Title</label>
+ <input type='text' onChange={titleChangeHandler} id='expense-title' placeholder='enter an expense title' />
</div>
<div className='new-expense__control'>
- <label>Amount</label>
+ <label htmlFor'expense-amount'>Amount</label>
<input
type='number'
min='0.01'
step='0.01'
onChange={amountChangeHandler}
+ id='expense-amount
/>
</div>
<div className='new-expense__control'>
- <label>Date</label>
+ <label htmlFor='expense-date'>Date</label>
<input
type='date'
min='2019-01-01'
max='2022-12-31'
onChange={dateChangeHandler}
+ id='expense-date'
/>
</div>
</div>