fix: use ColorTheme & implement specified accessibility labels

wireapp · Nov 14, 2024 · 12300f5 · 12300f5
1 parent d257de0
commit 12300f5
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 14 deletions.
diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/BackButton.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/BackButton.swift
@@ -18,6 +18,7 @@
 
 
 import SwiftUI
+import WireDesign
 import WireFoundation
 import WireReusableUIComponents
 
@@ -36,7 +37,7 @@ struct BackButton: View {
         .frame(maxWidth: .infinity)
         .overlay {
             RoundedRectangle(cornerRadius: 16)
-                .stroke(.gray, lineWidth: 1)
+                .stroke(Color(uiColor: ColorTheme.Strokes.outline), lineWidth: 1)
         }
         .cornerRadius(16)
     }

diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/CallToActionButton.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/CallToActionButton.swift
@@ -17,6 +17,7 @@
 //
 
 import SwiftUI
+import WireDesign
 import WireFoundation
 import WireReusableUIComponents
 
@@ -31,11 +32,11 @@ struct CallToActionButton: View {
             action: action,
             label: { Text(title) }
         )
-        .foregroundStyle(isEnabled ? .white : .primary)
+        .foregroundStyle(Color(uiColor: isEnabled ? ColorTheme.Buttons.Primary.onEnabled : ColorTheme.Buttons.Primary.onDisabled))
         .wireTextStyle(.buttonBig)
         .frame(height: 56)
         .frame(maxWidth: .infinity)
-        .background(isEnabled ? AccentColor.blue.color : .gray)
+        .background(Color(uiColor: isEnabled ? ColorTheme.Buttons.Primary.enabled : ColorTheme.Buttons.Primary.disabled))
         .cornerRadius(16)
     }
 }
diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/Checkbox.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/Checkbox.swift
@@ -17,6 +17,7 @@
 //
 
 import SwiftUI
+import WireDesign
 
 struct Checkbox: View {
     @Binding var isChecked: Bool
@@ -41,11 +42,11 @@ struct Checkbox: View {
                 if isChecked {
                     Image(systemName: "checkmark.square.fill")
                         .font(.system(size: 24))
-                        .foregroundStyle(.blue)
+                        .foregroundStyle(Color(uiColor: ColorTheme.Buttons.Primary.enabled))
                 } else {
                     Image(systemName: "square")
                         .font(.system(size: 24))
-                        .backgroundStyle(.gray)
+                        .backgroundStyle(Color(uiColor: ColorTheme.Buttons.Secondary.disabled))
                 }
             })
             .buttonStyle(.plain)

diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/PageContainer.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/Components/PageContainer.swift
@@ -43,7 +43,7 @@ struct PageContainer<Content: View>: View {
         VStack {
             Text(String.formated(key: "individualToTeam.progressCount", bundle: .module, step, stepCount))
                 .wireTextStyle(.subline1)
-                .foregroundStyle(.gray)
+                .foregroundStyle(Color(uiColor: ColorTheme.Base.secondaryText))
             Spacer()
                 .frame(height: 12)
             Text(stepTitle)

diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/IndividualToTeamMigrationViewController.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/IndividualToTeamMigrationViewController.swift
@@ -18,6 +18,7 @@
 
 import SwiftUI
 import UIKit
+import WireDesign
 import WireDomainAPI
 
 class IndividualToTeamMigrationViewController: UIViewController {
@@ -36,6 +37,19 @@ class IndividualToTeamMigrationViewController: UIViewController {
             }
         }
 
+        var closeButtonAccessibilityLabel: String {
+            switch self {
+            case .teamPlanSelection:
+                return .localizedAccessibilityLabel(key: "individualToTeam.planSelection.closeButton.accessibilityLabel", bundle: .module)
+            case .teamName:
+                return .localizedAccessibilityLabel(key: "individualToTeam.teamName.closeButton.accessibilityLabel", bundle: .module)
+            case .confirmation:
+                return .localizedAccessibilityLabel(key: "individualToTeam.confirmation.closeButton.accessibilityLabel", bundle: .module)
+            case .completion:
+                return .localizedAccessibilityLabel(key: "individualToTeam.completion.closeButton.accessibilityLabel", bundle: .module)
+            }
+        }
+
         private var titleStringKey: String.LocalizationValue {
             switch self {
             case .teamPlanSelection:
@@ -171,15 +185,15 @@ private func hostedView(
         )
     )
     vc.title = step.title
-    vc.navigationItem.rightBarButtonItem = UIBarButtonItem(
-        image: UIImage(systemName: "xmark"),
-        style: .plain,
-        target: target,
-        action: #selector(IndividualToTeamMigrationViewController.onDismissTapped)
+    vc.navigationItem.rightBarButtonItem = UIBarButtonItem.closeButton(
+        action: UIAction { _ in
+            transitionCallback(.toCancellationAlert)
+        },
+        accessibilityLabel: step.closeButtonAccessibilityLabel
     )
     // Hide navigation bar title
     vc.navigationItem.titleView = UIView()
-    vc.navigationItem.rightBarButtonItem?.tintColor = .darkText
+    vc.navigationItem.rightBarButtonItem?.tintColor = ColorTheme.Backgrounds.onBackground
     return vc
 }
 @MainActor

diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Resources/Accessibility.xcstrings b/WireUI/Sources/WireIndividualToTeamMigrationUI/Resources/Accessibility.xcstrings
@@ -1,7 +1,50 @@
 {
   "sourceLanguage" : "en",
   "strings" : {
-
+    "individualToTeam.completion.closeButton.accessibilityLabel" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Close team created view"
+          }
+        }
+      }
+    },
+    "individualToTeam.confirmation.closeButton.accessibilityLabel" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Close confirmation view"
+          }
+        }
+      }
+    },
+    "individualToTeam.planSelection.closeButton.accessibilityLabel" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Close team account overview"
+          }
+        }
+      }
+    },
+    "individualToTeam.teamName.closeButton.accessibilityLabel" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Close team name view"
+          }
+        }
+      }
+    }
   },
   "version" : "1.0"
 }
diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Resources/Localizable.xcstrings b/WireUI/Sources/WireIndividualToTeamMigrationUI/Resources/Localizable.xcstrings
@@ -102,6 +102,9 @@
           }
         }
       }
+    },
+    "individualToTeam.completion.closeButton.accessibilityLabel" : {
+
     },
     "individualToTeam.completion.headline" : {
       "extractionState" : "manual",
@@ -135,6 +138,9 @@
           }
         }
       }
+    },
+    "individualToTeam.confirmation.closeButton.accessibilityLabel" : {
+
     },
     "individualToTeam.confirmation.passwordField.forgotPassword" : {
       "extractionState" : "manual",
@@ -201,6 +207,9 @@
           }
         }
       }
+    },
+    "individualToTeam.planSelection.closeButton.accessibilityLabel" : {
+
     },
     "individualToTeam.planSelection.feature.adminConsole" : {
       "extractionState" : "manual",
@@ -311,6 +320,9 @@
           }
         }
       }
+    },
+    "individualToTeam.teamName.closeButton.accessibilityLabel" : {
+
     },
     "individualToTeam.teamName.field.placeholder" : {
       "extractionState" : "manual",

diff --git a/WireUI/Sources/WireIndividualToTeamMigrationUI/Strings.swift b/WireUI/Sources/WireIndividualToTeamMigrationUI/Strings.swift
@@ -39,7 +39,11 @@ extension String {
         String(format: .localized(key: key, bundle: bundle), arguments)
     }
 
+    static func localizedAccessibilityLabel(key: String.LocalizationValue, bundle: Bundle? = nil) -> String {
+        String(localized: key, table: "Accessibility", bundle: bundle)
+    }
+
     static func localized(key: String.LocalizationValue, bundle: Bundle? = nil) -> String {
-        String(localized: key, bundle: bundle)
+        String(localized: key, table: "Localizable", bundle: bundle)
     }
 }
diff --git a/...UI/Sources/WireReusableUIComponents/SDKExtensions/UIKit/UIBarButtonItem+CloseButton.swift b/...UI/Sources/WireReusableUIComponents/SDKExtensions/UIKit/UIBarButtonItem+CloseButton.swift
@@ -31,6 +31,8 @@ public extension UIBarButtonItem {
     ///
     /// - Returns: A UIBarButtonItem configured as a close button.
     static func closeButton(action: UIAction, accessibilityLabel: String) -> UIBarButtonItem {
+        // Uses the sf symbol instead of the image that does not exist in the WireDesign module.
+        //        let closeImage = UIImage(systemName: "xmark")
         let closeImage = UIImage(named: "Close")
 
         let closeItem = UIBarButtonItem(title: accessibilityLabel, primaryAction: action)