diff --git a/src/status_im/ui/screens/main_tabs/views.cljs b/src/status_im/ui/screens/main_tabs/views.cljs index 49b2e05fbc..6cc1cfe841 100644 --- a/src/status_im/ui/screens/main_tabs/views.cljs +++ b/src/status_im/ui/screens/main_tabs/views.cljs @@ -12,18 +12,21 @@ [status-im.ui.screens.profile.user.views :as profile.user])) (def tabs-list-data - [{:view-id :home - :content {:title (i18n/label :t/home) - :icon-inactive :icons/home - :icon-active :icons/home-active}} - {:view-id :wallet - :content {:title (i18n/label :t/wallet) - :icon-inactive :icons/wallet - :icon-active :icons/wallet-active}} - {:view-id :my-profile - :content {:title (i18n/label :t/profile) - :icon-inactive :icons/profile - :icon-active :icons/profile-active}}]) + [{:view-id :home + :content {:title (i18n/label :t/home) + :icon-inactive :icons/home + :icon-active :icons/home-active} + :accessibility-label :home-tab-button} + {:view-id :wallet + :content {:title (i18n/label :t/wallet) + :icon-inactive :icons/wallet + :icon-active :icons/wallet-active} + :accessibility-label :wallet-tab-button} + {:view-id :my-profile + :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]}] (fn [active?] @@ -37,17 +40,20 @@ (def tabs-list (map #(update % :content tab-content) tabs-list-data)) -(defn- tab [view-id content active?] - [react/touchable-highlight {:style common.styles/flex - :disabled active? - :on-press #(re-frame/dispatch [:navigate-to-tab view-id])} +(defn- tab [view-id content active? accessibility-label] + [react/touchable-highlight + (cond-> {:style common.styles/flex + :disabled active? + :on-press #(re-frame/dispatch [:navigate-to-tab view-id])} + accessibility-label + (assoc :accessibility-label accessibility-label)) [react/view [content active?]]]) (defn tabs [current-view-id] [react/view {:style styles/tabs-container} - (for [{:keys [content view-id]} tabs-list] - ^{:key view-id} [tab view-id content (= view-id current-view-id)])]) + (for [{:keys [content view-id accessibility-label]} tabs-list] + ^{:key view-id} [tab view-id content (= view-id current-view-id) accessibility-label])]) (views/defview main-tabs [] (views/letsubs [view-id [:get :view-id]] diff --git a/src/status_im/ui/screens/network_settings/network_details/views.cljs b/src/status_im/ui/screens/network_settings/network_details/views.cljs index ce47902f37..92570d731f 100644 --- a/src/status_im/ui/screens/network_settings/network_details/views.cljs +++ b/src/status_im/ui/screens/network_settings/network_details/views.cljs @@ -24,7 +24,7 @@ (views/letsubs [{:keys [networks/selected-network]} [:get-screen-params] {:keys [network]} [:get-current-account]] (let [{:keys [id name config]} selected-network - connected? (= id network)] + connected? (= id network)] [react/view {:flex 1} [status-bar/status-bar] [toolbar/simple-toolbar] @@ -34,14 +34,16 @@ (when-not connected? [react/touchable-highlight {:on-press #(rf/dispatch [:connect-network id])} [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 :uppercase? (get-in platform/platform-specific [:uppercase?])} (i18n/label :t/connect)]] [react/text {:style st/connect-button-description} (i18n/label :t/connecting-requires-login)]]]) [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]] ;; TODO(rasom): uncomment edit-button when it will be functional, ;; https://github.com/status-im/status-react/issues/2104 diff --git a/src/status_im/ui/screens/network_settings/views.cljs b/src/status_im/ui/screens/network_settings/views.cljs index e7fd488c36..8dbcd61513 100644 --- a/src/status_im/ui/screens/network_settings/views.cljs +++ b/src/status_im/ui/screens/network_settings/views.cljs @@ -45,14 +45,16 @@ (fn [{:keys [id name config] :as network}] (let [connected? (= id current-network)] [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 [network-icon connected? 40] [react/view {:padding-horizontal 16} [react/text {:style styles/network-item-name-text} name] (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)])]]]))) (views/defview network-settings [] diff --git a/src/status_im/ui/screens/offline_messaging_settings/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/views.cljs index 9903f403a3..72ac4c1d60 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/views.cljs @@ -24,7 +24,8 @@ [react/list-item ^{:key row} [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 [wnode-icon connected?] [react/view styles/wnode-item-inner diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index ef7f6566c3..30f5c840d5 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -16,12 +16,13 @@ (defn profile-name-input [name on-change-text-event] [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 %]))}]]) + {: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}]]) (defn show-profile-icon-actions [options] (when (seq options) @@ -40,7 +41,8 @@ (defn profile-header-edit [{:keys [name] :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)} + [react/touchable-highlight {:on-press #(show-profile-icon-actions icon-options) + :accessibility-label :edit-profile-photo-button} [react/view styles/modal-menu [chat-icon.screen/my-profile-icon {:account contact :edit? allow-icon-change?}]]] @@ -61,10 +63,12 @@ [react/text {:style styles/settings-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 - {:on-press action-fn - :disabled (not active?)} + (cond-> {:on-press action-fn + :disabled (not active?)} + accessibility-label + (assoc :accessibility-label accessibility-label)) [react/view styles/settings-item [react/view styles/settings-item-text-wrapper [react/text {:style styles/settings-item-text diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 330f19a34a..b0913eb194 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -26,7 +26,8 @@ nil [toolbar/content-title ""] [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/text {:style common.styles/label-action-text :uppercase? components.styles/uppercase?} (i18n/label :t/edit)]]]]) @@ -35,9 +36,10 @@ [toolbar/toolbar {} nil [toolbar/content-title ""] - [toolbar/default-done {:handler #(re-frame/dispatch [:my-profile/save-profile]) - :icon :icons/ok - :icon-opts {:color colors/blue}}]]) + [toolbar/default-done {:handler #(re-frame/dispatch [:my-profile/save-profile]) + :icon :icons/ok + :icon-opts {:color colors/blue} + :accessibility-label :done-button}]]) (def profile-icon-options [{:label (i18n/label :t/image-source-gallery) @@ -52,10 +54,12 @@ (defn qr-viewer-toolbar [label value] [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/actions [{:icon :icons/share - :icon-opts {:color :black} + :icon-opts {:color :black + :accessibility-label :share-code-button} :handler #(list-selection/open-share {:message value})}]]]) (defview qr-viewer [] @@ -78,7 +82,8 @@ [react/text {:style styles/share-contact-code-text :uppercase? components.styles/uppercase?} (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}]]]]) (defn my-profile-settings [{:keys [network networks]}] @@ -86,15 +91,17 @@ [profile.components/settings-title (i18n/label :t/settings)] [profile.components/settings-item :t/main-currency "USD" #() false] [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 :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? [profile.components/settings-item-separator]) (when config/offline-inbox-enabled? [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 [] ;; TODO(rasom): probably not the best place for this call @@ -109,7 +116,8 @@ (defn logout [] [react/view {} [react/touchable-highlight - {:on-press handle-logout} + {:on-press handle-logout + :accessibility-label :log-out-button} [react/view profile.components.styles/settings-item [react/text {:style styles/logout-text :font (if platform/android? :medium :default)}