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

[Fix #3477] Add accessibility labels for New Chat screens 

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Foo Pang 2018-03-07 16:28:15 +08:00 committed by Goran Jovic
parent 4756b187ff
commit 5fc4bddfe5
No known key found for this signature in database
GPG Key ID: A778DE3CD7D2D10D
10 changed files with 119 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/status_im/ui/components/action_button/action_button.cljs
View File

@ -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]]

28
src/status_im/ui/components/contact/contact.cljs
View File

@ -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
:number-of-lines 1}
[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]]
[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}]]]))
[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}]]]]))

5
src/status_im/ui/components/text_field/view.cljs
View File

@ -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

20
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -25,15 +25,17 @@
[status-bar/status-bar]
[toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
[react/view add-new.styles/input-container
[react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %])
: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}]
[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}}
[react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %])
: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
: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}
:accessibility-label :scan-contact-code-button}
[react/view
[vector-icons/icon :icons/qr {:color colors/blue}]]]]
[react/text {:style styles/error-message}

24
src/status_im/ui/screens/add_new/new_public_chat/view.cljs
View File

@ -26,16 +26,17 @@
[react/view (merge add-new.styles/input-container {:margin-top 8})
[react/text {:style styles/topic-hash} "#"]
[text-field/text-field
{:wrapper-style styles/group-chat-name-wrapper
:line-color components.styles/color-transparent
:focus-line-color components.styles/color-transparent
:label-hidden? true
:input-style styles/group-chat-topic-input
:on-change-text #(re-frame/dispatch [:set :public-group-topic %])
:on-submit-editing #(when topic (re-frame/dispatch [:create-new-public-chat topic]))
:value topic
:validator #(re-matches #"[a-z\-]*" %)
:auto-capitalize :none}]])
{:wrapper-style styles/group-chat-name-wrapper
:line-color components.styles/color-transparent
:focus-line-color components.styles/color-transparent
:label-hidden? true
:input-style styles/group-chat-topic-input
:on-change-text #(re-frame/dispatch [:set :public-group-topic %])
:on-submit-editing #(when topic (re-frame/dispatch [:create-new-public-chat topic]))
:value topic
:validator #(re-matches #"[a-z\-]*" %)
: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]

37
src/status_im/ui/screens/add_new/open_dapp/views.cljs
View File

@ -14,9 +14,10 @@
[status-im.ui.screens.add-new.open-dapp.styles :as styles]))
(defn render-row [row _ _]
[contact-view/contact-view {:contact row
:on-press #(re-frame/dispatch [:navigate-to :dapp-description row])
:show-forward? true}])
[contact-view/contact-view {:contact row
:on-press #(re-frame/dispatch [:navigate-to :dapp-description row])
:show-forward? true
:accessibility-label :dapp-item}])
(views/defview open-dapp []
(views/letsubs [dapps [:all-dapp-with-url-contacts]
@ -26,14 +27,15 @@
[toolbar.view/simple-toolbar (i18n/label :t/open-dapp)]
[components/separator]
[react/view add-new.styles/input-container
[react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(do
(re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-browser {:url @url-text}]))
:placeholder (i18n/label :t/enter-url)
:auto-capitalize :none
:auto-correct false
:style add-new.styles/input}]]
[react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(do
(re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-browser {:url @url-text}]))
:placeholder (i18n/label :t/enter-url)
:auto-capitalize :none
:auto-correct false
: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,15 +51,18 @@
[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
:on-press #(do
(re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-dapp-in-browser dapp]))}]
[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]))}]
[components/separator {:margin-left 72}]]
[react/view styles/description-container
[react/text {:style styles/gray-label}

45
src/status_im/ui/screens/add_new/views.cljs
View File

@ -15,34 +15,39 @@
(defn- options-list [{:keys [address]}]
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/start-new-chat)
:icon :icons/newchat
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-chat])}]
{: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)
:icon :icons/contacts
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:open-contact-toggle-list :chat-group])}]
{: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)
:icon :icons/public
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}]
{: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)
:icon :icons/address
:icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :open-dapp])}]
{: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)
:icon :icons/share
:icon-opts {:color colors/blue}
:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at {:address address})})}]])
{: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})})}]])
(views/defview add-new []
(views/letsubs [account [:get-current-account]]

17
src/status_im/ui/screens/browser/views.cljs
View File

@ -19,9 +19,10 @@
[react/view styles/toolbar-content-dapp
[chat-icon.screen/dapp-icon-browser contact 36]
[react/view styles/dapp-name
[react/text {:style styles/dapp-name-text
:number-of-lines 1
:font :toolbar-title}
[react/text {:style styles/dapp-name-text
:number-of-lines 1
: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]]]]]))

3
src/status_im/ui/screens/group/add_contacts/views.cljs
View File

@ -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
src/status_im/ui/screens/group/views.cljs
View File

@ -17,14 +17,17 @@
(views/letsubs [new-group-name [:get :new-chat-name]]
[react/view add-new.styles/input-container
[react/text-input
{:auto-focus true
: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}]]))
{:auto-focus true
: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
: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 []