fix(color-picker): added more descriptive assistive text and fixed ta…

…bindex on swatches
salesforce-ux · Aug 16, 2017 · fc989c1 · fc989c1
1 parent 5e8a358
commit fc989c1
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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>