Add chapter about label element and add headers for clarity

Author: vejol

src/content/5/en/part5a.md

@@ -13,7 +13,7 @@ At the moment the frontend shows existing notes and lets users change the state
 
 We'll now implement a part of the required user management functionality in the frontend. Let's begin with the user login. Throughout this part, we will assume that new users will not be added from the frontend.
 
-### Handling login
+### Adding a Login Form
 
 A login form has now been added to the top of the page:
 
@@ -101,6 +101,8 @@ The login form is handled the same way we handled forms in
 
 The method _handleLogin_, which is responsible for handling the data in the form, is yet to be implemented.
 
+### Adding Logic to the Login Form
+
 Logging in is done by sending an HTTP POST request to the server address <i>api/login</i>. Let's separate the code responsible for this request into its own module, to file <i>services/login.js</i>.
 
 We'll use <i>async/await</i> syntax instead of promises for the HTTP request:
@@ -158,6 +160,8 @@ If the login is successful, the form fields are emptied <i>and</i> the server re
 
 If the login fails or running the function _loginService.login_ results in an error, the user is notified.
 
+### Conditional Rendering of the Login Form
+
 The user is not notified about a successful login in any way. Let's modify the application to show the login form only <i>if the user is not logged-in</i>, so when _user === null_. The form for adding new notes is shown only if the <i>user is logged-in</i>, so when <i>user</i> state contains the user's details.
 
 Let's add two helper functions to the <i>App</i> component for generating the forms:
@@ -283,6 +287,44 @@ Our main component <i>App</i> is at the moment way too large. The changes we did
 
 The current application code can be found on [GitHub](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-2), in the branch <i>part5-2</i>.
 
