Merge pull request #12 from tonivanhala/feat/improve-a11y

chore(accessibility): use html tables for Clojure maps

Author: tvirolai

src/ClojureFinland/css/styles.clj

@@ -19,23 +19,17 @@
    [:h1 :h2
     {:color "#A8B3B4"}]
 
-   [:table :td
+   [:table
+    {:text-align "left"}]
+
+   [:table :th :td
     {:vertical-align "top"}]
 
+   ["tbody::after"
+    {:content "''"
+     :display "block"
+     :height "0.5em"}]
+
    [:.code
     {:color "#8D9798"
-     :font-weight "bold"}]
-
-   [:.separator
-    {:height "0.5em"}]
-
-   [:.container
-    {:display               "inline-grid"
-     :grid-template-columns "0.75em min-content 0.5em"}]
-
-   [:.item-first
-    {:padding-top "0.2em"}]
-
-   [:.item-last
-    {:padding-bottom "0.25em"
-     :align-self     "end"}]))
+     :font-weight "bold"}]))

src/ClojureFinland/html/page.clj

@@ -122,21 +122,29 @@
 (defn keyword-output [k]
   [:span.keyword ":" k])
 
+(declare table-output)
+
 (defn map-output [m]
-  [:div.map
-   [:div.container
-    [:div.item-first "{"]
-    [:div.item
-     [:table
-      [:tbody
-       (for [[k v] m]
-         [:tr
-          [:td (keyword-output k)]
-          [:td (cond
-                 (map? v)  (map-output v)
-                 (link? v) (link v)
-                 :else     (text-output v))]])]]]
-    [:div.item-last "}"]]])
+  (let [n-items (count m)]
+    (map-indexed
+      (fn [i [k v]]
+        [:tr
+         (into [:td {:aria-hidden "true"}] (if (= 0 i) "{" " "))
+         [:th {:scope "row"} (keyword-output k)]
+         [:td (let [column (cond
+                             (map? v)  (table-output v)
+                             (link? v) (link v)
+                             :else     (text-output v))]
+                (cond-> column
+                  (= i (dec n-items)) (into [[:span {:aria-hidden "true"} "}"]])))]])
+      m)))
+
+(defn table-output
+  [data]
+  [:table
+   (cond->> data
+     (map? data) (conj [])
+     :always (map #(into [:tbody] (map-output %))))])
 
 (defn section [{:keys [title id description code items data text]}]
   (cond-> [] ; use vector to conj at the end
@@ -145,10 +153,8 @@
     description (conj (section description))
     items       (conj (section items))
     data        (conj (cond
-                        (map? data)  (map-output data)
-                        (coll? data) (->> data
-                                          (map map-output)
-                                          (interpose [:div.separator]))
+                        (map? data)  (table-output data)
+                        (coll? data) (table-output data)
                         (link? data) (link data)
                         :else        (text-output data)))
     text        (conj (section text))