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

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]
{: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

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

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

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

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

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

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

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