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

[Fix #3472] Add accessibility labels for Profile screens 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Foo Pang 2018-03-07 17:19:06 +08:00 committed by Julien Eluard
parent 98a0c2081f
commit 4756b187ff
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
6 changed files with 68 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/status_im/ui/screens/main_tabs/views.cljs
View File

@ -12,18 +12,21 @@
[status-im.ui.screens.profile.user.views :as profile.user])) [status-im.ui.screens.profile.user.views :as profile.user]))
(def tabs-list-data (def tabs-list-data
[{:view-id :home [{:view-id :home
:content {:title (i18n/label :t/home) :content {:title (i18n/label :t/home)
:icon-inactive :icons/home :icon-inactive :icons/home
:icon-active :icons/home-active}} :icon-active :icons/home-active}
{:view-id :wallet :accessibility-label :home-tab-button}
:content {:title (i18n/label :t/wallet) {:view-id :wallet
:icon-inactive :icons/wallet :content {:title (i18n/label :t/wallet)
:icon-active :icons/wallet-active}} :icon-inactive :icons/wallet
{:view-id :my-profile :icon-active :icons/wallet-active}
:content {:title (i18n/label :t/profile) :accessibility-label :wallet-tab-button}
:icon-inactive :icons/profile {:view-id :my-profile
:icon-active :icons/profile-active}}]) :content {:title (i18n/label :t/profile)
:icon-inactive :icons/profile
:icon-active :icons/profile-active}
:accessibility-label :profile-tab-button}])
(defn- tab-content [{:keys [title icon-active icon-inactive]}] (defn- tab-content [{:keys [title icon-active icon-inactive]}]
(fn [active?] (fn [active?]
@ -37,17 +40,20 @@
(def tabs-list (map #(update % :content tab-content) tabs-list-data)) (def tabs-list (map #(update % :content tab-content) tabs-list-data))
(defn- tab [view-id content active?] (defn- tab [view-id content active? accessibility-label]
[react/touchable-highlight {:style common.styles/flex [react/touchable-highlight
:disabled active? (cond-> {:style common.styles/flex
:on-press #(re-frame/dispatch [:navigate-to-tab view-id])} :disabled active?
:on-press #(re-frame/dispatch [:navigate-to-tab view-id])}
accessibility-label
(assoc :accessibility-label accessibility-label))
[react/view [react/view
[content active?]]]) [content active?]]])
(defn tabs [current-view-id] (defn tabs [current-view-id]
[react/view {:style styles/tabs-container} [react/view {:style styles/tabs-container}
(for [{:keys [content view-id]} tabs-list] (for [{:keys [content view-id accessibility-label]} tabs-list]
^{:key view-id} [tab view-id content (= view-id current-view-id)])]) ^{:key view-id} [tab view-id content (= view-id current-view-id) accessibility-label])])
(views/defview main-tabs [] (views/defview main-tabs []
(views/letsubs [view-id [:get :view-id]] (views/letsubs [view-id [:get :view-id]]

8
src/status_im/ui/screens/network_settings/network_details/views.cljs
View File

@ -24,7 +24,7 @@
(views/letsubs [{:keys [networks/selected-network]} [:get-screen-params] (views/letsubs [{:keys [networks/selected-network]} [:get-screen-params]
{:keys [network]} [:get-current-account]] {:keys [network]} [:get-current-account]]
(let [{:keys [id name config]} selected-network (let [{:keys [id name config]} selected-network
connected? (= id network)] connected? (= id network)]
[react/view {:flex 1} [react/view {:flex 1}
[status-bar/status-bar] [status-bar/status-bar]
[toolbar/simple-toolbar] [toolbar/simple-toolbar]
@ -34,14 +34,16 @@
(when-not connected? (when-not connected?
[react/touchable-highlight {:on-press #(rf/dispatch [:connect-network id])} [react/touchable-highlight {:on-press #(rf/dispatch [:connect-network id])}
[react/view st/connect-button-container [react/view st/connect-button-container
[react/view st/connect-button [react/view {:style st/connect-button
:accessibility-label :network-connect-button}
[react/text {:style st/connect-button-label [react/text {:style st/connect-button-label
:uppercase? (get-in platform/platform-specific [:uppercase?])} :uppercase? (get-in platform/platform-specific [:uppercase?])}
(i18n/label :t/connect)]] (i18n/label :t/connect)]]
[react/text {:style st/connect-button-description} [react/text {:style st/connect-button-description}
(i18n/label :t/connecting-requires-login)]]]) (i18n/label :t/connecting-requires-login)]]])
[react/view st/network-config-container [react/view st/network-config-container
[react/text {:style st/network-config-text} [react/text {:style st/network-config-text
:accessibility-label :network-details-text}
config]] config]]
;; TODO(rasom): uncomment edit-button when it will be functional, ;; TODO(rasom): uncomment edit-button when it will be functional,
;; https://github.com/status-im/status-react/issues/2104 ;; https://github.com/status-im/status-react/issues/2104

6
src/status_im/ui/screens/network_settings/views.cljs
View File

@ -45,14 +45,16 @@
(fn [{:keys [id name config] :as network}] (fn [{:keys [id name config] :as network}]
(let [connected? (= id current-network)] (let [connected? (= id current-network)]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:navigate-to :network-details {:networks/selected-network network}])} {:on-press #(re-frame/dispatch [:navigate-to :network-details {:networks/selected-network network}])
:accessibility-label :network-item}
[react/view styles/network-item [react/view styles/network-item
[network-icon connected? 40] [network-icon connected? 40]
[react/view {:padding-horizontal 16} [react/view {:padding-horizontal 16}
[react/text {:style styles/network-item-name-text} [react/text {:style styles/network-item-name-text}
name] name]
(when connected? (when connected?
[react/text {:style styles/network-item-connected-text} [react/text {:style styles/network-item-connected-text
:accessibility-label :connected-text}
(i18n/label :t/connected)])]]]))) (i18n/label :t/connected)])]]])))
(views/defview network-settings [] (views/defview network-settings []

3
src/status_im/ui/screens/offline_messaging_settings/views.cljs
View File

@ -24,7 +24,8 @@
[react/list-item [react/list-item
^{:key row} ^{:key row}
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:connect-wnode id])} {:on-press #(re-frame/dispatch [:connect-wnode id])
:accessibility-label :mailserver-item}
[react/view styles/wnode-item [react/view styles/wnode-item
[wnode-icon connected?] [wnode-icon connected?]
[react/view styles/wnode-item-inner [react/view styles/wnode-item-inner

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

@ -16,12 +16,13 @@
(defn profile-name-input [name on-change-text-event] (defn profile-name-input [name on-change-text-event]
[react/view [react/view
[react/text-input [react/text-input
{:style styles/profile-name-input-text {:style styles/profile-name-input-text
:placeholder "" :placeholder ""
:default-value name :default-value name
:auto-focus true :auto-focus true
:on-change-text #(when on-change-text-event :on-change-text #(when on-change-text-event
(re-frame/dispatch [on-change-text-event %]))}]]) (re-frame/dispatch [on-change-text-event %]))
:accessibility-label :username-input}]])
(defn show-profile-icon-actions [options] (defn show-profile-icon-actions [options]
(when (seq options) (when (seq options)
@ -40,7 +41,8 @@
(defn profile-header-edit [{:keys [name] :as contact} (defn profile-header-edit [{:keys [name] :as contact}
icon-options on-change-text-event allow-icon-change?] icon-options on-change-text-event allow-icon-change?]
[react/view styles/profile-header-edit [react/view styles/profile-header-edit
[react/touchable-highlight {:on-press #(show-profile-icon-actions icon-options)} [react/touchable-highlight {:on-press #(show-profile-icon-actions icon-options)
:accessibility-label :edit-profile-photo-button}
[react/view styles/modal-menu [react/view styles/modal-menu
[chat-icon.screen/my-profile-icon {:account contact [chat-icon.screen/my-profile-icon {:account contact
:edit? allow-icon-change?}]]] :edit? allow-icon-change?}]]]
@ -61,10 +63,12 @@
[react/text {:style styles/settings-title} [react/text {:style styles/settings-title}
title]) title])
(defn settings-item [label-kw value action-fn active?] (defn settings-item [label-kw value action-fn active? & [accessibility-label]]
[react/touchable-highlight [react/touchable-highlight
{:on-press action-fn (cond-> {:on-press action-fn
:disabled (not active?)} :disabled (not active?)}
accessibility-label
(assoc :accessibility-label accessibility-label))
[react/view styles/settings-item [react/view styles/settings-item
[react/view styles/settings-item-text-wrapper [react/view styles/settings-item-text-wrapper
[react/text {:style styles/settings-item-text [react/text {:style styles/settings-item-text

30
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -26,7 +26,8 @@
nil nil
[toolbar/content-title ""] [toolbar/content-title ""]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:my-profile/start-editing-profile])} {:on-press #(re-frame/dispatch [:my-profile/start-editing-profile])
:accessibility-label :edit-button}
[react/view [react/view
[react/text {:style common.styles/label-action-text [react/text {:style common.styles/label-action-text
:uppercase? components.styles/uppercase?} (i18n/label :t/edit)]]]]) :uppercase? components.styles/uppercase?} (i18n/label :t/edit)]]]])
@ -35,9 +36,10 @@
[toolbar/toolbar {} [toolbar/toolbar {}
nil nil
[toolbar/content-title ""] [toolbar/content-title ""]
[toolbar/default-done {:handler #(re-frame/dispatch [:my-profile/save-profile]) [toolbar/default-done {:handler #(re-frame/dispatch [:my-profile/save-profile])
:icon :icons/ok :icon :icons/ok
:icon-opts {:color colors/blue}}]]) :icon-opts {:color colors/blue}
:accessibility-label :done-button}]])
(def profile-icon-options (def profile-icon-options
[{:label (i18n/label :t/image-source-gallery) [{:label (i18n/label :t/image-source-gallery)
@ -52,10 +54,12 @@
(defn qr-viewer-toolbar [label value] (defn qr-viewer-toolbar [label value]
[toolbar/toolbar {} [toolbar/toolbar {}
[toolbar/default-done {:icon-opts {:color colors/black}}] [toolbar/default-done {:icon-opts {:color colors/black}
:accessibility-label :done-button}]
[toolbar/content-title label] [toolbar/content-title label]
[toolbar/actions [{:icon :icons/share [toolbar/actions [{:icon :icons/share
:icon-opts {:color :black} :icon-opts {:color :black
:accessibility-label :share-code-button}
:handler #(list-selection/open-share {:message value})}]]]) :handler #(list-selection/open-share {:message value})}]]])
(defview qr-viewer [] (defview qr-viewer []
@ -78,7 +82,8 @@
[react/text {:style styles/share-contact-code-text [react/text {:style styles/share-contact-code-text
:uppercase? components.styles/uppercase?} :uppercase? components.styles/uppercase?}
(i18n/label :t/share-contact-code)]] (i18n/label :t/share-contact-code)]]
[react/view styles/share-contact-icon-container [react/view {:style styles/share-contact-icon-container
:accessibility-label :share-my-contact-code-button}
[vector-icons/icon :icons/qr {:color colors/blue}]]]]) [vector-icons/icon :icons/qr {:color colors/blue}]]]])
(defn my-profile-settings [{:keys [network networks]}] (defn my-profile-settings [{:keys [network networks]}]
@ -86,15 +91,17 @@
[profile.components/settings-title (i18n/label :t/settings)] [profile.components/settings-title (i18n/label :t/settings)]
[profile.components/settings-item :t/main-currency "USD" #() false] [profile.components/settings-item :t/main-currency "USD" #() false]
[profile.components/settings-item-separator] [profile.components/settings-item-separator]
[profile.components/settings-item :t/notifications "" #(.openURL react/linking "app-settings://notification/status-im") true] [profile.components/settings-item :t/notifications "" #(.openURL react/linking "app-settings://notification/status-im") true
:notifications-button]
[profile.components/settings-item-separator] [profile.components/settings-item-separator]
[profile.components/settings-item :t/network (get-in networks [network :name]) [profile.components/settings-item :t/network (get-in networks [network :name])
#(re-frame/dispatch [:navigate-to :network-settings]) true] #(re-frame/dispatch [:navigate-to :network-settings]) true :network-button]
(when config/offline-inbox-enabled? (when config/offline-inbox-enabled?
[profile.components/settings-item-separator]) [profile.components/settings-item-separator])
(when config/offline-inbox-enabled? (when config/offline-inbox-enabled?
[profile.components/settings-item :t/offline-messaging-settings "" [profile.components/settings-item :t/offline-messaging-settings ""
#(re-frame/dispatch [:navigate-to :offline-messaging-settings]) true])]) #(re-frame/dispatch [:navigate-to :offline-messaging-settings]) true
:offline-messages-settings-button])])
(defn navigate-to-accounts [] (defn navigate-to-accounts []
;; TODO(rasom): probably not the best place for this call ;; TODO(rasom): probably not the best place for this call
@ -109,7 +116,8 @@
(defn logout [] (defn logout []
[react/view {} [react/view {}
[react/touchable-highlight [react/touchable-highlight
{:on-press handle-logout} {:on-press handle-logout
:accessibility-label :log-out-button}
[react/view profile.components.styles/settings-item [react/view profile.components.styles/settings-item
[react/text {:style styles/logout-text [react/text {:style styles/logout-text
:font (if platform/android? :medium :default)} :font (if platform/android? :medium :default)}