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;
 }