From d5981c65a19010cc0596ee9b63f3c338276b917f Mon Sep 17 00:00:00 2001 From: Eric Dvorsak Date: Fri, 8 Sep 2017 14:30:12 +0200 Subject: [PATCH] add accessibility labels for UI testing --- src/status_im/accessibility_ids.cljc | 17 ---------- src/status_im/chat/views/input/input.cljs | 6 ++-- .../chat/views/message/request_message.cljs | 8 +++-- .../components/chat_icon/screen.cljs | 5 +-- src/status_im/components/drawer/view.cljs | 6 ++-- src/status_im/components/toolbar/view.cljs | 11 +++--- .../components/toolbar_new/actions.cljs | 8 ++--- .../screens/contacts/new_contact/views.cljs | 33 +++++++++--------- src/status_im/ui/screens/profile/views.cljs | 34 +++++++++++-------- 9 files changed, 61 insertions(+), 67 deletions(-) delete mode 100644 src/status_im/accessibility_ids.cljc diff --git a/src/status_im/accessibility_ids.cljc b/src/status_im/accessibility_ids.cljc deleted file mode 100644 index 1cca8f0781..0000000000 --- a/src/status_im/accessibility_ids.cljc +++ /dev/null @@ -1,17 +0,0 @@ -(ns status-im.accessibility-ids) - -;; Toolbar -(def toolbar-back-button :toolbar-back-button) - -;; Drawer -(def drawer-status-input :drawer-status-input) - -;; Chat -(def chat-cancel-response-button :chat-cancel-response-button) -(def chat-message-input :chat-message-input) -(def chat-send-button :chat-send-button) -(defn chat-request-message-button [command-name] - (keyword (str "request-" (name command-name)))) - -;; Accounts -(def accounts-create-button :accounts-create-button) diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index 2e6915e4c8..2510e95de6 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -4,7 +4,6 @@ [reagent.core :as r] [re-frame.core :refer [subscribe dispatch]] [taoensso.timbre :as log] - [status-im.accessibility-ids :as id] [status-im.chat.constants :as const] [status-im.chat.models.input :as input-model] [status-im.chat.styles.input.input :as style] @@ -71,7 +70,7 @@ {:ref #(when % (dispatch [:set-chat-ui-props {:input-ref %}]) (reset! input-ref %)) - :accessibility-label id/chat-message-input + :accessibility-label :chat-message-input :multiline (not single-line-input?) :default-value (or @input-text "") :editable (not @sending-in-progress?) @@ -237,7 +236,8 @@ (fn [] (dispatch [:chat-input-focus :seq-input-ref])) 100)) (dispatch [:send-current-message]))} - [view style/send-message-container + [view {:style style/send-message-container + :accessibility-label :send-message-button} [icon :arrow_top style/send-message-icon]]]))]))) (defn container [] diff --git a/src/status_im/chat/views/message/request_message.cljs b/src/status_im/chat/views/message/request_message.cljs index 9f7603424b..0072dcfacf 100644 --- a/src/status_im/chat/views/message/request_message.cljs +++ b/src/status_im/chat/views/message/request_message.cljs @@ -8,7 +8,6 @@ icon touchable-highlight]] [status-im.chat.styles.message.message :as st] - [status-im.accessibility-ids :as id] [status-im.models.commands :refer [parse-command-request]] [status-im.components.animation :as anim] [taoensso.timbre :as log])) @@ -41,6 +40,11 @@ (anim/start (button-animation val min-scale loop? answered?))))) +(defn request-button-label + "The request button label will be in the form of `request-the-command-name`" + [command-name] + (keyword (str "request-" (name command-name)))) + (defn request-button [message-id _ _] (let [scale-anim-val (anim/create-value min-scale) answered? (subscribe [:is-request-answered? message-id]) @@ -61,7 +65,7 @@ [touchable-highlight {:on-press on-press-handler :style (st/command-request-image-touchable) - :accessibility-label (id/chat-request-message-button (:name command))} + :accessibility-label (request-button-label (:name command))} [animated-view {:style (st/command-request-image-view command scale-anim-val)} (when command-icon [icon command-icon st/command-request-image])]]))}))) diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index 3d7a048537..12cf7eaf52 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -15,14 +15,15 @@ [text {:style (:default-chat-icon-text styles)} (first name)]]) -(defn chat-icon [photo-path {:keys [size]}] +(defn chat-icon [photo-path {:keys [size accessibility-label]}] (let [photo (if (s/starts-with? photo-path "contacts://") (->> (s/replace photo-path #"contacts://" "") (keyword) (get resources/contacts)) {:uri photo-path})] [image {:source photo - :style (st/image-style size)}])) + :style (st/image-style size) + :accessibility-label (or accessibility-label :chat-icon)}])) (defn dapp-badge [{:keys [online-view-wrapper online-view online-dot-left online-dot-right]}] [view online-view-wrapper diff --git a/src/status_im/components/drawer/view.cljs b/src/status_im/components/drawer/view.cljs index 80c573de14..e0c65c145e 100644 --- a/src/status_im/components/drawer/view.cljs +++ b/src/status_im/components/drawer/view.cljs @@ -4,7 +4,6 @@ [clojure.string :as str] [reagent.core :as r] [re-frame.core :as rf] - [status-im.accessibility-ids :as id] [status-im.components.chat-icon.screen :as ci] [status-im.components.common.common :as common] [status-im.components.context-menu :as context-menu] @@ -39,7 +38,8 @@ [touchable-opacity {:on-press #(rf/dispatch [:navigate-to :my-profile]) :style st/user-photo-container} [view - [ci/chat-icon (:photo-path account) {:size 52}]]]) + [ci/chat-icon (:photo-path account) {:size 52 + :accessibility-label :drawer-profile-icon}]]]) (defview name-input [] [account [:get-current-account] @@ -71,7 +71,7 @@ :auto-focus true :focus @status-edit? :max-length 140 - :accessibility-label id/drawer-status-input + :accessibility-label :drawer-status-input :placeholder placeholder :default-value previous-status :on-change-text #(let [new-status (utils/clean-text %)] diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs index 7734ef1fef..b45ed24893 100644 --- a/src/status_im/components/toolbar/view.cljs +++ b/src/status_im/components/toolbar/view.cljs @@ -10,7 +10,6 @@ icon-search]] [status-im.components.toolbar.actions :as act] [status-im.components.toolbar.styles :as st] - [status-im.accessibility-ids :as id] [status-im.utils.platform :refer [platform-specific]])) ;; TODO This is our old toolbar component. Please do not use it and consider moving legacy usage to the new toolbar_new component. @@ -33,7 +32,7 @@ [view (get-in platform-specific [:component-styles :toolbar-nav-action]) [image (:image nav-action)]]] [touchable-highlight {:on-press #(dispatch [:navigate-back]) - :accessibility-label id/toolbar-back-button} + :accessibility-label :toolbar-back-button} [view (get-in platform-specific [:component-styles :toolbar-nav-action]) [image {:source {:uri :icon_back} :style icon-back}]]]))] @@ -44,10 +43,12 @@ title]]) [view (st/toolbar-actions-container (count actions) custom-action) (if actions - (for [{action-image :image - action-handler :handler} actions] + (for [{action-image :image + action-handler :handler + accessibility-label :accessibility-label} actions] ^{:key (str "action-" action-image)} - [touchable-highlight {:on-press action-handler} + [touchable-highlight {:on-press action-handler + :accessibility-label (:or accessibility-label :toolbar-action)} [view st/toolbar-action [image action-image]]]) custom-action)]] diff --git a/src/status_im/components/toolbar_new/actions.cljs b/src/status_im/components/toolbar_new/actions.cljs index 97c6dffd20..f31218dbca 100644 --- a/src/status_im/components/toolbar_new/actions.cljs +++ b/src/status_im/components/toolbar_new/actions.cljs @@ -1,11 +1,11 @@ (ns status-im.components.toolbar-new.actions (:require [re-frame.core :refer [dispatch]] - [status-im.accessibility-ids :as id] [status-im.components.toolbar-new.styles :as st])) (defn hamburger [handler] - {:icon :icons/hamburger - :handler handler}) + {:icon :icons/hamburger + :handler handler + :accessibility-label :toolbar-hamburger-menu}) (defn hamburger-white [handler] (merge (hamburger handler) @@ -31,7 +31,7 @@ (defn back [handler] {:icon :icons/back :handler handler - :accessibility-label id/toolbar-back-button}) + :accessibility-label :toolbar-back-button}) (def default-handler #(dispatch [:navigate-back])) diff --git a/src/status_im/ui/screens/contacts/new_contact/views.cljs b/src/status_im/ui/screens/contacts/new_contact/views.cljs index 90aa2a55f4..5218ef004d 100644 --- a/src/status_im/ui/screens/contacts/new_contact/views.cljs +++ b/src/status_im/ui/screens/contacts/new_contact/views.cljs @@ -41,12 +41,13 @@ (defn toolbar-actions [new-contact-identity account error] (let [error-message (validation-error-message new-contact-identity account error)] - [{:image {:source {:uri (if (str/blank? error-message) - :icon_ok_blue - :icon_ok_disabled)} - :style icon-ok} - :handler #(when (str/blank? error-message) - (dispatch [:add-contact-handler new-contact-identity]))}])) + [{:image {:source {:uri (if (str/blank? error-message) + :icon_ok_blue + :icon_ok_disabled)} + :style icon-ok} + :handler #(when (str/blank? error-message) + (dispatch [:add-contact-handler new-contact-identity])) + :accessibility-label :confirm-button}])) (defview contact-whisper-id-input [whisper-identity error] (letsubs [current-account [:get-current-account]] @@ -54,15 +55,16 @@ (validation-error-message whisper-identity current-account error))] [view button-input-container [text-field - {:error error - :error-color color-blue - :input-style st/qr-input - :value whisper-identity - :wrapper-style button-input - :label (label :t/public-key) - :on-change-text #(do - (dispatch [:set :contacts/new-identity %]) - (dispatch [:set :contacts/new-public-key-error nil]))}] + {:error error + :error-color color-blue + :input-style st/qr-input + :value whisper-identity + :wrapper-style button-input + :label (label :t/public-key) + :on-change-text #(do + (dispatch [:set :contacts/new-identity %]) + (dispatch [:set :contacts/new-public-key-error nil])) + :accessibility-label :public-key-input}] [scan-button {:show-label? (zero? (count whisper-identity)) :handler #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} @@ -85,4 +87,3 @@ [text {:style st/address-explication :font :default} (label :t/address-explication)]]])) - diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index 30d3fbb3dc..93ebd7d94b 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -76,7 +76,7 @@ :icon-opts {:color :blue} :on-press #(dispatch [:profile/send-transaction chat-id])}]])]) -(defn profile-info-item [{:keys [label value options text-mode empty-value?]}] +(defn profile-info-item [{:keys [label value options text-mode empty-value? accessibility-label]}] [react/view styles/profile-setting-item [react/view (styles/profile-info-text-container options) [react/text {:style styles/profile-setting-title} @@ -85,8 +85,9 @@ [react/text {:style (if empty-value? styles/profile-setting-text-empty styles/profile-setting-text) - :number-of-lines 1 - :ellipsizeMode text-mode} + :number-of-lines 1 + :ellipsizeMode text-mode + :accessibility-label accessibility-label} value]] (when options [context-menu @@ -108,17 +109,19 @@ (defn profile-info-address-item [{:keys [address] :as contact}] [profile-info-item - {:label (label :t/address) - :value address - :options (profile-options contact :address address) - :text-mode :middle}]) + {:label (label :t/address) + :value address + :options (profile-options contact :address address) + :text-mode :middle + :accessibility-label :profile-address}]) (defn profile-info-public-key-item [public-key contact] [profile-info-item - {:label (label :t/public-key) - :value public-key - :options (profile-options contact :public-key public-key) - :text-mode :middle}]) + {:label (label :t/public-key) + :value public-key + :options (profile-options contact :public-key public-key) + :text-mode :middle + :accessibility-label :profile-public-key}]) (defn info-item-separator [] [separator styles/info-item-separator]) @@ -141,10 +144,11 @@ phone-text (if phone-empty? (label :t/not-specified) phone)] - [profile-info-item {:label (label :t/phone-number) - :value phone-text - :options options - :empty-value? phone-empty?}])) + [profile-info-item {:label (label :t/phone-number) + :value phone-text + :options options + :empty-value? phone-empty? + :accessibility-label :profile-phone-number}])) (defn profile-info [{:keys [whisper-identity status phone] :as contact}] [react/view