From acb64dec56af7faa0316c685f553154dbe58558b Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Sun, 20 Aug 2017 14:48:04 -0600
Subject: [PATCH] Add htmlFor and help text to EditDictionaryForm fields

---
 .../EditDictionaryForm.jsx                    | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/management/EditDictionaryModal/EditDictionaryForm.jsx b/src/components/management/EditDictionaryModal/EditDictionaryForm.jsx
index a5cc992..a1cfe77 100644
--- a/src/components/management/EditDictionaryModal/EditDictionaryForm.jsx
+++ b/src/components/management/EditDictionaryModal/EditDictionaryForm.jsx
@@ -10,9 +10,11 @@ export const EditDictionaryForm = ({
   return (
     <div className='form'>
       <div className='field'>
-        <label className='label'>Name</label>
+        <label className='label' htmlFor='editName'>
+          Name
+        </label>
         <div className='control'>
-          <input className='input' type='text'
+          <input className='input' id='editName' type='text'
             placeholder={ `${ specification || 'Dictionary' } Name` }
             value={ name }
             onInput={ (event) => {
@@ -26,9 +28,14 @@ export const EditDictionaryForm = ({
       </div>
 
       <div className='field'>
-        <label className='label'>Specification</label>
+        <label className='label' htmlFor='editSpecification'>
+          Specification
+        </label>
+        <p className='help'>
+          What this collection of words should be referred to as, i.e. "Dictionary," "Word List", etc.
+        </p>
         <div className='control'>
-          <input className='input' type='text'
+          <input className='input' id='editSpecification' type='text'
             placeholder='Dictionary'
             value={ specification }
             onInput={ (event) => {
@@ -42,9 +49,14 @@ export const EditDictionaryForm = ({
       </div>
 
       <div className='field'>
-        <label className='label' htmlFor='dictionaryDescription'>Description</label>
+        <label className='label' htmlFor='editDescription'>
+          Description
+        </label>
+        <p className='help'>
+          A description of your dictionary, <a href='MARKDOWN_LINK' target='_blank'>Markdown</a> enabled
+        </p>
         <div className='control'>
-          <textarea className='textarea' id='dictionaryDescription'
+          <textarea className='textarea' id='editDescription'
             placeholder={ `A description of your ${ specification }` }
             value={ description }
             onInput={ (event) => {