status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#8567] Accessible tooltips for e2e tests

This commit is contained in:
Roman Volosovskyi 2020-04-06 15:28:54 +03:00
parent 14d1a6cfb2
commit 9df455088e
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
3 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/status_im/ui/components/text_input/view.cljs
View File

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

19
src/status_im/ui/components/tooltip/styles.cljs
View File

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

8
src/status_im/ui/components/tooltip/views.cljs
View File

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