+### Note on Using the Label Element
+
+We used the [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) element for the <i>input</i> fields in the login form. The <i>input</i> field for the username is placed inside the corresponding <i>label</i> element:
+
+```js
+<div>
+  <label>
+    username
+    <input
+      type="text"
+      value={username}
+      onChange={({ target }) => setUsername(target.value)}
+    />
+  </label>
+</div>
+// ...
+```
+
+Why did we implement the form this way? Visually, the same result could be achieved with simpler code, without a separate <i>label</i> element:
+
+```js
+<div>
+  username
+  <input
+    type="text"
+    value={username}
+    onChange={({ target }) => setUsername(target.value)}
+  />
+</div>
+// ...
+```
+
+The <i>label</i> element is used in forms to describe and name <i>input</i> fields. It provides a description for the input field, helping the user understand what information should be entered into each field. This description is programmatically linked to the corresponding input field, improving the form's accessibility. 
+
+This way, screen readers can read the field's name to the user when the input field is selected, and clicking on the label's text automatically focuses on the correct input field. Using the <i>label</i> element with <i>input</i> fields is always recommended, even if the same visual result could be achieved without it.
+
+There are [several ways](https://react.dev/reference/react-dom/components/input#providing-a-label-for-an-input) to link a specific <i>label</i> to an <i>input</i> element. The easiest method is to place the <i>input</i> element inside the corresponding <i>label</i> element, as demonstrated in this material. This automatically associates the <i>label</i> with the correct input field, requiring no additional configuration.
+
 ### Creating new notes
 
 The token returned with a successful login is saved to the application's state - the <i>user</i>'s field <i>token</i>:

src/content/5/fi/osa5a.md

@@ -13,6 +13,8 @@ Frontend näyttää tällä hetkellä olemassaolevat muistiinpanot ja antaa muut
 
 Toteutetaan nyt osa käyttäjienhallinnan edellyttämästä toiminnallisuudesta frontendiin. Aloitetaan käyttäjän kirjautumisesta. Oletetaan vielä tässä osassa, että käyttäjät luodaan suoraan backendiin.
 
+### Kirjautumislomakkeen lisääminen
+
 Sovelluksen yläosaan on nyt lisätty kirjautumislomake:
 
 ![Sovellus koostuu syötekentät username ja password koostuvasta kirjautumislomakkeesta, muistiinpanojen listasta, sekä lomakkeesta joka mahdollistaa uuden muistiinpanon luomisen (ainoastaan yksi syötekenttä muistiinpanon sisällölle). Jokaisen listalla olevan muistiinpanon kohdalla on nappi, jonka avulla muistiinpano voidaan merkata tärkeäksi/epätärkeäksi](../../images/5/1new.png)
@@ -94,6 +96,8 @@ Kirjautumislomakkeen käsittely noudattaa samaa periaatetta kuin [osassa 2](/osa
 
 Kirjautumislomakkeen lähettämisestä vastaava metodi _handleLogin_ ei tee vielä mitään.
 
+### Logiikan lisääminen kirjautumislomakkeelle
+
 Kirjautuminen tapahtuu tekemällä HTTP POST ‑pyyntö palvelimen osoitteeseen <i>api/login</i>. Eristetään pyynnön tekevä koodi omaan moduuliinsa, tiedostoon <i>services/login.js</i>.
 
 Käytetään HTTP-pyynnön tekemiseen nyt promisejen sijaan <i>async/await</i>-syntaksia:
@@ -151,6 +155,8 @@ Kirjautumisen onnistuessa nollataan kirjautumislomakkeen kentät <i>ja</i> talle
 
 Jos kirjautuminen epäonnistuu, eli funktion _loginService.login_ suoritus aiheuttaa poikkeuksen, ilmoitetaan siitä käyttäjälle.
 
+### Kirjautumislomakkeen ehdollinen renderöinti
+
 Onnistunut kirjautuminen ei nyt näy sovelluksen käyttäjälle mitenkään. Muokataan sovellusta vielä siten, että kirjautumislomake näkyy vain <i>jos käyttäjä ei ole kirjautuneena</i> eli _user === null_. Uuden muistiinpanon luomislomake puolestaan näytetään vain <i>jos käyttäjä on kirjautuneena</i>, eli sovelluksen tila <i>user</i> sisältää kirjautuneen käyttäjän tiedot.
 
 Määritellään ensin komponenttiin <i>App</i> apufunktiot lomakkeiden generointia varten:
@@ -277,6 +283,43 @@ Sovelluksemme pääkomponentti <i>App</i> on tällä hetkellä jo aivan liian la
 
 Sovelluksen tämänhetkinen koodi on kokonaisuudessaan [GitHubissa](https://github.com/fullstack-hy2020/part2-notes-frontend/tree/part5-2), branchissa <i>part5-2</i>. 
 
+### Huomio label-elementin käytöstä
+
+Käytimme kirjautumislomakkeen syötekenttien yhteydessä [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)-elementtiä. Käyttäjänimen vastaanottava <i>input</i>-kenttä on sijoitettu sitä kuvaavan <i>label</i>-elementin sisään:
+
+```js
+<div>
+  <label>
+    username
+    <input
+      type="text"
+      value={username}
+      onChange={({ target }) => setUsername(target.value)}
+    />
+  </label>
+</div>
+// ...
+```
+
+Miksi toteutimme lomakkeen näin? Visuaalisesti samaan lopputulokseen näyttäisi pääsevän myös yksinkertaisemmalla koodilla ilman erillistä <i>label</i>-elementtiä:
+
+```js
+<div>
+  username
+  <input
+    type="text"
+    value={username}
+    onChange={({ target }) => setUsername(target.value)}
+  />
+</div>
+// ...
+```
+
+<i>Label</i>-elementtiä käytetään lomakkeissa kuvaamaan ja nimeämään syötekenttiä. Se määrittelee syötekentälle kuvauksen, jonka avulla käyttäjä voi päätellä, mitä tietoa kuhunkin kenttään tulee syöttää. Kuvaus sidotaan kuhunkin syötekenttään ohjelmallisesti, mikä parantaa lomakkeen saavutettavuutta. 
+
+Näin ruudunlukijaohjelmat osaavat lukea kentän nimen käyttäjälle, kun syötekenttä valitaan, ja <i>labelin</i> tekstiä klikattaessa kohdistus siirtyy automaattisesti oikeaan syötekenttään. <i>Label</i>-elementin käyttö syötekenttien yhteydessä on aina suositeltavaa, vaikka visuaalisesti samaan lopputulokseen olisi mahdollista päästä myös ilman sitä. 
+
+On olemassa [joitakin eri tapoja](https://react.dev/reference/react-dom/components/input#providing-a-label-for-an-input) sitoa tietty <i>label</i> viittaamaan <i>input</i>-elementtiin. Helpoiten se onnistuu sijoittamalla <i>input</i>-elementti sitä vastaavan <i>label</i>-elementin sisään, kuten tässä materiaalissa on tehty. Tällöin kyseinen <i>label</i> kohdistuu automaattisesti oikeaan syötekenttään, eikä muita määrittelyjä tarvita.
 
 ### Muistiinpanojen luominen