Ens view list items

Remove extra fn's

Long press animation cancel

Make select primary ens accessible

Add accessibility to controls components

Update e2e tests

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

src/quo/animated.cljs

@@ -103,13 +103,13 @@
             else-node))))
 
 (defn block [opts]
-  (.block ^js animated (clj->js opts)))
+  (.block ^js animated (to-array opts)))
 
 (defn interpolate [anim-value config]
   (.interpolate ^js animated anim-value (clj->js config)))
 
 (defn call* [args callback]
-  (.call ^js animated (clj->js args) callback))
+  (.call ^js animated (to-array args) callback))
 
 (defn timing [clock-value opts config]
   (.timing ^js animated
@@ -126,6 +126,7 @@
 ;; utilities
 
 (def clamp (oget redash "clamp"))
+(def diff-clamp (.-diffClamp ^js redash))
 
 (defn with-spring [config]
   (ocall redash "withSpring" (clj->js config)))
@@ -136,9 +137,6 @@
 (defn with-offset [config]
   (.withOffset ^js redash (clj->js config)))
 
-(defn diff-clamp [node min max]
-  (.diffClamp ^js redash node min max))
-
 (defn with-spring-transition [val config]
   (.withSpringTransition ^js redash val (clj->js config)))
 
@@ -165,11 +163,9 @@
     {:onHandlerStateChange gesture-event
      :onGestureEvent       gesture-event}))
 
-(defn mix [anim-value a b]
+(def mix (.-mix ^js redash))
-  (.mix ^js redash anim-value a b))
 
-(defn mix-color [anim-value a b]
+(def mix-color (.-mixColor ^js redash))
-  (.mixColor ^js redash anim-value a b))
 
 (defn loop* [opts]
   (ocall redash "loop" (clj->js opts)))

src/quo/components/animated/pressable.cljs

@@ -86,12 +86,12 @@
         handle-press         (fn [] (when on-press (on-press)))
         long-gesture-handler (react/callback
                               (fn [^js evt]
-                                (let [state (-> evt .-nativeEvent .-state)]
+                                (let [gesture-state (-> evt .-nativeEvent .-state)]
                                   (when (and on-press-start
-                                             (= state (:began gesture-handler/states)))
+                                             (= gesture-state (:began gesture-handler/states)))
                                     (on-press-start))
                                   (when (and on-long-press
-                                             (= state (:active gesture-handler/states)))
+                                             (= gesture-state (:active gesture-handler/states)))
                                     (on-long-press)
                                     (animated/set-value state (:undetermined gesture-handler/states)))))
                               [on-long-press on-press-start])]

src/quo/components/controls/view.cljs

