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

add accessibility labels for UI testing

This commit is contained in:
Eric Dvorsak 2017-09-08 14:30:12 +02:00 committed by Roman Volosovskyi
parent 949adbddb3
commit d5981c65a1
9 changed files with 61 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/status_im/accessibility_ids.cljc
View File

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

6
src/status_im/chat/views/input/input.cljs
View File

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

8
src/status_im/chat/views/message/request_message.cljs
View File

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

5
src/status_im/components/chat_icon/screen.cljs
View File

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

6
src/status_im/components/drawer/view.cljs
View File

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

9
src/status_im/components/toolbar/view.cljs
View File

@ -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}]]]))]
@ -45,9 +44,11 @@
[view (st/toolbar-actions-container (count actions) custom-action)
(if actions
(for [{action-image :image
action-handler :handler} actions]
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)]]

6
src/status_im/components/toolbar_new/actions.cljs
View File

@ -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})
: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]))

7
src/status_im/ui/screens/contacts/new_contact/views.cljs
View File

@ -46,7 +46,8 @@
:icon_ok_disabled)}
:style icon-ok}
:handler #(when (str/blank? error-message)
(dispatch [:add-contact-handler new-contact-identity]))}]))
(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]]
@ -62,7 +63,8 @@
:label (label :t/public-key)
:on-change-text #(do
(dispatch [:set :contacts/new-identity %])
(dispatch [:set :contacts/new-public-key-error nil]))}]
(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)]]]))

14
src/status_im/ui/screens/profile/views.cljs
View File

@ -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}
@ -86,7 +86,8 @@
styles/profile-setting-text-empty
styles/profile-setting-text)
:number-of-lines 1
:ellipsizeMode text-mode}
:ellipsizeMode text-mode
:accessibility-label accessibility-label}
value]]
(when options
[context-menu
@ -111,14 +112,16 @@
{:label (label :t/address)
:value address
:options (profile-options contact :address address)
:text-mode :middle}])
: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}])
:text-mode :middle
:accessibility-label :profile-public-key}])
(defn info-item-separator []
[separator styles/info-item-separator])
@ -144,7 +147,8 @@
[profile-info-item {:label (label :t/phone-number)
:value phone-text
:options options
:empty-value? phone-empty?}]))
:empty-value? phone-empty?
:accessibility-label :profile-phone-number}]))
(defn profile-info [{:keys [whisper-identity status phone] :as contact}]
[react/view