From fc989c1ed840014757b9b976ccf12bebbf7dd6d4 Mon Sep 17 00:00:00 2001
From: Lee White <lee.white@salesforce.com>
Date: Wed, 16 Aug 2017 10:40:46 -0700
Subject: [PATCH] fix(color-picker): added more descriptive assistive text and
 fixed tabindex on swatches

---
 ui/components/color-picker/index.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/components/color-picker/index.jsx b/ui/components/color-picker/index.jsx
index 8381021131..1fae28b25d 100644
--- a/ui/components/color-picker/index.jsx
+++ b/ui/components/color-picker/index.jsx
@@ -82,7 +82,7 @@ export const ColorPickerSummary = (props) => {
           sprite="utility"
           symbol="down"
         />
-        <span className="slds-assistive-text">Choose a color</span>
+        <span className="slds-assistive-text">Choose a color. Current color: #5679C0</span>
       </Button>
 
       <FormElement
@@ -118,7 +118,12 @@ export const ColorPickerSwatches = (props) => {
     <ul className="slds-color-picker__swatches" role={swatchesRole}>
       {swatchColors.map((swatch, index) =>
         <li key={_.uniqueId('color-picker-swatch-')} className="slds-color-picker__swatch" role="presentation">
-          <a className="slds-color-picker__swatch-trigger" role={linkRole} href="#">
+          <a
+            className="slds-color-picker__swatch-trigger"
+            href="#"
+            role={linkRole}
+            tabIndex={index === 0 ? 0 : -1}
+          >
             <Swatch color={swatch} index={index} />
           </a>
         </li>