status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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.icons.vector-icons :as vi]
[status-im.ui.components.react :as rn])) [status-im.ui.components.react :as rn]))
(defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}] (defn action-button [{:keys [label accessibility-label icon icon-opts on-press label-style cyrcle-color]}]
[rn/touchable-highlight {:on-press on-press} [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
[rn/view (st/action-button-icon-container cyrcle-color) [rn/view (st/action-button-icon-container cyrcle-color)
[vi/icon icon icon-opts]] [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])) [status-im.utils.gfycat.core :as gfycat]))
(defn- contact-inner-view (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 (merge styles/contact-inner-container style)
[react/view [react/view
[chat-icon/contact-icon-contacts-tab contact]] [chat-icon/contact-icon-contacts-tab contact]]
[react/view styles/info-container [react/view styles/info-container
[react/text {:style styles/name-text [react/text (cond-> {:style styles/name-text
:number-of-lines 1} :number-of-lines 1}
dapp? (assoc :accessibility-label :dapp-name))
(if (pos? (count (:name contact))) (if (pos? (count (:name contact)))
(i18n/get-contact-translated whisper-identity :name name) (i18n/get-contact-translated whisper-identity :name name)
;;TODO is this correct behaviour? ;;TODO is this correct behaviour?
@ -26,9 +27,11 @@
[react/text {:style styles/info-text} [react/text {:style styles/info-text}
info])]])) info])]]))
(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward?]}] (defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward? accessibility-label]
[react/touchable-highlight (when-not extended? :or {accessibility-label :contact-item}}]
{:on-press (when on-press #(on-press contact))}) [react/touchable-highlight (merge {:accessibility-label accessibility-label}
(when-not extended?
{:on-press (when on-press #(on-press contact))}))
[react/view styles/contact-container [react/view styles/contact-container
[contact-inner-view {:contact contact :info info :style style}] [contact-inner-view {:contact contact :info info :style style}]
(when show-forward? (when show-forward?
@ -43,9 +46,10 @@
(views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler] (views/defview toogle-contact-view [{:keys [whisper-identity] :as contact} selected-key on-toggle-handler]
(views/letsubs [checked [selected-key whisper-identity]] (views/letsubs [checked [selected-key whisper-identity]]
[list/list-item-with-checkbox [react/view {:accessibility-label :contact-item}
{:checked? checked [list/list-item-with-checkbox
:on-value-change #(on-toggle-handler checked whisper-identity) {:checked? checked
:plain-checkbox? true} :on-value-change #(on-toggle-handler checked whisper-identity)
[react/view styles/contact-container :plain-checkbox? true}
[contact-inner-view {:contact contact}]]])) [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 {: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 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 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)) (merge default-props (reagent/props component))
valid-value (or valid-value "") valid-value (or valid-value "")
label-color (if (and error (not float-label?)) error-color label-color) label-color (if (and error (not float-label?)) error-color label-color)
@ -161,7 +161,8 @@
:max-length max-length :max-length max-length
:on-submit-editing #(do (.blur @input-ref) (when on-submit-editing (on-submit-editing))) :on-submit-editing #(do (.blur @input-ref) (when on-submit-editing (on-submit-editing)))
:on-end-editing (when on-end-editing on-end-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 [_ _] (defn text-field [_ _]
(let [component-data {:get-initial-state get-initial-state (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] [status-bar/status-bar]
[toolbar.view/simple-toolbar (i18n/label :t/new-chat)] [toolbar.view/simple-toolbar (i18n/label :t/new-chat)]
[react/view add-new.styles/input-container [react/view add-new.styles/input-container
[react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %]) [react/text-input {:on-change-text #(re-frame/dispatch [:set :contacts/new-identity %])
:on-submit-editing #(when-not error-message :on-submit-editing #(when-not error-message
(re-frame/dispatch [:add-contact-handler])) (re-frame/dispatch [:add-contact-handler]))
:placeholder (i18n/label :t/enter-contact-code) :placeholder (i18n/label :t/enter-contact-code)
:style add-new.styles/input}] :style add-new.styles/input
[react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code :accessibility-label :enter-contact-code-input}]
{:toolbar-title (i18n/label :t/new-contact)} [react/touchable-highlight {:on-press #(re-frame/dispatch [:scan-qr-code
:set-contact-identity-from-qr]) {:toolbar-title (i18n/label :t/new-contact)}
:style {:margin-right 14}} :set-contact-identity-from-qr])
:style {:margin-right 14}
:accessibility-label :scan-contact-code-button}
[react/view [react/view
[vector-icons/icon :icons/qr {:color colors/blue}]]]] [vector-icons/icon :icons/qr {:color colors/blue}]]]]
[react/text {:style styles/error-message} [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/view (merge add-new.styles/input-container {:margin-top 8})
[react/text {:style styles/topic-hash} "#"] [react/text {:style styles/topic-hash} "#"]
[text-field/text-field [text-field/text-field
{:wrapper-style styles/group-chat-name-wrapper {:wrapper-style styles/group-chat-name-wrapper
:line-color components.styles/color-transparent :line-color components.styles/color-transparent
:focus-line-color components.styles/color-transparent :focus-line-color components.styles/color-transparent
:label-hidden? true :label-hidden? true
:input-style styles/group-chat-topic-input :input-style styles/group-chat-topic-input
:on-change-text #(re-frame/dispatch [:set :public-group-topic %]) :on-change-text #(re-frame/dispatch [:set :public-group-topic %])
:on-submit-editing #(when topic (re-frame/dispatch [:create-new-public-chat topic])) :on-submit-editing #(when topic (re-frame/dispatch [:create-new-public-chat topic]))
:value topic :value topic
:validator #(re-matches #"[a-z\-]*" %) :validator #(re-matches #"[a-z\-]*" %)
:auto-capitalize :none}]]) :auto-capitalize :none
:accessibility-label :chat-name-input}]])
(defn- public-chat-icon [topic] (defn- public-chat-icon [topic]
[react/view styles/public-chat-icon [react/view styles/public-chat-icon
@ -44,7 +45,8 @@
(first topic)]]) (first topic)]])
(defn- render-topic [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 [react/view
[list/item [list/item
[public-chat-icon topic] [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])) [status-im.ui.screens.add-new.open-dapp.styles :as styles]))
(defn render-row [row _ _] (defn render-row [row _ _]
[contact-view/contact-view {:contact row [contact-view/contact-view {:contact row
:on-press #(re-frame/dispatch [:navigate-to :dapp-description 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/defview open-dapp []
(views/letsubs [dapps [:all-dapp-with-url-contacts] (views/letsubs [dapps [:all-dapp-with-url-contacts]
@ -26,14 +27,15 @@
[toolbar.view/simple-toolbar (i18n/label :t/open-dapp)] [toolbar.view/simple-toolbar (i18n/label :t/open-dapp)]
[components/separator] [components/separator]
[react/view add-new.styles/input-container [react/view add-new.styles/input-container
[react/text-input {:on-change-text #(reset! url-text %) [react/text-input {:on-change-text #(reset! url-text %)
:on-submit-editing #(do :on-submit-editing #(do
(re-frame/dispatch [:navigate-to-clean :home]) (re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-browser {:url @url-text}])) (re-frame/dispatch [:open-browser {:url @url-text}]))
:placeholder (i18n/label :t/enter-url) :placeholder (i18n/label :t/enter-url)
:auto-capitalize :none :auto-capitalize :none
:auto-correct false :auto-correct false
:style add-new.styles/input}]] :style add-new.styles/input
:accessibility-label :dapp-url-input}]]
[react/text {:style styles/list-title} [react/text {:style styles/list-title}
(i18n/label :t/selected-dapps)] (i18n/label :t/selected-dapps)]
[list/flat-list {:data dapps [list/flat-list {:data dapps
@ -49,15 +51,18 @@
[toolbar.view/simple-toolbar] [toolbar.view/simple-toolbar]
[react/view {:margin-top 24 :align-items :center} [react/view {:margin-top 24 :align-items :center}
[chat-icon.screen/dapp-icon-browser dapp 56] [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] name]
[react/text {:style styles/dapp} [react/text {:style styles/dapp}
(i18n/label :t/dapp)]] (i18n/label :t/dapp)]]
[react/view {:margin-top 24} [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)
:on-press #(do :icon :icons/address
(re-frame/dispatch [:navigate-to-clean :home]) :accessibility-label :open-dapp-button
(re-frame/dispatch [:open-dapp-in-browser dapp]))}] :on-press #(do
(re-frame/dispatch [:navigate-to-clean :home])
(re-frame/dispatch [:open-dapp-in-browser dapp]))}]
[components/separator {:margin-left 72}]] [components/separator {:margin-left 72}]]
[react/view styles/description-container [react/view styles/description-container
[react/text {:style styles/gray-label} [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]}] (defn- options-list [{:keys [address]}]
[react/view action-button.styles/actions-list [react/view action-button.styles/actions-list
[action-button/action-button [action-button/action-button
{:label (i18n/label :t/start-new-chat) {:label (i18n/label :t/start-new-chat)
:icon :icons/newchat :accessibility-label :start-1-1-chat-button
:icon-opts {:color colors/blue} :icon :icons/newchat
:on-press #(re-frame/dispatch [:navigate-to :new-chat])}] :icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-chat])}]
[action-button/action-separator] [action-button/action-separator]
[action-button/action-button [action-button/action-button
{:label (i18n/label :t/start-group-chat) {:label (i18n/label :t/start-group-chat)
:icon :icons/contacts :accessibility-label :start-group-chat-button
:icon-opts {:color colors/blue} :icon :icons/contacts
:on-press #(re-frame/dispatch [:open-contact-toggle-list :chat-group])}] :icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:open-contact-toggle-list :chat-group])}]
[action-button/action-separator] [action-button/action-separator]
[action-button/action-button [action-button/action-button
{:label (i18n/label :t/new-public-group-chat) {:label (i18n/label :t/new-public-group-chat)
:icon :icons/public :accessibility-label :join-public-chat-button
:icon-opts {:color colors/blue} :icon :icons/public
:on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}] :icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}]
[action-button/action-separator] [action-button/action-separator]
[action-button/action-button [action-button/action-button
{:label (i18n/label :t/open-dapp) {:label (i18n/label :t/open-dapp)
:icon :icons/address :accessibility-label :open-dapp-button
:icon-opts {:color colors/blue} :icon :icons/address
:on-press #(re-frame/dispatch [:navigate-to :open-dapp])}] :icon-opts {:color colors/blue}
:on-press #(re-frame/dispatch [:navigate-to :open-dapp])}]
[action-button/action-separator] [action-button/action-separator]
[action-button/action-button [action-button/action-button
{:label (i18n/label :t/invite-friends) {:label (i18n/label :t/invite-friends)
:icon :icons/share :accessibility-label :invite-friends-button
:icon-opts {:color colors/blue} :icon :icons/share
:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at {:address address})})}]]) :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/defview add-new []
(views/letsubs [account [:get-current-account]] (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 [react/view styles/toolbar-content-dapp
[chat-icon.screen/dapp-icon-browser contact 36] [chat-icon.screen/dapp-icon-browser contact 36]
[react/view styles/dapp-name [react/view styles/dapp-name
[react/text {:style styles/dapp-name-text [react/text {:style styles/dapp-name-text
:number-of-lines 1 :number-of-lines 1
:font :toolbar-title} :font :toolbar-title
:accessibility-label :dapp-name-text}
(:name contact)] (:name contact)]
[react/text {:style styles/dapp-text} [react/text {:style styles/dapp-text}
(i18n/label :t/dapp)]]])) (i18n/label :t/dapp)]]]))
@ -89,10 +90,14 @@
[react/view styles/background [react/view styles/background
[react/text (i18n/label :t/enter-dapp-url)]]) [react/text (i18n/label :t/enter-dapp-url)]])
[react/view styles/toolbar [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}) [react/view (when (not can-go-back?) {:opacity 0.4})
[vector-icons/icon :icons/arrow-left]]] [vector-icons/icon :icons/arrow-left]]]
[react/touchable-highlight {:on-press #(.goForward @webview) :disabled (not can-go-forward?) [react/touchable-highlight {:on-press #(.goForward @webview)
:style styles/forward-button} :disabled (not can-go-forward?)
:style styles/forward-button
:accessibility-label :next-page-button}
[react/view (when (not can-go-forward?) {:opacity 0.4}) [react/view (when (not can-go-forward?) {:opacity 0.4})
[vector-icons/icon :icons/arrow-right]]]]])) [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/default-nav-back
[toolbar/content-title title] [toolbar/content-title title]
(when (pos? count) (when (pos? count)
[toolbar/text-action {:handler handler} [toolbar/text-action {:handler handler
:accessibility-label :next-button}
label])]) label])])
(defn toggle-list [contacts render-function] (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]] (views/letsubs [new-group-name [:get :new-chat-name]]
[react/view add-new.styles/input-container [react/view add-new.styles/input-container
[react/text-input [react/text-input
{:auto-focus true {:auto-focus true
:on-change-text #(re-frame/dispatch [:set :new-chat-name %]) :on-change-text #(re-frame/dispatch [:set :new-chat-name %])
:default-value new-group-name :default-value new-group-name
:placeholder (i18n/label :t/set-a-topic) :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] (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?] (defn- toolbar [group-name save-btn-enabled?]
[toolbar/toolbar {} [toolbar/toolbar {}
@ -34,9 +37,11 @@
(let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])] (let [handler #(re-frame/dispatch [:create-new-group-chat-and-open group-name])]
(if platform/android? (if platform/android?
[toolbar/actions [{:icon :icons/ok [toolbar/actions [{:icon :icons/ok
:icon-opts {:color :blue} :icon-opts {:color :blue
:accessibility-label :create-button}
:handler handler}]] :handler handler}]]
[toolbar/text-action {:handler handler} [toolbar/text-action {:handler handler
:accessibility-label :create-button}
(i18n/label :t/create)])))]) (i18n/label :t/create)])))])
(views/defview new-group [] (views/defview new-group []