✨ Improve login accessibility

frontend/src/app/main/ui/components/button_link.cljs

@@ -0,0 +1,21 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.components.button-link
+  (:require
+   [app.util.keyboard :as kbd]
+   [rumext.v2 :as mf]))
+
+(mf/defc button-link [{:keys [action icon name klass]}]
+  [:a.btn-primary.btn-large.button-link
+   {:class klass
+    :tabindex "0"
+    :on-click action
+    :on-key-down (fn [event]
+                   (when (kbd/enter? event)
+                     (action event)))}
+   [:span.logo icon]
+   name])

frontend/src/app/main/ui/components/forms.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.components.forms
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -42,7 +43,6 @@
 
         touched?     (get-in @form [:touched input-name])
         error        (get-in @form [:errors input-name])
-
         value        (get-in @form [:data input-name] "")
 
         help-icon'   (cond
@@ -103,8 +103,11 @@
                          :on-blur on-blur
                          :placeholder label
                          :on-change on-change
-                         :type @type')
-                (cond-> (and value is-checkbox?) (assoc :default-checked value))
+                         :type @type'
+                         :tabindex "0")
+                  (cond-> (and value is-checkbox?) (assoc :default-checked value))
+                  (cond-> (and touched? (:message error)) (assoc "aria-invalid" "true"
+                                                                 "aria-describedby" (dm/str "error-" input-name)))
                   (obj/clj->props))]
 
     [:div
@@ -126,7 +129,8 @@
          help-icon'])
       (cond
         (and touched? (:message error))
-        [:span.error {:data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
+        [:span.error {:id (dm/str "error-" input-name)
+                      :data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
 
         (string? hint)
         [:span.hint hint])]]))
@@ -220,7 +224,11 @@
      {:name "submit"
       :class (when (or (not (:valid @form)) (true? disabled)) "btn-disabled")
       :disabled (or (not (:valid @form)) (true? disabled))
+      :tabindex "0"
       :on-click on-click
+      :on-key-down (fn [event]
+                     (when (kbd/enter? event)
+                       (on-click)))
       :value label
       :data-test data-test
       :type "submit"}]))

frontend/src/app/main/ui/components/link.cljs

@@ -0,0 +1,20 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.components.link
+  (:require
+   [app.util.keyboard :as kbd]
+   [rumext.v2 :as mf]))
+
+(mf/defc link [{:keys [action name klass data-test]}]
+  [:a {:on-click action
+       :klass klass
+       :on-key-down (fn [event]
+                      (when (kbd/enter? event)
+                        (action event)))
+       :tabindex "0"
+       :data-test data-test}
+   name])