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 #3479] Add accessibility labels for Chat screens 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Foo Pang 2018-03-22 15:59:32 +08:00 committed by Andrey Shovkoplyas
parent 3ba9bdef7b
commit e85823056c
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
13 changed files with 145 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/bots/transactor/bot.js
View File

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

6
src/status_im/chat/screen.cljs
View File

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

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

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

17
src/status_im/chat/views/input/suggestions.cljs
View File

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

2
src/status_im/chat/views/message/message.cljs
View File

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

19
src/status_im/chat/views/toolbar_content.cljs
View File

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

8
src/status_im/ui/components/common/common.cljs
View File

@ -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}]]))
[react/image {:source source :resizeMode :contain :style styles/image-contain-image}]]))

19
src/status_im/ui/components/contact/contact.cljs
View File

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

7
src/status_im/ui/screens/home/views.cljs
View File

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

37
src/status_im/ui/screens/home/views/inner_item.cljs
View File

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

24
src/status_im/ui/screens/profile/components/views.cljs
View File

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

28
src/status_im/ui/screens/profile/contact/views.cljs
View File

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

67
src/status_im/ui/screens/profile/group_chat/views.cljs
View File

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