feat: Add accessibility support to the AuthenticationIdentityInputVie…

…w - WPB-15221 (#2435) Co-authored-by: El-Fitz <[email protected]>
wireapp · Jan 28, 2025 · 237f40d · 237f40d
1 parent 0b9b184
commit 237f40d
Show file tree

Hide file tree

Showing 31 changed files with 76 additions and 68 deletions.
diff --git a/WireUI/Sources/WireAuthenticationUI/Resources/en.lproj/Localizable.strings b/WireUI/Sources/WireAuthenticationUI/Resources/en.lproj/Localizable.strings
@@ -20,5 +20,3 @@
 "authentication.identity.input.field.placeholder" = "Email or SSO code";
 "authentication.identity.input.field.title" = "Email or SSO code";
 "authentication.identity.input.submit" = "Next";
-"authentication.identity.input.terms" = "By pressing on “Next”, you accept Wire’s [Terms and Conditions](%@)";
-
diff --git a/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift b/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift
@@ -29,11 +29,9 @@ package struct AuthenticationIdentityInputView: View {
 
     @State private var identity: String = ""
     private let actionCallback: @Sendable (Action) -> Void
-    private let termsURL: URL
 
-    package init(actionCallback: @escaping @Sendable (Action) -> Void, termsURL: URL) {
+    package init(actionCallback: @escaping @Sendable (Action) -> Void) {
         self.actionCallback = actionCallback
-        self.termsURL = termsURL
     }
 
     package var body: some View {
@@ -47,15 +45,19 @@ package struct AuthenticationIdentityInputView: View {
                     .frame(maxWidth: .infinity)
             }
             Text(L10n.Authentication.Identity.Input.body)
+                .multilineTextAlignment(.leading)
                 .wireTextStyle(.body1)
                 .lineLimit(nil)
+                .fixedSize(horizontal: false, vertical: true)
+                .padding(.trailing)
             LabeledTextField(
                 isMandatory: false,
                 placeholder: L10n.Authentication.Identity.Input.Field.placeholder,
                 title: L10n.Authentication.Identity.Input.Field.title,
                 string: $identity
             )
             .lineLimit(nil)
+            .fixedSize(horizontal: false, vertical: true)
             Button(action: {
                 actionCallback(.submit(identity: identity))
             }, label: {
@@ -64,19 +66,14 @@ package struct AuthenticationIdentityInputView: View {
             })
             .wireButtonStyle(.primary)
             .disabled(identity.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty)
-            Text(AttributedString.markdown(from: L10n.Authentication.Identity.Input.terms(termsURL.absoluteString)))
-                .multilineTextAlignment(.center)
-                .wireTextStyle(.subline1)
-                .lineLimit(nil)
         }
     }
 }
 
 struct AuthenticationIdentityInputPreview: View {
     var body: some View {
         AuthenticationIdentityInputView(
-            actionCallback: { _ in },
-            termsURL: URL(string: "https://example.com")!
+            actionCallback: { _ in }
         )
         .environment(\.wireTextStyleMapping, WireTextStyleMapping())
         .padding(32)
@@ -104,3 +101,16 @@ struct AuthenticationIdentityInputPreview: View {
             }
         }
 }
+
+#Preview("Large font") {
+    BackgroundView()
+        .overlay {
+            VStack(spacing: 0) {
+                Spacer()
+                    .frame(maxHeight: .infinity)
+                AuthenticationIdentityInputPreview()
+                    .background()
+            }
+        }
+        .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
+}
diff --git a/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift b/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift
@@ -53,7 +53,7 @@ public struct LabeledTextField: View {
                     ) : Text(title)
                 )
                 .foregroundStyle(titleColor)
-                .wireTextStyle(.subline1)
+                .wireTextStyle(.h4)
             }
             HStack(spacing: 0) {
                 TextField(placeholder ?? "", text: $string)

diff --git a/...nceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png b/...nceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png
diff --git a/...ceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png b/...ceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png
diff --git a/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png b/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png
diff --git a/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png b/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png
diff --git a/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png b/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png
diff --git a/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png b/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png
diff --git a/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png b/...AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png
diff --git a/...ceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png b/...ceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png
diff --git a/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png b/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png
diff --git a/...ceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png b/...ceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png
diff --git a/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png b/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png
diff --git a/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png b/...eImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png
diff --git a/...Images/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png b/...Images/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png
diff --git a/...mages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png b/...mages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png
diff --git a/...rces/ReferenceImages/TeamNameViewSnapshotTests/testColorSchemeVariants.dark.png b/...rces/ReferenceImages/TeamNameViewSnapshotTests/testColorSchemeVariants.dark.png
diff --git a/...ces/ReferenceImages/TeamNameViewSnapshotTests/testColorSchemeVariants.light.png b/...ces/ReferenceImages/TeamNameViewSnapshotTests/testColorSchemeVariants.light.png
diff --git a/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility1.png b/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility1.png
diff --git a/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility2.png b/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility2.png
diff --git a/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility3.png b/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility3.png
diff --git a/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility4.png b/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility4.png
diff --git a/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility5.png b/...enceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.accessibility5.png
diff --git a/...ces/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.large.png b/...ces/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.large.png
diff --git a/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.medium.png b/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.medium.png
diff --git a/...ces/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.small.png b/...ces/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.small.png
diff --git a/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xLarge.png b/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xLarge.png
diff --git a/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xSmall.png b/...es/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xSmall.png
diff --git a/...s/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xxLarge.png b/...s/ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xxLarge.png
diff --git a/.../ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xxxLarge.png b/.../ReferenceImages/TeamNameViewSnapshotTests/testDynamicTypeVariants.xxxLarge.png