Accessibility UI fixes (#1685)

* Fix accessibiliity in room attachment picker * Fix FormattingToolbar accessibility * Cleanup * Fix ui tests
2023-09-12 12:46:56 +02:00
parent 539028d68e
commit 7be8fb97f9
12 changed files with 46 additions and 30 deletions
--- a/ElementX/Sources/Other/SwiftUI/Layout/FixedIconSizeLabelStyle.swift
+++ b/ElementX/Sources/Other/SwiftUI/Layout/FixedIconSizeLabelStyle.swift
@@ -17,7 +17,11 @@
 import SwiftUI

 struct FixedIconSizeLabelStyle: LabelStyle {
-    @ScaledMetric private var iconSize = 24.0
+    @ScaledMetric private var iconSize: CGFloat
+
+    init(iconSize: Double = 24.0) {
+        _iconSize = .init(wrappedValue: iconSize)
+    }
    
    var spacing: CGFloat = 16
    
--- a/ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
+++ b/ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
@@ -54,24 +54,29 @@ struct ComposerToolbar: View {
    }

    private var bottomBar: some View {
-        HStack(alignment: .bottom, spacing: 10) {
-            Button {
-                context.composerActionsEnabled = false
-                context.composerExpanded = false
-            } label: {
-                Image(systemName: "xmark.circle.fill")
-                    .font(.compound.headingLG)
-                    .foregroundColor(.compound.textActionPrimary)
-            }
-            .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.closeFormattingOptions)
-            .padding(.bottom, 5) // centre align with the send button
+        HStack(alignment: .center, spacing: 10) {
+            closeRTEButton
+
            FormattingToolbar(formatItems: context.formatItems) { action in
                context.send(viewAction: .composerAction(action: action.composerAction))
            }
+
            sendButton
        }
    }

+    private var closeRTEButton: some View {
+        Button {
+            context.composerActionsEnabled = false
+            context.composerExpanded = false
+        } label: {
+            Image(systemName: "xmark.circle.fill")
+                .font(.compound.headingLG)
+                .foregroundColor(.compound.textActionPrimary)
+        }
+        .accessibilityIdentifier(A11yIdentifiers.roomScreen.composerToolbar.closeFormattingOptions)
+    }
+
    private var sendButton: some View {
        Button {
            context.send(viewAction: .sendMessage)
--- a/ElementX/Sources/Screens/ComposerToolbar/View/FormattingToolbar.swift
+++ b/ElementX/Sources/Screens/ComposerToolbar/View/FormattingToolbar.swift
@@ -22,6 +22,8 @@ struct FormattingToolbar: View {
    /// The action when an item is selected
    var formatAction: (FormatType) -> Void

+    @ScaledMetric private var toolbarButtonIconSize = 24
+
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 4) {
@@ -31,10 +33,13 @@ struct FormattingToolbar: View {
                    } label: {
                        item.icon
                            .renderingMode(.template)
+                            .resizable()
+                            .scaledToFit()
+                            .frame(width: toolbarButtonIconSize, height: toolbarButtonIconSize)
                            .foregroundColor(item.foregroundColor)
+                            .padding(10)
                    }
                    .disabled(item.state == .disabled)
-                    .frame(width: 44, height: 44)
                    .background(item.backgroundColor)
                    .cornerRadius(8)
                    .accessibilityIdentifier(item.accessibilityIdentifier)
--- a/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift
+++ b/ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift
@@ -115,8 +115,10 @@ struct RoomAttachmentPicker: View {
                Text(title)
            } icon: {
                icon
+                    .resizable()
+                    .scaledToFit()
            }
-            .labelStyle(FixedIconSizeLabelStyle())
+            .labelStyle(FixedIconSizeLabelStyle(iconSize: 20))
            .multilineTextAlignment(.leading)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(16)
--- a/UITests/Sources/Snapshots/Application/en-GB-iPad-9th-generation.userSessionScreenRTE-1.png
+++ b/UITests/Sources/Snapshots/Application/en-GB-iPad-9th-generation.userSessionScreenRTE-1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d7f556db626ee3ed168db298001c1b96c5e7d14a22388bb115eb3dfd2c4ccab
-size 404694
+oid sha256:6e293ee21632dac072329303ea9b2c7153baabfa8c48e6c7c680af4a06a53135
+size 410510
--- a/UITests/Sources/Snapshots/Application/en-GB-iPad-9th-generation.userSessionScreenRTE-2.png
+++ b/UITests/Sources/Snapshots/Application/en-GB-iPad-9th-generation.userSessionScreenRTE-2.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:acf654f8fee9ec9db076a8a170618776dee89800ca5b227dafd779d6db45827d
-size 327770
+oid sha256:fe7b1d530968d86f8a5b94a9cd52a80b0608371b684881eca5b61894c9a67cc8
+size 334128
--- a/UITests/Sources/Snapshots/Application/en-GB-iPhone-14.userSessionScreenRTE-1.png
+++ b/UITests/Sources/Snapshots/Application/en-GB-iPhone-14.userSessionScreenRTE-1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b6403aaef45f204a3de0ac10e0a1258226930ca821174a25bf3a596c60e8c316
-size 252152
+oid sha256:e8f98976b432c6fb2fc1c95eb66e1ecb0e835e7ac5d3e42ed245d21f0359c2d6
+size 255565
--- a/UITests/Sources/Snapshots/Application/en-GB-iPhone-14.userSessionScreenRTE-2.png
+++ b/UITests/Sources/Snapshots/Application/en-GB-iPhone-14.userSessionScreenRTE-2.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a002779814ca094c20052a22a87057fd669ca975819dd7a006befefa97692e20
-size 278085
+oid sha256:d3d1992f206ddb0d4984173c861f86d48b7c860cdfb71ee3f1128aa129a67eb4
+size 278064
--- a/UITests/Sources/Snapshots/Application/pseudo-iPad-9th-generation.userSessionScreenRTE-1.png
+++ b/UITests/Sources/Snapshots/Application/pseudo-iPad-9th-generation.userSessionScreenRTE-1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c3a91f32ae1b082fd0bfff8f51b273ae76544ed2570362f6b7195116ff2dc5c7
-size 390489
+oid sha256:9a9c46b2a23045f4ecbc568e966b576cb499b22ed702f1b1a1c07fb33111616d
+size 400716
--- a/UITests/Sources/Snapshots/Application/pseudo-iPad-9th-generation.userSessionScreenRTE-2.png
+++ b/UITests/Sources/Snapshots/Application/pseudo-iPad-9th-generation.userSessionScreenRTE-2.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f5075ddecf5997355ad6938fe5587e6763c87d3aa8ead6adf5d781f37a279e72
-size 329962
+oid sha256:65f7530ef4c32fec89f2074b9e1f287323521217bf1896079ad3eede65f6c0b3
+size 337112
--- a/UITests/Sources/Snapshots/Application/pseudo-iPhone-14.userSessionScreenRTE-1.png
+++ b/UITests/Sources/Snapshots/Application/pseudo-iPhone-14.userSessionScreenRTE-1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b59ef2cf7292221d20be32da9f81a524c0b9246127debc75ce3ceae671b1e209
-size 260379
+oid sha256:77631c78221f36dc9d32b46116a28804720800db00229c95b408ae46ebbc1541
+size 261699
--- a/UITests/Sources/Snapshots/Application/pseudo-iPhone-14.userSessionScreenRTE-2.png
+++ b/UITests/Sources/Snapshots/Application/pseudo-iPhone-14.userSessionScreenRTE-2.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:489bc71a45a9f943b164f69e085a70e70eac781bd2fdfee7750071936c848eb1
-size 278264
+oid sha256:2bf2ec1d452daa576410ab1c541720108975c39a64e42b76f4b12b0fdd9cda99
+size 278244