Merge pull request #118 from Lawrence4code/accessibilityFixes

fix accessibility issues shown in chrome lighthouse audit
nakulrathore · Oct 12, 2019 · 34b428b · 34b428b
2 parents 423908f + 9e31246
commit 34b428b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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>
   );
 };