Merge pull request adobe#278 from edge/iwehrman/theme-title-keyboard-…

…navigation [Kuler] theme title link keyboard navigation
iwehrman · Aug 19, 2013 · dd3b482 · dd3b482
2 parents 056223f + aae22bf
commit dd3b482
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 59 deletions.
diff --git a/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js b/src/extensions/default/edge-code-kuler/KulerInlineColorEditor.js
@@ -258,13 +258,12 @@ define(function (require, exports, module) {
                         var $title = $theme.find(".kuler-swatch-title"),
                             $anchor;
 
-                        $title.wrap("<a href='#'>");
+                        $title.wrap("<a href='#' tabindex='0'>");
                         $anchor = $title.parent();
                         $anchor.on("click", function () {
                             NativeApp.openURLInDefaultBrowser(getUrl());
                             return false;
                         });
-                        $anchor.attr("tabindex", -1);
                     });
                 });
                 returnVal = true;

diff --git a/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html b/src/extensions/default/edge-code-kuler/html/KulerThemeTemplate.html
@@ -2,7 +2,7 @@
     <div class="kuler-swatch-bg">
         <div class="kuler-swatch">
             {{#swatches}}
-                <div class="kuler-swatch-block kuler-block-{{length}}" data-hex="{{hex}}" data-rgb="{{rgb}}" data-hsl="{{hsl}}" style="background-color: {{hex}};" title="{{rgb}}; {{hsl}}; {{hex}}" tabindex="0"></div>
+                <div class="kuler-swatch-block kuler-block" data-hex="{{hex}}" data-rgb="{{rgb}}" data-hsl="{{hsl}}" style="background-color: {{hex}};" title="{{rgb}}; {{hsl}}; {{hex}}" tabindex="0"></div>
             {{/swatches}}
         </div>
     </div>

diff --git a/src/extensions/default/edge-code-kuler/styles/kuler.less b/src/extensions/default/edge-code-kuler/styles/kuler.less
@@ -4,6 +4,7 @@
 @heading-color: #454545;
 @link-color: #0083e8;
 @menu-highlight-color: rgba(224, 240, 250, 1);
+@focus-highlight-color: #65aeed;
 
 /* Typography */
 @font-weight-semibold: 500;
@@ -58,23 +59,9 @@
     }
 }
 
-// trying to colorize the kuler links on hover - end
-
 // Used to avoid overlapping CM scrollbar - TODO (#3460): need a cleaner way to do this
 @scrollbar-wid: 17px;
 
-.border-fixer-upper {
-    &:first-child {
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-    }
-
-    &:last-child {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-}
-
 /* Right-hand column */
 .kuler-content {
     position: absolute;
@@ -170,6 +157,7 @@
                 width: 120px;
                 height: 20px;
                 margin-bottom: -6px;
+                margin-right: 4px;
 
                 .kuler-swatch {
                     position: absolute;
@@ -184,62 +172,39 @@
 
                         &:focus {
                             outline: none;
-                            box-shadow: inset 0 0 0 2px rgba(111, 181, 241, 0.7);
+                            box-shadow: inset 0 0 0 2px @focus-highlight-color;
                             border-radius: 2px;
                         }
                     }
 
-                    .kuler-block-1 {
-                        width: 100%;
-                        .border-fixer-upper;
-                    }
-
-                    .kuler-block-2 {
-                        width: 100%/2;
-                        .border-fixer-upper;
-                    }
-
-                    .kuler-block-3 {
-                        width: 100%/3;
-                        .border-fixer-upper;
-                    }
-
-                    .kuler-block-4 {
-                        width: 100%/4;
-                        .border-fixer-upper;
-                    }
-
-                    .kuler-block-5 {
-                        width: 100%/5;
-                        .border-fixer-upper;
-                    }
-
-                    .kuler-block-6 {
-                        width: 100%/6;
-                        .border-fixer-upper;
+                    .kuler-block {
+                        width: 20%;
+
+                        &:first-child {
+                            border-top-left-radius: 3px;
+                            border-bottom-left-radius: 3px;
+                        }
+
+                        &:last-child {
+                            border-top-right-radius: 3px;
+                            border-bottom-right-radius: 3px;
+                        }
                     }
-
                 }
             }
 
+            .kuler-swatch-title {
+                padding: 2px;   
+            }
+
             a {
                 color: inherit;
                 text-decoration: none;
 
                 &:focus {
                     outline: none;
-                    box-shadow: none;
-                    border-radius: 0;
-                }
-            }
-
-            .kuler-swatch-title {
-                padding-left: 6px;
-
-                &:focus {
-                    outline: none;
-                    box-shadow: none;
-                    border-radius: 0;
+                    box-shadow: 0 0 0 2px @focus-highlight-color;
+                    border-radius: 2px;
                 }
             }
         }