From 9e31246f7dd20b934a4ffa58865bb0db582a3fef Mon Sep 17 00:00:00 2001
From: Lawrence <Lawrence4code@gmail.com>
Date: Sat, 12 Oct 2019 16:33:54 +0530
Subject: [PATCH] fix accessibility issues shown in chrome lighthouse audit

---
 src/App.css                           |  6 +++---
 src/components/ColorList/ColorList.js | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9b78a52..6ef99cf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,16 +25,16 @@
 }
 .subtitle {
   font-size: 14px;
-  color: #777;
+  color: #6e6e6e;
 }
 .addnew {
   font-size: 12px;
   text-decoration: none;
-  color: #3498db;
+  color: #2373a8;
   padding: 5px;
 }
 .addnew:hover {
-  border-bottom: 1px solid #3498db;
+  border-bottom: 1px solid #2373a8;
 }
 .addnewplus {
   font-size: 21px;
diff --git a/src/components/ColorList/ColorList.js b/src/components/ColorList/ColorList.js
index 516e70b..49639b2 100644
--- a/src/components/ColorList/ColorList.js
+++ b/src/components/ColorList/ColorList.js
@@ -11,13 +11,14 @@ const ColorList = ({colors,
                    pickerStatus
                   }) => {
   return (
+    <div>
     <ul className="color-list">
       {colors.map(colorItem =>
         <li
           className="color-list__item"
           key={colorItem.color}
         >
-          <button
+          <button title="Select background color"
             onClick={(e) => {
               e.preventDefault();
               onColorChange(colorItem.color, true); // Pass true to hide picker on color change
@@ -32,7 +33,8 @@ const ColorList = ({colors,
           <ReactTooltip place="top" type="dark" effect="solid"/>
         </li>
       )}
-        <button 
+    </ul>
+    <button
         onClick={(e) => {
           e.preventDefault();
           
@@ -42,9 +44,7 @@ const ColorList = ({colors,
         }}
         data-tip={pickerStatus ? 'Close' : 'Choose a custom color'}
         className='color-list__button picker'><span>{pickerStatus ? 'X' : '#'}</span></button>
-    </ul>
-
-
+    </div>
   );
 };