[#8567] Accessible tooltips for e2e tests

src/status_im/ui/components/text_input/view.cljs

@@ -15,8 +15,8 @@
       merged-styles)))
 
 (defn text-input-with-label
-  [{:keys [label content error style height container label-style
-           parent-container bottom-value text editable keyboard-type]
+  [{:keys [label content error style height container accessibility-label
+           label-style parent-container bottom-value text editable keyboard-type]
     :as props
     :or {editable true}}]
   [react/view {:style parent-container}
@@ -40,7 +40,10 @@
         {:value text}))]
     (when content content)]
    (when error
-     [tooltip/tooltip error (styles/error
-                             (cond bottom-value bottom-value
-                                   label 20
-                                   :else 0))])])
+     [tooltip/tooltip error
+      (styles/error
+       (cond bottom-value bottom-value
+             label 20
+             :else 0))
+      (when accessibility-label
+        (str (name accessibility-label) "-error"))])])

src/status_im/ui/components/tooltip/styles.cljs

@@ -23,13 +23,18 @@
    :android     {:top 30}})
 
 (defn tooltip-animated [bottom-value opacity-value]
-  {:position    :absolute
-   :align-items :center
-   :left        0
-   :right       0
-   :bottom      0
-   :transform   [{:translateY bottom-value}]
-   :opacity     opacity-value})
+  (cond-> {:position    :absolute
+           :align-items :center
+           :left        0
+           :right       0
+           :bottom      0
+           :transform   [{:translateY bottom-value}]
+           :opacity     opacity-value}
+
+    ;;we need this for e2e tests
+    config/tooltip-events?
+    (assoc :margin-top -20
+           :position :relative)))
 
 (defn tooltip-text-container [color]
   {:padding-horizontal 16

src/status_im/ui/components/tooltip/views.cljs

@@ -9,7 +9,8 @@
             [reagent.core :as reagent]))
 
 (views/defview tooltip [label & [{:keys [bottom-value color font-size container-style]
-                                  :or {bottom-value 30 color colors/white font-size 15}}]]
+                                  :or {bottom-value 30 color colors/white font-size 15}}
+                                 accessibility-label]]
   (views/letsubs [bottom-anim-value (animation/create-value bottom-value)
                   opacity-value     (animation/create-value 0)]
     {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value -10)}
@@ -17,7 +18,10 @@
      [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
       (when label
         [react/view (styles/tooltip-text-container color)
-         [react/text {:style (styles/tooltip-text font-size)} label]])
+         [react/text
+          {:style               (styles/tooltip-text font-size)
+           :accessibility-label accessibility-label}
+          label]])
       #_[vector-icons/icon :icons/tooltip-triangle (assoc
                                                     styles/tooltip-triangle
                                                     :color color)]]]))