status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-10 07:36:46 +00:00
Code Issues Projects Releases Wiki Activity

Add accessibility label to Quo tooltip

Browse Source 
Accessibility hide password only input

Do not hide all other elements, as only password should be secured

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-06-17 09:08:52 +03:00
parent 1714970e4e
commit ea346ffe65
No known key found for this signature in database
GPG Key ID: C9A094959935A952
3 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/quo/components/text_input.cljs
View File

@ -173,13 +173,25 @@
on-cancel (fn [] on-cancel (fn []
(when on-cancel (when on-cancel
(on-cancel)) (on-cancel))
(blur))] (blur))
keyboard-type (cond
(and platform/ios? (= keyboard-type "visible-password"))
"default"
(and platform/android? secure-text-entry @visible)
"visible-password"
:else
keyboard-type)]
[rn/view {:style container-style} [rn/view {:style container-style}
(when label (when label
[text/text {:style (label-style)} [text/text {:style (label-style)}
label]) label])
[rn/view {:style (text-input-row-style)} [rn/view {:style (text-input-row-style)}
[rn/view {:style (text-input-view-style style)} [rn/view {:style (text-input-view-style style)
:important-for-accessibility (if secure-text-entry
:no-hide-descendants
:auto)}
(when before (when before
[accessory-element before]) [accessory-element before])
[rn/text-input [rn/text-input
@ -200,12 +212,10 @@
(when on-blur (on-blur evt)) (when on-blur (on-blur evt))
(when show-cancel (when show-cancel
(rn/configure-next (:ease-in-ease-out rn/layout-animation-presets))) (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)))
(reset! focused false))} (reset! focused false))
:keyboard-type keyboard-type}
(when (and platform/ios? (not after)) (when (and platform/ios? (not after))
{:clear-button-mode :while-editing}) {:clear-button-mode :while-editing})
(when (and platform/ios?
(not= keyboard-type "visible-password"))
{:keyboard-type keyboard-type})
(dissoc props (dissoc props
:style :keyboard-type :on-focus :on-blur :style :keyboard-type :on-focus :on-blur
:secure-text-entry :ref :get-ref))] :secure-text-entry :ref :get-ref))]

5
src/quo/components/tooltip.cljs
View File

@ -6,6 +6,7 @@
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo.platform :as platform] [quo.platform :as platform]
;; FIXME(Ferossgp): Dependecy on status
[status-im.ui.components.icons.vector-icons :as vector-icons])) [status-im.ui.components.icons.vector-icons :as vector-icons]))
(def ^:private initial-height 22) (def ^:private initial-height 22)
@ -47,7 +48,7 @@
height (oget evt "nativeEvent" "layout" "height")] height (oget evt "nativeEvent" "layout" "height")]
(reset! layout {:width width (reset! layout {:width width
:height height})))] :height height})))]
(fn [{:keys [bottom-value]} & children] (fn [{:keys [bottom-value accessibility-label]} & children]
[:<> [:<>
[animated/code {:exec (animated/cond* (animated/not* animation-v) [animated/code {:exec (animated/cond* (animated/not* animation-v)
(animated/set animation-v 1))}] (animated/set animation-v 1))}]
@ -58,6 +59,8 @@
[animated/view {:style (container-style) [animated/view {:style (container-style)
:pointer-events :box-none} :pointer-events :box-none}
(into [rn/view {:style (content-style) (into [rn/view {:style (content-style)
:pointer-events :box-none
:accessibility-label accessibility-label
:on-layout on-layout}] :on-layout on-layout}]
children) children)

3
src/status_im/ui/screens/multiaccounts/login/views.cljs
View File

@ -49,8 +49,7 @@
:style styles/login-view} :style styles/login-view}
[react/view styles/login-badge-container [react/view styles/login-badge-container
[multiaccount-login-badge multiaccount] [multiaccount-login-badge multiaccount]
[react/view {:style styles/password-container [react/view {:style styles/password-container}
:important-for-accessibility :no-hide-descendants}
[react/view {:flex-direction :row :align-items :center} [react/view {:flex-direction :row :align-items :center}
[react/view {:flex 1} [react/view {:flex 1}
[quo/text-input [quo/text-input