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>