fix various a11y issues

Author: sprocketc

src/renderer/attribute/impl/angle.cljs

@@ -12,7 +12,8 @@
    [v/form-input k v attrs]
    [:> Popover/Root {:modal true}
     [:> Popover/Trigger
-     {:class "form-control-button"}
+     {:title "Pick angle"
+      :class "form-control-button"}
      [ui/icon "degrees"]]
     [:> Popover/Portal
      [:> Popover/Content

src/renderer/attribute/impl/color.cljs

@@ -21,7 +21,8 @@
      {:as-child true
       :disabled disabled}
      [:button.button.color-drip.inline-block
-      {:style {:border "5px solid var(--bg-primary)"
+      {:title "Pick color"
+       :style {:border "5px solid var(--bg-primary)"
                :background v}}]]
     [:> Popover/Portal
      [:> Popover/Content

src/renderer/attribute/impl/d.cljs

@@ -139,7 +139,8 @@
      (when v
        [:> Popover/Root {:modal true}
         [:> Popover/Trigger
-         {:class "form-control-button"}
+         {:title "Edit path"
+          :class "form-control-button"}
          [ui/icon "pencil"]]
         [:> Popover/Portal
          [:> Popover/Content {:sideOffset 5

src/renderer/attribute/impl/font_family.cljs

@@ -50,7 +50,8 @@
                        (when (and state (empty? suggestions))
                          (rf/dispatch [::app.e/query-local-fonts])))}
       [:> Popover/Trigger
-       {:class "form-control-button"
+       {:title "Select font"
+        :class "form-control-button"
         :disabled (:disabled attrs)}
        [ui/icon "magnifier"]]
       [:> Popover/Portal

src/renderer/attribute/impl/length.cljs

@@ -41,10 +41,12 @@
    [:div.flex.gap-px
     [:button.form-control-button
      {:disabled disabled
+      :title "Decrease"
       :on-pointer-down #(rf/dispatch [::element.e/update-attr k - 1])}
      [ui/icon "minus"]]
     [:button.form-control-button
      {:disabled disabled
+      :title "Increase"
       :on-click #(rf/dispatch [::element.e/update-attr k + 1])}
      [ui/icon "plus"]]]])
 

src/renderer/attribute/impl/points.cljs

@@ -41,7 +41,8 @@
   [points]
   [:> Popover/Root {:modal true}
    [:> Popover/Trigger
-    {:class "form-control-button"}
+    {:title "Edit points"
+     :class "form-control-button"}
     [ui/icon "pencil"]]
    [:> Popover/Portal
     [:> Popover/Content

src/renderer/attribute/views.cljs

@@ -130,7 +130,7 @@
        :disabled disabled}
       [:> Select/Trigger
        {:class "form-control-button"
-        :aria-label (name k)}
+        :aria-label (str "Select " (name k))}
        [:> Select/Value ""]
        [:> Select/Icon
         [ui/icon "chevron-down"]]]

src/renderer/document/views.cljs

@@ -142,6 +142,7 @@
        [:> DropdownMenu/Trigger
         {:as-child true}
         [:button.button.flex.items-center.justify-center.aria-expanded:overlay.px-2.font-mono.rounded
+         {:aria-label "More document actions"}
          [ui/icon "ellipsis-h"]]]
        [:> DropdownMenu/Portal
         [:> DropdownMenu/Content

src/renderer/snap/views.cljs

@@ -16,10 +16,11 @@
   (let [options @(rf/subscribe [::snap.s/options])]
     [:> DropdownMenu/Root
      [:> DropdownMenu/Trigger
-      {:aria-label "Snap"
-       :as-child true}
+      {:as-child true}
       [:div.h-full.flex.items-center
-       {:class "hover:pb-1"}
+       {:role "button"
+        :title "Snap options"
+        :class "hover:pb-1"}
        [ui/icon "chevron-up"]]]
      [:> DropdownMenu/Portal
       [:> DropdownMenu/Content

src/renderer/theme/styles.css

@@ -9,7 +9,7 @@
   --text-2xs--line-height: 14px;
   --transition-property-fill: fill;
 
-  --color-accent: #e93976;
+  --color-accent: #d12b65;
   --color-accent-inverted: #fff;
 }
 

src/renderer/toolbar/status.cljs

@@ -54,7 +54,8 @@
   []
   [:> DropdownMenu/Root
    [:> DropdownMenu/Trigger
-    {:class "button flex items-center justify-center overlay px-2 font-mono rounded-sm"
+    {:title "Select zoom level"
+     :class "button flex items-center justify-center overlay px-2 font-mono rounded-sm"
      :side "top"}
     [:div.flex.items-center
      [ui/icon "chevron-up"]]]
@@ -162,7 +163,8 @@
         :on-change #(rf/dispatch [::document.e/preview-attr :fill (get-hex %)])}
 
        [:button.button.color-rect
-        {:style {:background fill}}]]
+        {:title "Pick fill color"
+         :style {:background fill}}]]
 
       [:button.icon-button
        {:title (t [:color/swap "Swap fill with stroke"])
@@ -176,7 +178,8 @@
         :on-change #(rf/dispatch [::document.e/preview-attr :stroke (get-hex %)])
         :align-offset -54}
        [:button.button.color-rect.relative
-        {:style {:background stroke}}
+        {:title "Pick stroke color"
+         :style {:background stroke}}
         [:div.color-rect.bg-primary.absolute
          {:style {:width "13px"
                   :height "13px"

src/renderer/toolbar/tools.cljs

@@ -14,21 +14,24 @@
         primary-tool @(rf/subscribe [::tool.s/primary])
         active (= active-tool tool)
         primary (= primary-tool tool)
-        properties (tool.hierarchy/properties tool)]
+        properties (tool.hierarchy/properties tool)
+        label (or (:label properties) (str/capitalize (name tool)))]
     (when (:icon properties)
       [:> Tooltip/Root
        [:> Tooltip/Trigger {:as-child true}
         [:span
          [ui/radio-icon-button (:icon properties) active
           {:class (when primary "outline-shadow")
+           :aria-label (str "activate " label)
            :on-click #(rf/dispatch [::tool.e/activate tool])}]]]
        [:> Tooltip/Portal
         [:> Tooltip/Content
          {:class "tooltip-content"
           :sideOffset 5
           :side "top"}
          [:div.flex.gap-2.items-center
-          (or (:label properties) (str/capitalize (name tool)))]]]])))
+          (or (:label properties)
+              (str/capitalize (name tool)))]]]])))
 
 (defn group
   [items]

src/renderer/toolbar/views.cljs

@@ -13,6 +13,7 @@
       {:as-child true}
       [:span.shadow-4
        [ui/icon-button icon {:disabled disabled
+                             :aria-label title
                              :on-click #(rf/dispatch action)}]]]
      [:> Tooltip/Portal
       [:> Tooltip/Content

src/renderer/tree/views.cljs

@@ -131,7 +131,6 @@
               (when hovered "hovered")]
       :tab-index 0
       :data-id (str id)
-      :role "menuitem"
       :on-double-click #(rf/dispatch [::frame.e/pan-to-element id])
       :on-pointer-enter #(rf/dispatch [::document.e/set-hovered-id id])
       :ref (fn [this]
@@ -170,20 +169,23 @@
         hovered-ids @(rf/subscribe [::document.s/hovered-ids])
         collapsed-ids @(rf/subscribe [::document.s/collapsed-ids])
         collapsed (contains? collapsed-ids id)]
-    [:li {:class (when selected "overlay")}
+    [:li {:class (when selected "overlay")
+          :role "menuitem"}
      [list-item-button el {:depth depth
                            :collapsed collapsed
                            :hovered (contains? hovered-ids id)}]
      (when (and has-children (not collapsed))
-       [:ul (for [el (mapv (fn [k] (get elements k)) (reverse children))]
-              ^{:key (:id el)} [item el (inc depth) elements])])]))
+       [:ul {:role "menu"}
+        (for [el (mapv (fn [k] (get elements k)) (reverse children))]
+          ^{:key (:id el)} [item el (inc depth) elements])])]))
 
 (defn inner-sidebar-render
   [root-children elements]
   [:div.tree-sidebar
    {:on-pointer-up #(rf/dispatch [::element.e/deselect-all])}
    [ui/scroll-area
-    [:ul {:on-pointer-leave #(rf/dispatch [::document.e/clear-hovered])
+    [:ul {:role "menu"
+          :on-pointer-leave #(rf/dispatch [::document.e/clear-hovered])
           :style {:width "227px"}}
      (for [el (reverse root-children)]
        ^{:key (:id el)} [item el 1 elements])]]])

src/renderer/ui.cljs

@@ -62,7 +62,8 @@
     props)
    [:> Slider/Track {:class "relative h-1 bg-secondary flex-1"}
     [:> Slider/Range {:class "absolute h-full overlay"}]]
-   [:> Slider/Thumb {:class "slider-thumb"}]])
+   [:> Slider/Thumb {:class "slider-thumb"
+                     :aria-label "Resize panel thumb"}]])
 
 (defn format-shortcut
   [[shortcut]]