@@ -54,15 +54,21 @@
                      :hold       hold}]]]))))
 
 (defn switch-view [{:keys [transition hold]}]
-  [animated/view {:style (styles/switch-style transition)}
+  [animated/view {:style               (styles/switch-style transition)
+                  :accessibility-label :switch
+                  :accessibility-role  :switch}
    [animated/view {:style (styles/switch-bullet-style transition hold)}]])
 
 (defn radio-view [{:keys [transition hold]}]
-  [animated/view {:style (styles/radio-style transition)}
+  [animated/view {:style (styles/radio-style transition)
+                  :accessibility-label :radio
+                  :accessibility-role  :radio}
    [animated/view {:style (styles/radio-bullet-style transition hold)}]])
 
 (defn checkbox-view [{:keys [transition hold]}]
-  [animated/view {:style (styles/checkbox-style transition)}
+  [animated/view {:style               (styles/checkbox-style transition)
+                  :accessibility-label :checkbox
+                  :accessibility-role  :checkbox}
    [animated/view {:style (styles/check-icon-style transition hold)}
     [icons/tiny-icon :tiny-icons/tiny-check {:color colors/white}]]])
 

src/status_im/ui/screens/ens/views.cljs

@@ -13,7 +13,6 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.ui.components.radio :as radio]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.screens.chat.utils :as chat.utils]
@@ -580,12 +579,13 @@
   (let [stateofus-username (stateofus/username name)
         s                  (or stateofus-username name)]
     [quo/list-item
-     {:title       s
+     (merge {:title    s
-      :subtitle    (if subtitle
+             :subtitle (if subtitle
-                     subtitle
+                         subtitle
-                     (when stateofus-username stateofus/domain))
+                         (when stateofus-username stateofus/domain))
-      :on-press    action
+             :icon     :main-icons/username}
-      :icon        :main-icons/username}]))
+            (when action
+              {:on-press action}))]))
 
 (defn- name-list [names preferred-name]
   [react/view {:style {:flex 1 :margin-top 16}}
@@ -596,29 +596,34 @@
      [{:style {:color colors/black :text-align :center}}
       (str "\n@" preferred-name)]]]
    [react/view {:style {:flex 1 :margin-top 8}}
-    [react/scroll-view {:style {:flex 1}}
+    (for [name names]
-     [react/view {:style {:flex 1}}
+      (let [action             #(do (re-frame/dispatch [::ens/save-preferred-name name])
-      (for [name names]
+                                    (re-frame/dispatch [:bottom-sheet/hide]))
-        (let [action #(do (re-frame/dispatch [::ens/save-preferred-name name])
+            stateofus-username (stateofus/username name)
-                          (re-frame/dispatch [:bottom-sheet/hide]))]
+            s                  (or stateofus-username name)]
-          ^{:key name}
+        ^{:key name}
-          [react/touchable-highlight {:on-press action}
+        [quo/list-item
-           [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center :margin-right 16}}
+         {:accessibility-label (if (= name preferred-name)
-            [react/view {:style {:flex 1}}
+                                 :primary-username
-             [name-item {:name name :hide-chevron? true :action action}]]
+                                 :not-primary-username)
-            [radio/radio (= name preferred-name)]]]))]]]])
+          :title               s
+          :subtitle            (when stateofus-username stateofus/domain)
+          :icon                :main-icons/username
+          :on-press            action
+          :accessory           :radio
+          :active              (= name preferred-name)}]))]])
 
 (views/defview in-progress-registrations [registrations]
   [react/view {:style {:margin-top 8}}
    (for [[hash {:keys [state username]}] registrations
-         :when (or (= state :submitted) (= state :failure))]
+         :when                           (or (= state :submitted) (= state :failure))]
      ^{:key hash}
-     [name-item {:name username
+     [name-item {:name     username
-                 :action (when-not (= state :submitted)
+                 :action   (when-not (= state :submitted)
-                           #(re-frame/dispatch [:clear-ens-registration hash]))
+                             #(re-frame/dispatch [:clear-ens-registration hash]))
                  :subtitle (case state
                              :submitted (i18n/label :t/ens-registration-in-progress)
-                             :failure (i18n/label :t/ens-registration-failure)
+                             :failure   (i18n/label :t/ens-registration-failure)
                              nil)}])])
 
 (views/defview my-name []
@@ -644,8 +649,9 @@
        [react/view {:style {:margin-top 8}}
         (for [name names]
           ^{:key name}
-          [name-item {:name name :action #(re-frame/dispatch [::ens/navigate-to-name name])}])]
+          [name-item {:name   name
-       [react/text {:style {:color colors/gray :font-size 15
+                      :action #(re-frame/dispatch [::ens/navigate-to-name name])}])]
+       [react/text {:style {:color             colors/gray :font-size 15
                             :margin-horizontal 16}}
         (i18n/label :t/ens-no-usernames)])]
     [react/view {:style {:padding-vertical 22 :border-color colors/gray-lighter :border-top-width 1}}
@@ -658,13 +664,11 @@
           :value     preferred-name
           :action-fn #(re-frame/dispatch [:bottom-sheet/show-sheet
                                           {:content
-                                           (fn [] (name-list names preferred-name))
+                                           (fn [] (name-list names preferred-name))}])}]])]
-                                           :content-height
+    (let [message {:content       {:parsed-text
-                                           (+ 72 (* (min 4 (count names)) 64))}])}]])]
+                                   [{:type     "paragraph"
-    (let [message {:content {:parsed-text
+                                     :children [{:literal (i18n/label :t/ens-test-message)}]}]}
-                             [{:type "paragraph"
+                   :content-type  constants/content-type-text
-                               :children [{:literal (i18n/label :t/ens-test-message)}]}]}
-                   :content-type constants/content-type-text
                    :timestamp-str "9:41 AM"}]
       [react/view
        [react/view {:padding-left 72}

test/appium/views/dapps_view.py

@@ -73,10 +73,9 @@ class SelectAccountRadioButton(BaseButton):
         self.locator = self.Locator.xpath_selector("//*[@text='%s']/../../android.view.ViewGroup/android.view.ViewGroup[2]" % account_name)
 
 class SetPrimaryUsername(BaseButton):
-    def __init__(self, driver, ens_name):
+    def __init__(self, driver):
         super(SetPrimaryUsername, self).__init__(driver)
-        self.locator = self.Locator.xpath_selector(
+        self.locator = self.Locator.accessibility_id('not-primary-username')
-            "(//android.widget.ScrollView//*[@text='%s'])[2]/../../../android.view.ViewGroup[2]" % ens_name)
 
 
 class AlwaysAllowRadioButton(BaseButton):
@@ -144,4 +143,5 @@ class DappsView(BaseView):
         return SelectAccountRadioButton(self.driver, account_name)
 
     def set_primary_ens_username(self, ens_name):
-        return SetPrimaryUsername(self.driver, ens_name)
+        self.driver.info("Set {} as primary ENS name".format(ens_name))
+        return SetPrimaryUsername(self.driver)

test/appium/views/wallet_view.py

@@ -50,7 +50,7 @@ class AssetText(BaseText):
 class AssetFullNameInAssets(BaseText):
     def __init__(self, driver):
         super(AssetFullNameInAssets, self).__init__(driver)
-        self.locator = self.Locator.xpath_selector('//*[@content-desc="checkbox"]/../android.widget.TextView[1]')
+        self.locator = self.Locator.xpath_selector('//*[@content-desc="checkbox"]/../../android.widget.TextView[1]')
 
 
 class AssetSymbolInAssets(BaseText):