[Fix #3477] Add accessibility labels for New Chat screens
Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
parent
4756b187ff
commit
5fc4bddfe5
|
@ -4,8 +4,10 @@
|
|||
[status-im.ui.components.icons.vector-icons :as vi]
|
||||
[status-im.ui.components.react :as rn]))
|
||||
|
||||
(defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}]
|
||||
[rn/touchable-highlight {:on-press on-press}
|
||||
(defn action-button [{:keys [label accessibility-label icon icon-opts on-press label-style cyrcle-color]}]
|
||||
[rn/touchable-highlight (merge {:on-press on-press}
|
||||
(when accessibility-label
|
||||
{:accessibility-label accessibility-label}))
|
||||
[rn/view st/action-button
|
||||
[rn/view (st/action-button-icon-container cyrcle-color)
|
||||
[vi/icon icon icon-opts]]
|
||||
|
|
|
@ -11,13 +11,14 @@
|
|||
[status-im.utils.gfycat.core :as gfycat]))
|
||||
|
||||
(defn- contact-inner-view
|
||||
([{:keys [info style] {:keys [whisper-identity name] :as contact} :contact}]
|
||||
([{:keys [info style] {:keys [whisper-identity name dapp?] :as contact} :contact}]
|
||||
[react/view (merge styles/contact-inner-container style)
|
||||
[react/view
|
||||
[chat-icon/contact-icon-contacts-tab contact]]
|
||||
[react/view styles/info-container
|
||||
[react/text {:style styles/name-text
|
||||
[react/text (cond-> {:style styles/name-text
|
||||
:number-of-lines 1}
|
||||
dapp? (assoc :accessibility-label :dapp-name))
|
||||
(if (pos? (count (:name contact)))
|
||||
(i18n/get-contact-translated whisper-identity :name name)
|
||||
;;TODO is this correct behaviour?
|
||||
|
@ -26,9 +27,11 @@
|
|||
[react/text {:style styles/info-text}
|
||||
info])]]))
|
||||
|
||||
(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward?]}]
|
||||
[react/touchable-highlight (when-not extended?
|
||||
{:on-press (when on-press #(on-press contact))})
|
||||
(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward? accessibility-label]
|
||||
:or {accessibility-label :contact-item}}]
|
||||
[react/touchable-highlight (merge {:accessibility-label accessibility-label}
|
||||
(when-not extended?
|
||||
{:on-press (when on-press #(on-press contact))}))
|
||||
[react/view styles/contact-container
|
||||
[contact-inner-view {:contact contact :info info :style style}]
|
||||
(when show-forward?
|
||||
|
@ -43,9 +46,10 @@
|
|||
|
||||
(views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
|
||||
(views/letsubs [checked [selected-key whisper-identity]]
|
||||
[react/view {:accessibility-label :contact-item}
|
||||
[list/list-item-with-checkbox
|
||||
{:checked? checked
|
||||
:on-value-change #(on-toggle-handler checked whisper-identity)
|
||||
:plain-checkbox? true}
|
||||
[react/view styles/contact-container
|
||||
[contact-inner-view {:contact contact}]]]))
|
||||
[contact-inner-view {:contact contact}]]]]))
|
||||
|
|
|
@ -108,7 +108,7 @@
|
|||
{:keys [wrapper-style input-style label-hidden? focus-line-height
|
||||
secure-text-entry label-color error-color error label value on-focus on-blur validator
|
||||
auto-focus on-change-text on-change on-end-editing on-submit-editing editable placeholder
|
||||
placeholder-text-color auto-capitalize multiline number-of-lines]}
|
||||
placeholder-text-color auto-capitalize multiline number-of-lines accessibility-label]}
|
||||
(merge default-props (reagent/props component))
|
||||
valid-value (or valid-value "")
|
||||
label-color (if (and error (not float-label?)) error-color label-color)
|
||||
|
@ -161,7 +161,8 @@
|
|||
:max-length max-length
|
||||
:on-submit-editing #(do (.blur @input-ref) (when on-submit-editing (on-submit-editing)))
|
||||
:on-end-editing (when on-end-editing on-end-editing)
|
||||
:auto-focus (true? auto-focus)}]]))
|
||||
:auto-focus (true? auto-focus)
|
||||
:accessibility-label accessibility-label}]]))
|
||||
|
||||
(defn text-field [_ _]
|
||||
(let [component-data {:get-initial-state get-initial-state
|
||||
|
|
|
@ -29,11 +29,13 @@
|
|||
:on-submit-editing #(when-not error-message
|
||||
(re-frame/dispatch [:add-contact-handler]))
|
||||
:placeholder (i18n/label :t/enter-contact-code)
|
||||
:style add-new.styles/input}]
|
||||
:style add-new.styles/input
|
||||
:accessibility-label :enter-contact-code-input}]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
|
||||
{:toolbar-title (i18n/label :t/new-contact)}
|
||||
:set-contact-identity-from-qr])
|
||||
:style {:margin-right 14}}
|
||||
:style {:margin-right 14}
|
||||
:accessibility-label :scan-contact-code-button}
|
||||
[react/view
|
||||
[vector-icons/icon :icons/qr {:color colors/blue}]]]]
|
||||
[react/text {:style styles/error-message}
|
||||
|
|
|
@ -35,7 +35,8 @@
|
|||
:on-submit-editing #(when topic (re-frame/dispatch [:create-new-public-chat topic]))
|
||||
:value topic
|
||||
:validator #(re-matches #"[a-z\-]*" %)
|
||||
:auto-capitalize :none}]])
|
||||
:auto-capitalize :none
|
||||
:accessibility-label :chat-name-input}]])
|
||||
|
||||
(defn- public-chat-icon [topic]
|
||||
[react/view styles/public-chat-icon
|
||||
|
@ -44,7 +45,8 @@
|
|||
(first topic)]])
|
||||
|
||||
(defn- render-topic [topic]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:create-new-public-chat topic])}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:create-new-public-chat topic])
|
||||
:accessibility-label :chat-item}
|
||||
[react/view
|
||||
[list/item
|
||||
[public-chat-icon topic]
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
(defn render-row [row _ _]
|
||||
[contact-view/contact-view {:contact row
|
||||
:on-press #(re-frame/dispatch [:navigate-to :dapp-description row])
|
||||
:show-forward? true}])
|
||||
:show-forward? true
|
||||
:accessibility-label :dapp-item}])
|
||||
|
||||
(views/defview open-dapp []
|
||||
(views/letsubs [dapps [:all-dapp-with-url-contacts]
|
||||
|
@ -33,7 +34,8 @@
|
|||
:placeholder (i18n/label :t/enter-url)
|
||||
:auto-capitalize :none
|
||||
:auto-correct false
|
||||
:style add-new.styles/input}]]
|
||||
:style add-new.styles/input
|
||||
:accessibility-label :dapp-url-input}]]
|
||||
[react/text {:style styles/list-title}
|
||||
(i18n/label :t/selected-dapps)]
|
||||
[list/flat-list {:data dapps
|
||||
|
@ -49,12 +51,15 @@
|
|||
[toolbar.view/simple-toolbar]
|
||||
[react/view {:margin-top 24 :align-items :center}
|
||||
[chat-icon.screen/dapp-icon-browser dapp 56]
|
||||
[react/text {:style styles/dapp-name}
|
||||
[react/text {:style styles/dapp-name
|
||||
:accessibility-label :dapp-name-text}
|
||||
name]
|
||||
[react/text {:style styles/dapp}
|
||||
(i18n/label :t/dapp)]]
|
||||
[react/view {:margin-top 24}
|
||||
[action-button/action-button {:label (i18n/label :t/open) :icon :icons/address
|
||||
[action-button/action-button {:label (i18n/label :t/open)
|
||||
:icon :icons/address
|
||||
:accessibility-label :open-dapp-button
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:navigate-to-clean :home])
|
||||
(re-frame/dispatch [:open-dapp-in-browser dapp]))}]
|
||||
|
|
|
@ -16,30 +16,35 @@
|
|||
[react/view action-button.styles/actions-list
|
||||
[action-button/action-button
|
||||
{:label (i18n/label :t/start-new-chat)
|
||||
:accessibility-label :start-1-1-chat-button
|
||||
:icon :icons/newchat
|
||||
:icon-opts {:color colors/blue}
|
||||
:on-press #(re-frame/dispatch [:navigate-to :new-chat])}]
|
||||
[action-button/action-separator]
|
||||
[action-button/action-button
|
||||
{:label (i18n/label :t/start-group-chat)
|
||||
:accessibility-label :start-group-chat-button
|
||||
:icon :icons/contacts
|
||||
:icon-opts {:color colors/blue}
|
||||
:on-press #(re-frame/dispatch [:open-contact-toggle-list :chat-group])}]
|
||||
[action-button/action-separator]
|
||||
[action-button/action-button
|
||||
{:label (i18n/label :t/new-public-group-chat)
|
||||
:accessibility-label :join-public-chat-button
|
||||
:icon :icons/public
|
||||
:icon-opts {:color colors/blue}
|
||||
:on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}]
|
||||
[action-button/action-separator]
|
||||
[action-button/action-button
|
||||
{:label (i18n/label :t/open-dapp)
|
||||
:accessibility-label :open-dapp-button
|
||||
:icon :icons/address
|
||||
:icon-opts {:color colors/blue}
|
||||
:on-press #(re-frame/dispatch [:navigate-to :open-dapp])}]
|
||||
[action-button/action-separator]
|
||||
[action-button/action-button
|
||||
{:label (i18n/label :t/invite-friends)
|
||||
:accessibility-label :invite-friends-button
|
||||
:icon :icons/share
|
||||
:icon-opts {:color colors/blue}
|
||||
:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at {:address address})})}]])
|
||||
|
|
|
@ -21,7 +21,8 @@
|
|||
[react/view styles/dapp-name
|
||||
[react/text {:style styles/dapp-name-text
|
||||
:number-of-lines 1
|
||||
:font :toolbar-title}
|
||||
:font :toolbar-title
|
||||
:accessibility-label :dapp-name-text}
|
||||
(:name contact)]
|
||||
[react/text {:style styles/dapp-text}
|
||||
(i18n/label :t/dapp)]]]))
|
||||
|
@ -89,10 +90,14 @@
|
|||
[react/view styles/background
|
||||
[react/text (i18n/label :t/enter-dapp-url)]])
|
||||
[react/view styles/toolbar
|
||||
[react/touchable-highlight {:on-press #(.goBack @webview) :disabled (not can-go-back?)}
|
||||
[react/touchable-highlight {:on-press #(.goBack @webview)
|
||||
:disabled (not can-go-back?)
|
||||
:accessibility-label :previou-page-button}
|
||||
[react/view (when (not can-go-back?) {:opacity 0.4})
|
||||
[vector-icons/icon :icons/arrow-left]]]
|
||||
[react/touchable-highlight {:on-press #(.goForward @webview) :disabled (not can-go-forward?)
|
||||
:style styles/forward-button}
|
||||
[react/touchable-highlight {:on-press #(.goForward @webview)
|
||||
:disabled (not can-go-forward?)
|
||||
:style styles/forward-button
|
||||
:accessibility-label :next-page-button}
|
||||
[react/view (when (not can-go-forward?) {:opacity 0.4})
|
||||
[vector-icons/icon :icons/arrow-right]]]]]))
|
||||
|
|
|
@ -29,7 +29,8 @@
|
|||
toolbar/default-nav-back
|
||||
[toolbar/content-title title]
|
||||
(when (pos? count)
|
||||
[toolbar/text-action {:handler handler}
|
||||
[toolbar/text-action {:handler handler
|
||||
:accessibility-label :next-button}
|
||||
label])])
|
||||
|
||||
(defn toggle-list [contacts render-function]
|
||||
|
|
|
@ -21,10 +21,13 @@
|
|||
:on-change-text #(re-frame/dispatch [:set :new-chat-name %])
|
||||
:default-value new-group-name
|
||||
:placeholder (i18n/label :t/set-a-topic)
|
||||
:style add-new.styles/input}]]))
|
||||
:style add-new.styles/input
|
||||
:accessibility-label :chat-name-input}]]))
|
||||
|
||||
(defn- render-contact [contact]
|
||||
[contact/contact-view {:contact contact :style styles/contact}])
|
||||
[contact/contact-view {:contact contact
|
||||
:style styles/contact
|
||||
:accessibility-label :chat-member-item}])
|
||||
|
||||
(defn- toolbar [group-name save-btn-enabled?]
|
||||
[toolbar/toolbar {}
|
||||
|
@ -34,9 +37,11 @@
|
|||
(let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])]
|
||||
(if platform/android?
|
||||
[toolbar/actions [{:icon :icons/ok
|
||||
:icon-opts {:color :blue}
|
||||
:icon-opts {:color :blue
|
||||
:accessibility-label :create-button}
|
||||
:handler handler}]]
|
||||
[toolbar/text-action {:handler handler}
|
||||
[toolbar/text-action {:handler handler
|
||||
:accessibility-label :create-button}
|
||||
(i18n/label :t/create)])))])
|
||||
|
||||
(views/defview new-group []
|
||||
|
|
Loading…
Reference in New Issue