mirror of
https://github.com/status-im/status-react.git
synced 2025-02-04 07:06:18 +00:00
Add accessibility label to Quo tooltip
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:
parent
1714970e4e
commit
ea346ffe65
@ -159,27 +159,39 @@
|
||||
;; Enabled by default on iOs and disabled on Android
|
||||
platform/ios?
|
||||
show-cancel)
|
||||
after (cond
|
||||
(and secure-text-entry @visible)
|
||||
{:icon :main-icons/hide
|
||||
:on-press #(reset! visible false)}
|
||||
after (cond
|
||||
(and secure-text-entry @visible)
|
||||
{:icon :main-icons/hide
|
||||
:on-press #(reset! visible false)}
|
||||
|
||||
(and secure-text-entry (not @visible))
|
||||
{:icon :main-icons/show
|
||||
:on-press #(reset! visible true)}
|
||||
(and secure-text-entry (not @visible))
|
||||
{:icon :main-icons/show
|
||||
:on-press #(reset! visible true)}
|
||||
|
||||
:else after)
|
||||
:else after)
|
||||
secure (and secure-text-entry (not @visible))
|
||||
on-cancel (fn []
|
||||
(when 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}
|
||||
(when label
|
||||
[text/text {:style (label-style)}
|
||||
label])
|
||||
[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
|
||||
[accessory-element before])
|
||||
[rn/text-input
|
||||
@ -200,12 +212,10 @@
|
||||
(when on-blur (on-blur evt))
|
||||
(when show-cancel
|
||||
(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))
|
||||
{:clear-button-mode :while-editing})
|
||||
(when (and platform/ios?
|
||||
(not= keyboard-type "visible-password"))
|
||||
{:keyboard-type keyboard-type})
|
||||
(dissoc props
|
||||
:style :keyboard-type :on-focus :on-blur
|
||||
:secure-text-entry :ref :get-ref))]
|
||||
|
@ -6,6 +6,7 @@
|
||||
[quo.design-system.colors :as colors]
|
||||
[quo.design-system.spacing :as spacing]
|
||||
[quo.platform :as platform]
|
||||
;; FIXME(Ferossgp): Dependecy on status
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]))
|
||||
|
||||
(def ^:private initial-height 22)
|
||||
@ -47,7 +48,7 @@
|
||||
height (oget evt "nativeEvent" "layout" "height")]
|
||||
(reset! layout {:width width
|
||||
:height height})))]
|
||||
(fn [{:keys [bottom-value]} & children]
|
||||
(fn [{:keys [bottom-value accessibility-label]} & children]
|
||||
[:<>
|
||||
[animated/code {:exec (animated/cond* (animated/not* animation-v)
|
||||
(animated/set animation-v 1))}]
|
||||
@ -57,8 +58,10 @@
|
||||
:pointer-events :box-none}
|
||||
[animated/view {:style (container-style)
|
||||
:pointer-events :box-none}
|
||||
(into [rn/view {:style (content-style)
|
||||
:on-layout on-layout}]
|
||||
(into [rn/view {:style (content-style)
|
||||
:pointer-events :box-none
|
||||
:accessibility-label accessibility-label
|
||||
:on-layout on-layout}]
|
||||
children)
|
||||
|
||||
(when platform/ios?
|
||||
|
@ -49,8 +49,7 @@
|
||||
:style styles/login-view}
|
||||
[react/view styles/login-badge-container
|
||||
[multiaccount-login-badge multiaccount]
|
||||
[react/view {:style styles/password-container
|
||||
:important-for-accessibility :no-hide-descendants}
|
||||
[react/view {:style styles/password-container}
|
||||
[react/view {:flex-direction :row :align-items :center}
|
||||
[react/view {:flex 1}
|
||||
[quo/text-input
|
||||
|
Loading…
x
Reference in New Issue
Block a user