From b869ecc544e77d81cd716b00d04f671ba3dad46d Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Wed, 2 Aug 2017 15:18:25 +0200
Subject: [PATCH] a11y: add focus states to buttons

---
 src/day8/re_frame/styles.cljs |  6 ++++++
 src/day8/re_frame/trace.cljs  | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/day8/re_frame/styles.cljs b/src/day8/re_frame/styles.cljs
index 26464d2..796e4c0 100644
--- a/src/day8/re_frame/styles.cljs
+++ b/src/day8/re_frame/styles.cljs
@@ -22,6 +22,12 @@
   border-bottom: 1px dotted #888;
   font-weight: normal;
 }
+#--re-frame-trace-- .button:focus, .text-button:focus {
+  border-radius: 2px 2px 0 0;
+  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+  box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
+}
 #--re-frame-trace-- .icon-button {
   font-size: 10px;
 }
diff --git a/src/day8/re_frame/trace.cljs b/src/day8/re_frame/trace.cljs
index aabf84a..f9c1089 100644
--- a/src/day8/re_frame/trace.cljs
+++ b/src/day8/re_frame/trace.cljs
@@ -161,9 +161,10 @@
                [:td {:style row-style} (str op-type)]
                [:td {:style row-style} operation]
                [:td
-                {:style (merge row-style {:font-weight (if (< slower-than-bold-int duration)
-                                                         "bold"
-                                                         "")
+                {:style (merge row-style {
+                                          ; :font-weight (if (< slower-than-bold-int duration)
+                                          ;                "bold"
+                                          ;                "")
                                           :white-space "nowrap"})}
 
                 (.toFixed duration 1) " ms"]]
@@ -203,10 +204,12 @@
            [:ul.filter-items
              (map (fn [item]
                       ^{:key (:id item)}
-                      [:li.filter-item.button
-                        {:on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))}
-                        (:filter-type item) ": " [:span.filter-item-string (:query item)]
-                        [:button.icon-button [components/icon-remove]]])
+                      [:li.filter-item
+                        [:button.button
+                          {:style {:margin 0}
+                           :on-click (fn [event] (swap! filter-items #(remove (comp (partial = (:query item)) :query) %)))}
+                          (:filter-type item) ": " [:span.filter-item-string (:query item)]
+                          [:span.icon-button [components/icon-remove]]]])
                   @filter-items)]]
          [:table
           {:cell-spacing "0" :width "100%"}