From e85823056c98de4833b7af52f9a2ce73e6a04815 Mon Sep 17 00:00:00 2001 From: Foo Pang Date: Thu, 22 Mar 2018 15:59:32 +0800 Subject: [PATCH] [Fix #3479] Add accessibility labels for Chat screens Signed-off-by: Andrey Shovkoplyas --- resources/js/bots/transactor/bot.js | 9 ++- src/status_im/chat/screen.cljs | 6 +- src/status_im/chat/views/input/input.cljs | 5 +- .../chat/views/input/suggestions.cljs | 17 +++-- src/status_im/chat/views/message/message.cljs | 2 +- src/status_im/chat/views/toolbar_content.cljs | 19 +++--- .../ui/components/common/common.cljs | 8 ++- .../ui/components/contact/contact.cljs | 19 +++--- src/status_im/ui/screens/home/views.cljs | 7 +- .../ui/screens/home/views/inner_item.cljs | 37 ++++++---- .../ui/screens/profile/components/views.cljs | 24 ++++--- .../ui/screens/profile/contact/views.cljs | 28 ++++---- .../ui/screens/profile/group_chat/views.cljs | 67 ++++++++++--------- 13 files changed, 145 insertions(+), 103 deletions(-) diff --git a/resources/js/bots/transactor/bot.js b/resources/js/bots/transactor/bot.js index f4bcc5f630..579c1aac4b 100644 --- a/resources/js/bots/transactor/bot.js +++ b/resources/js/bots/transactor/bot.js @@ -147,7 +147,8 @@ function amountParameterBox(groupChat, params, context) { fontSize: 38, marginLeft: 8, color: "black" - } + }, + accessibilityLabel: "amount-text" }, amount || "0.00" ), @@ -183,7 +184,8 @@ function amountParameterBox(groupChat, params, context) { fontSize: 17, color: "black", paddingLeft: 16 - } + }, + accessibilityLabel: "fee-text", }, [status.components.subscribe(["calculatedFee"])]), status.components.text({ style: { @@ -206,7 +208,8 @@ function amountParameterBox(groupChat, params, context) { style: { marginLeft: 16, marginRight: 16 - } + }, + accessibilityLabel: "adjust-fee-slider-button" }), status.components.view({ flexDirection: "row" diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 834efeb231..81cb86569c 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -41,7 +41,8 @@ (when (or (nil? pending-contact?) ; user not in contact list pending-contact?) [react/touchable-highlight - {:on-press #(re-frame/dispatch [:add-contact chat-id])} + {:on-press #(re-frame/dispatch [:add-contact chat-id]) + :accessibility-label :add-to-contacts-button} [react/view style/add-contact [react/text {:style style/add-contact-text} (i18n/label :t/add-to-contacts)]]]))) @@ -58,7 +59,8 @@ toolbar/nav-back-count [toolbar-content/toolbar-content-view] [toolbar/actions [{:icon :icons/options - :icon-opts {:color :black} + :icon-opts {:color :black + :accessibility-label :chat-menu-button} :handler #(on-options chat-id name group-chat public?)}]]] (when-not (or public? group-chat) [add-contact-bar])])) diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index 764c672f86..c4fc2809b9 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -158,8 +158,9 @@ (defn commands-button [] [react/touchable-highlight - {:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char]) - (re-frame/dispatch [:chat-input-focus :input-ref]))} + {:on-press #(do (re-frame/dispatch [:set-chat-input-text constants/command-char]) + (re-frame/dispatch [:chat-input-focus :input-ref])) + :accessibility-label :chat-commands-button} [react/view [vi/icon :icons/input-commands {:container-style style/input-commands-icon :color :dark}]]]) diff --git a/src/status_im/chat/views/input/suggestions.cljs b/src/status_im/chat/views/input/suggestions.cljs index f6f7f7c392..f5532042ad 100644 --- a/src/status_im/chat/views/input/suggestions.cljs +++ b/src/status_im/chat/views/input/suggestions.cljs @@ -8,8 +8,9 @@ [status-im.i18n :as i18n] [taoensso.timbre :as log])) -(defn suggestion-item [{:keys [on-press name description last?]}] - [react/touchable-highlight {:on-press on-press} +(defn suggestion-item [{:keys [on-press name description last? accessibility-label]}] + [react/touchable-highlight (cond-> {:on-press on-press} + accessibility-label (assoc :accessibility-label accessibility-label)) [react/view (style/item-suggestion-container last?) [react/text {:style style/item-suggestion-name} name] @@ -26,7 +27,11 @@ (when (seq commands) (for [[i {:keys [description] :as command}] (map-indexed vector commands)] ^{:key i} - [suggestion-item {:on-press #(re-frame/dispatch [:select-chat-input-command command nil]) - :name (commands-model/command-name command) - :description description - :last? (= i (dec (count commands)))}]))]]])) + [suggestion-item {:on-press #(re-frame/dispatch [:select-chat-input-command command nil]) + :name (commands-model/command-name command) + :description description + :last? (= i (dec (count commands))) + :accessibility-label (case (:name command) + "send" :send-payment-button + "request" :request-payment-button + nil)}]))]]])) diff --git a/src/status_im/chat/views/message/message.cljs b/src/status_im/chat/views/message/message.cljs index 82bc8139af..004a79e5d2 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -345,7 +345,7 @@ (react/dismiss-keyboard!)) :on-long-press #(when (= content-type constants/text-content-type) (list-selection/share content (i18n/label :t/message)))} - [react/view + [react/view {:accessibility-label :chat-item} (let [incoming-group (and group-chat (not outgoing))] [message-content message-body (merge message {:current-public-key current-public-key diff --git a/src/status_im/chat/views/toolbar_content.cljs b/src/status_im/chat/views/toolbar_content.cljs index 2bdc468153..5c7de0cd54 100644 --- a/src/status_im/chat/views/toolbar_content.cljs +++ b/src/status_im/chat/views/toolbar_content.cljs @@ -36,12 +36,13 @@ (str (i18n/label :t/sync-in-progress) " " percentage "% " currentBlock))) -(defview last-activity [{:keys [online-text sync-state]}] +(defview last-activity [{:keys [online-text sync-state accessibility-label]}] [state [:get :sync-data]] - [react/text {:style st/last-activity-text} + [react/text {:style st/last-activity-text + :accessibility-label accessibility-label} (case sync-state :in-progress (in-progress-text state) - :synced (i18n/label :t/sync-synced) + :synced (i18n/label :t/sync-synced) online-text)]) (defn- group-last-activity [{:keys [contacts sync-state public?]}] @@ -76,9 +77,10 @@ (generate-gfy public-key) (or (i18n/get-contact-translated chat-id :name name) (i18n/label :t/chat-name)))] - [react/text {:style st/chat-name-text - :number-of-lines 1 - :font :toolbar-title} + [react/text {:style st/chat-name-text + :number-of-lines 1 + :font :toolbar-title + :accessibility-label :chat-name-text} (if public? (str "#" chat-name) chat-name)]) @@ -86,5 +88,6 @@ [group-last-activity {:contacts contacts :public? public? :sync-state sync-state}] - [last-activity {:online-text (online-text contact chat-id) - :sync-state sync-state}])]])) + [last-activity {:online-text (online-text contact chat-id) + :sync-state sync-state + :accessibility-label :last-seen-text}])]])) diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 024c10f964..1d27782cfe 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -80,9 +80,11 @@ (defn counter ([value] (counter nil value)) - ([{:keys [size] :or {size 18}} value] + ([{:keys [size accessibility-label] :or {size 18}} value] [react/view {:style (styles/counter-container size)} - [react/text {:style (styles/counter-label size)} + [react/text (cond-> {:style (styles/counter-label size)} + accessibility-label + (assoc :accessibility-label accessibility-label)) value]])) (defn image-contain @@ -90,4 +92,4 @@ ([{:keys [style]} source] [react/view {:style (merge styles/image-contain style)} - [react/image {:source source :resizeMode :contain :style styles/image-contain-image}]])) \ No newline at end of file + [react/image {:source source :resizeMode :contain :style styles/image-contain-image}]])) diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index c7cc721a31..c7346f914f 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -11,14 +11,15 @@ [status-im.utils.gfycat.core :as gfycat])) (defn- contact-inner-view - ([{:keys [info style] {:keys [whisper-identity name dapp?] :as contact} :contact}] + ([{:keys [info style props] {: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 (cond-> {:style styles/name-text + [react/text (merge {:style styles/name-text :number-of-lines 1} - dapp? (assoc :accessibility-label :dapp-name)) + (when dapp? {:accessibility-label :dapp-name}) + props) (if (pos? (count (:name contact))) (i18n/get-contact-translated whisper-identity :name name) ;;TODO is this correct behaviour? @@ -27,20 +28,22 @@ [react/text {:style styles/info-text} info])]])) -(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward? accessibility-label] - :or {accessibility-label :contact-item}}] +(defn contact-view [{:keys [style contact extended? on-press extend-options extend-title info show-forward? + accessibility-label inner-props] + :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}] + [contact-inner-view {:contact contact :info info :style style :props inner-props}] (when show-forward? [react/view styles/forward-btn [vector-icons/icon :icons/forward]]) (when (and extended? (not (empty? extend-options))) [react/view styles/more-btn-container - [react/touchable-highlight {:on-press #(list-selection/show {:options extend-options - :title extend-title})} + [react/touchable-highlight {:on-press #(list-selection/show {:options extend-options + :title extend-title}) + :accessibility-label :menu-option} [react/view styles/more-btn [vector-icons/icon :icons/options {:accessibility-label :options}]]]])]]) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index ad783e61b9..36dba0b82a 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -25,11 +25,12 @@ [components.common/logo styles/toolbar-logo]]) [toolbar/actions (when platform/ios? - [(toolbar.actions/add #(re-frame/dispatch [:navigate-to :new]))])]]) + [(-> (toolbar.actions/add #(re-frame/dispatch [:navigate-to :new])) + (assoc-in [:icon-opts :accessibility-label] :new-chat-button))])]]) (defn- home-action-button [] [react/view styles/action-button-container - [react/touchable-highlight {:accessibility-label :plus-button + [react/touchable-highlight {:accessibility-label :new-chat-button :on-press #(re-frame/dispatch [:navigate-to :new])} [react/view styles/action-button [icons/icon :icons/add {:color :white}]]]]) @@ -43,7 +44,7 @@ offset-x (animation/create-value (if swiped? styles/delete-button-width 0)) swipe-pan-responder (responder/swipe-pan-responder offset-x styles/delete-button-width home-item-id swiped?) swipe-pan-handler (responder/pan-handlers swipe-pan-responder)] - [react/view swipe-pan-handler + [react/view (assoc swipe-pan-handler :accessibility-label :chat-item) [react/animated-view {:style {:flex 1 :right offset-x}} [inner-item-view home-item] [react/touchable-highlight {:style styles/delete-icon-highlight diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index 84a49ccdaf..1329878f6c 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -16,12 +16,13 @@ [status-im.ui.components.chat-icon.screen :as chat-icon.screen] [status-im.ui.components.common.common :as components.common])) -(defn message-content-text [{:keys [content] :as message}] +(defn message-content-text [{:keys [content] :as message}] [react/view styles/last-message-container (cond (not message) - [react/text {:style styles/last-message-text} + [react/text {:style styles/last-message-text + :accessibility-label :no-messages-text} (i18n/label :t/no-messages)] (str/blank? content) @@ -29,16 +30,18 @@ ""] (:content content) - [react/text {:style styles/last-message-text - :number-of-lines 1} + [react/text {:style styles/last-message-text + :number-of-lines 1 + :accessibility-label :chat-message-text} (:content content)] (and (:command content) (-> content :short-preview :markup)) (commands-utils/generate-hiccup (-> content :short-preview :markup)) :else - [react/text {:style styles/last-message-text - :number-of-lines 1} + [react/text {:style styles/last-message-text + :number-of-lines 1 + :accessibility-label :chat-message-text} content])]) (defview message-status [{:keys [chat-id contacts]} @@ -54,13 +57,16 @@ (defn message-timestamp [{:keys [timestamp]}] (when timestamp - [react/text {:style styles/datetime-text} + [react/text {:style styles/datetime-text + :accessibility-label :last-message-time-text} (time/to-short-str timestamp)])) (defview unviewed-indicator [chat-id] (letsubs [unviewed-messages-count [:unviewed-messages-count chat-id]] (when (pos? unviewed-messages-count) - [components.common/counter {:size 22} unviewed-messages-count]))) + [components.common/counter {:size 22 + :accessibility-label :unread-messages-count-text} + unviewed-messages-count]))) (defn chat-list-item-name [name group-chat? public? public-key] (let [private-group? (and group-chat? (not public?)) @@ -76,8 +82,9 @@ [react/view styles/private-group-icon-container [vector-icons/icon :icons/group-chat {:color colors/gray}]]) [react/view {:flex-shrink 1} - [react/text {:style styles/name-text - :number-of-lines 1} + [react/text {:style styles/name-text + :number-of-lines 1 + :accessibility-label :chat-name-text} (if public-group? (str "#" chat-name) chat-name)]]])) @@ -117,11 +124,13 @@ [react/view styles/item-upper-container [react/view styles/name-view [react/view {:flex-shrink 1} - [react/text {:style styles/name-text - :number-of-lines 1} + [react/text {:style styles/name-text + :accessibility-label :chat-name-text + :number-of-lines 1} name]]]] [react/view styles/item-lower-container [react/view styles/last-message-container - [react/text {:style styles/last-message-text - :number-of-lines 1} + [react/text {:style styles/last-message-text + :accessibility-label :chat-url-text + :number-of-lines 1} (or url (i18n/label :t/dapp))]]]]]])) diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index 1ffded9da9..d528e88165 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -12,16 +12,17 @@ ;; profile header elements -(defn- profile-name-input [name on-change-text-event] +(defn- profile-name-input [name on-change-text-event & [props]] [react/view [react/text-input - {:style styles/profile-name-input-text - :placeholder "" - :default-value name - :auto-focus true - :on-change-text #(when on-change-text-event - (re-frame/dispatch [on-change-text-event %])) - :accessibility-label :username-input}]]) + (merge {:style styles/profile-name-input-text + :placeholder "" + :default-value name + :auto-focus true + :on-change-text #(when on-change-text-event + (re-frame/dispatch [on-change-text-event %])) + :accessibility-label :username-input} + props)]]) (defn- show-profile-icon-actions [options] (when (seq options) @@ -37,8 +38,8 @@ :number-of-lines 1} name]]]) -(defn- profile-header-edit [{:keys [name] :as contact} - icon-options on-change-text-event allow-icon-change?] +(defn- profile-header-edit [{:keys [name group-chat] :as contact} + icon-options on-change-text-event allow-icon-change?] [react/view styles/profile-header-edit [react/touchable-highlight {:on-press #(show-profile-icon-actions icon-options) :accessibility-label :edit-profile-photo-button} @@ -46,7 +47,8 @@ [chat-icon.screen/my-profile-icon {:account contact :edit? allow-icon-change?}]]] [react/view styles/profile-header-name-container - [profile-name-input name on-change-text-event]]]) + [profile-name-input name on-change-text-event + (when group-chat {:accessibility-label :chat-name-input})]]]) (defn profile-header [contact editing? allow-icon-change? options on-change-text-event] (if editing? diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 3a6c33935b..fea9206135 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -18,19 +18,23 @@ (defn actions [{:keys [pending? whisper-identity dapp?]}] (concat (if pending? - [{:label (i18n/label :t/add-to-contacts) - :icon :icons/add-contact - :action #(re-frame/dispatch [:add-contact whisper-identity])}] - [{:label (i18n/label :t/in-contacts) - :icon :icons/in-contacts - :disabled? true}]) - [{:label (i18n/label :t/send-message) - :icon :icons/chats - :action #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}])}] + [{:label (i18n/label :t/add-to-contacts) + :icon :icons/add-contact + :action #(re-frame/dispatch [:add-contact whisper-identity]) + :accessibility-label :add-to-contacts-button}] + [{:label (i18n/label :t/in-contacts) + :icon :icons/in-contacts + :disabled? true + :accessibility-label :in-contacts-button}]) + [{:label (i18n/label :t/send-message) + :icon :icons/chats + :action #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}]) + :accessibility-label :start-conversation-button}] (when-not dapp? - [{:label (i18n/label :t/send-transaction) - :icon :icons/arrow-right - :action #(re-frame/dispatch [:profile/send-transaction whisper-identity])}]))) + [{:label (i18n/label :t/send-transaction) + :icon :icons/arrow-right + :action #(re-frame/dispatch [:profile/send-transaction whisper-identity]) + :accessibility-label :send-transaction-button}]))) (defn profile-info-item [{:keys [label value options accessibility-label]}] [react/view styles/profile-info-item diff --git a/src/status_im/ui/screens/profile/group_chat/views.cljs b/src/status_im/ui/screens/profile/group_chat/views.cljs index 9e8b0b4055..842b2b0fa5 100644 --- a/src/status_im/ui/screens/profile/group_chat/views.cljs +++ b/src/status_im/ui/screens/profile/group_chat/views.cljs @@ -22,8 +22,9 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:group-chat-profile/start-editing])} [react/view - [react/text {:style common.styles/label-action-text - :uppercase? true} + [react/text {:style common.styles/label-action-text + :uppercase? true + :accessibility-label :edit-button} (i18n/label :t/edit)]]]]) (defn group-chat-profile-edit-toolbar [] @@ -32,36 +33,40 @@ [toolbar/content-title ""] [toolbar/default-done {:handler #(re-frame/dispatch [:group-chat-profile/save-profile]) :icon :icons/ok - :icon-opts {:color colors/blue}}]]) + :icon-opts {:color colors/blue + :accessibility-label :done-button}}]]) (defn actions [admin? chat-id] (concat ;; NOTE(goranjovic) - group chat participant removal has been temporarily disabled ;; due to this bug - https://github.com/status-im/status-react/issues/3463 #_(when admin? - [{:label (i18n/label :add-members) - :icon :icons/add - :action #(re-frame/dispatch [:navigate-to :add-participants-toggle-list])}]) - [{:label (i18n/label :t/clear-history) - :icon :icons/close - :action #(utils/show-confirmation (i18n/label :t/clear-history-title) - (i18n/label :t/clear-group-history-confirmation) - (i18n/label :t/clear-history-action) - (fn [] (re-frame/dispatch [:clear-history])))} - {:label (i18n/label :t/delete-chat) - :icon :icons/delete - :action #(utils/show-confirmation (i18n/label :t/delete-chat-title) - (i18n/label :t/delete-group-chat-confirmation) - (i18n/label :t/delete) - (fn [] ;; TODO(goranjovic) - fix double dispatch after rebase agains group chat actions - (re-frame/dispatch [:remove-chat chat-id]) - (re-frame/dispatch [:navigation-replace :home])))} - {:label (i18n/label :t/leave-group) - :icon :icons/arrow-left - :action #(utils/show-confirmation (i18n/label :t/leave-group-title) - (i18n/label :t/leave-group-confirmation) - (i18n/label :t/leave-group-action) - (fn [] (re-frame/dispatch [:leave-group-chat])))}])) + [{:label (i18n/label :add-members) + :icon :icons/add + :action #(re-frame/dispatch [:navigate-to :add-participants-toggle-list])}]) + [{:label (i18n/label :t/clear-history) + :icon :icons/close + :action #(utils/show-confirmation (i18n/label :t/clear-history-title) + (i18n/label :t/clear-group-history-confirmation) + (i18n/label :t/clear-history-action) + (fn [] (re-frame/dispatch [:clear-history]))) + :accessibility-label :clear-history-button} + {:label (i18n/label :t/delete-chat) + :icon :icons/delete + :action #(utils/show-confirmation (i18n/label :t/delete-chat-title) + (i18n/label :t/delete-group-chat-confirmation) + (i18n/label :t/delete) + (fn [] ;; TODO(goranjovic) - fix double dispatch after rebase agains group chat actions + (re-frame/dispatch [:remove-chat chat-id]) + (re-frame/dispatch [:navigation-replace :home]))) + :accessibility-label :delete-chat-button} + {:label (i18n/label :t/leave-group) + :icon :icons/arrow-left + :action #(utils/show-confirmation (i18n/label :t/leave-group-title) + (i18n/label :t/leave-group-confirmation) + (i18n/label :t/leave-group-action) + (fn [] (re-frame/dispatch [:leave-group-chat]))) + :accessibility-label :leave-chat-button}])) (defn contact-actions [contact] [{:action #(re-frame/dispatch [:show-profile (:whisper-identity contact)]) @@ -74,10 +79,12 @@ (defn render-contact [contact admin?] [react/view [contact/contact-view - {:contact contact - :extend-options (contact-actions contact) - :extend-title (:name contact) - :extended? admin?}]]) + {:contact contact + :extend-options (contact-actions contact) + :extend-title (:name contact) + :extended? admin? + :accessibility-label :member-item + :inner-props {:accessibility-label :member-name-text}}]]) (defview chat-group-contacts-view [admin?] (letsubs [contacts [:current-chat-contacts]]