From 5fc4bddfe5813b224069c71e221acb22737ab876 Mon Sep 17 00:00:00 2001 From: Foo Pang Date: Wed, 7 Mar 2018 16:28:15 +0800 Subject: [PATCH] [Fix #3477] Add accessibility labels for New Chat screens Signed-off-by: Goran Jovic --- .../action_button/action_button.cljs | 6 ++- .../ui/components/contact/contact.cljs | 28 +++++++----- .../ui/components/text_field/view.cljs | 5 ++- .../ui/screens/add_new/new_chat/views.cljs | 20 +++++---- .../screens/add_new/new_public_chat/view.cljs | 24 +++++----- .../ui/screens/add_new/open_dapp/views.cljs | 37 ++++++++------- src/status_im/ui/screens/add_new/views.cljs | 45 ++++++++++--------- src/status_im/ui/screens/browser/views.cljs | 17 ++++--- .../ui/screens/group/add_contacts/views.cljs | 3 +- src/status_im/ui/screens/group/views.cljs | 21 +++++---- 10 files changed, 119 insertions(+), 87 deletions(-) diff --git a/src/status_im/ui/components/action_button/action_button.cljs b/src/status_im/ui/components/action_button/action_button.cljs index cbf447fe75..4b095bcb5e 100644 --- a/src/status_im/ui/components/action_button/action_button.cljs +++ b/src/status_im/ui/components/action_button/action_button.cljs @@ -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]] diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index 0b7b84832c..c7cc721a31 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -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}]]]])) diff --git a/src/status_im/ui/components/text_field/view.cljs b/src/status_im/ui/components/text_field/view.cljs index 56481a1bcb..bff4ddebfd 100644 --- a/src/status_im/ui/components/text_field/view.cljs +++ b/src/status_im/ui/components/text_field/view.cljs @@ -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 diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 7cf21b0631..5a439d2b33 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -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} diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs index a3fb8462c1..99cc8c7e51 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs @@ -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] diff --git a/src/status_im/ui/screens/add_new/open_dapp/views.cljs b/src/status_im/ui/screens/add_new/open_dapp/views.cljs index 9d7ec43a88..349f4ae1ec 100644 --- a/src/status_im/ui/screens/add_new/open_dapp/views.cljs +++ b/src/status_im/ui/screens/add_new/open_dapp/views.cljs @@ -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} diff --git a/src/status_im/ui/screens/add_new/views.cljs b/src/status_im/ui/screens/add_new/views.cljs index d3b4e52bbb..e22ee06076 100644 --- a/src/status_im/ui/screens/add_new/views.cljs +++ b/src/status_im/ui/screens/add_new/views.cljs @@ -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]] diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index 731e5f4398..98f9d4d71d 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -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]]]]])) diff --git a/src/status_im/ui/screens/group/add_contacts/views.cljs b/src/status_im/ui/screens/group/add_contacts/views.cljs index 29ff42f55c..4923da7ab3 100644 --- a/src/status_im/ui/screens/group/add_contacts/views.cljs +++ b/src/status_im/ui/screens/group/add_contacts/views.cljs @@ -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] diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index b01288a9e3..55e1e750f8 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -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 []