Accessibility UI fixes (#1685)

* Fix accessibiliity in room attachment picker

* Fix FormattingToolbar accessibility

* Cleanup

* Fix ui tests

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
     

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -54,24 +54,29 @@ struct ComposerToolbar: View {
     }
 
     private var bottomBar: some View {
-        HStack(alignment: .bottom, spacing: 10) {
+        HStack(alignment: .center, spacing: 10) {
-            Button {
+            closeRTEButton
-                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
             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)

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)

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)