Improve voice over labels and actions (#726)

laevandus · web-flow · commit 1ceac73d9d42 · 2025-01-23T08:38:18.000Z
* Improve voice over labels and navigation

* Numerous label fixes, image removals, and actions

* Fix UI-tests caused by adding accessibility actions which changes elements to buttons
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,8 +5,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### 🐞 Fixed
 - Fix thread reply action shown when inside a Thread [#717](https://github.com/GetStream/stream-chat-swiftui/pull/717)
+- Improve voice over by adding missing labels, removing decorative images, and setting accessibility actions [#726](https://github.com/GetStream/stream-chat-swiftui/pull/726)
 ### 🔄 Changed
 - Deprecate unused `ChatMessage.userDisplayInfo(from:)` which only accessed cached data [#718](https://github.com/GetStream/stream-chat-swiftui/pull/718)
+### 🎭 New Localizations
+Add localizable keys for supporting accessibility labels:
+- `channel.list.scroll-to-bottom.title`
+- `channel.header.info.title`
+- `message.attachment.accessibility-label`
+- `message.read-status.seen-by*`
+- `message.cell.sent-at`
+- `composer.picker.show-all`
+- `composer.audio-recording.*`
 
 # [4.70.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.70.0)
 _January 15, 2025_
diff --git a/DemoAppSwiftUI/ChannelHeader/CustomChannelHeader.swift b/DemoAppSwiftUI/ChannelHeader/CustomChannelHeader.swift
@@ -36,12 +36,15 @@ public struct CustomChannelHeader: ToolbarContent {
                     .background(colors.tintColor)
                     .clipShape(Circle())
             }
+            .accessibilityLabel(Text("New Channel"))
         }
         ToolbarItem(placement: .navigationBarLeading) {
             Button {
                 actionsPopupShown = true
             } label: {
                 StreamLazyImage(url: currentUserController.currentUser?.imageURL)
+                    .accessibilityLabel("Account Actions")
+                    .accessibilityAddTraits(.isButton)
             }
         }
     }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/ChatChannelHeaderViewModifier.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelHeader/ChatChannelHeaderViewModifier.swift
@@ -71,20 +71,23 @@ public struct DefaultChatChannelHeader: ToolbarContent {
                         .clipShape(Circle())
                         .offset(x: 8)
                 }
+                .accessibilityLabel(Text(L10n.Channel.Header.Info.title))
 
                 NavigationLink(isActive: $isActive) {
                     LazyView(ChatChannelInfoView(channel: channel, shownFromMessageList: true))
                 } label: {
                     EmptyView()
                 }
-
+                .accessibilityHidden(true)
+                
                 ChannelAvatarView(
                     avatar: headerImage,
                     showOnlineIndicator: onlineIndicatorShown,
                     size: CGSize(width: 36, height: 36)
                 )
                 .offset(x: 8)
                 .allowsHitTesting(false)
+                .accessibilityHidden(true)
             }
             .accessibilityIdentifier("ChannelAvatarView")
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/ChatChannelInfoView.swift b/Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/ChatChannelInfoView.swift
@@ -112,6 +112,9 @@ public struct ChatChannelInfoView: View, KeyboardReadable {
                         .onTapGesture {
                             viewModel.addUsersShown = false
                         }
+                        .accessibilityAction {
+                            viewModel.addUsersShown = false
+                        }
                     AddUsersView(
                         loadedUserIds: viewModel.participants.map(\.id),
                         onUserTap: viewModel.addUserTapped(_:)
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/AttachmentPickerTypeView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/AttachmentPickerTypeView.swift
@@ -56,6 +56,7 @@ public struct AttachmentPickerTypeView: View {
                         pickerType: .media,
                         selected: attachmentPickerType
                     )
+                    .accessibilityLabel(Text(L10n.Composer.Picker.showAll))
                     .accessibilityIdentifier("PickerTypeButtonMedia")
                 }
 
@@ -65,6 +66,7 @@ public struct AttachmentPickerTypeView: View {
                         pickerType: .instantCommands,
                         selected: attachmentPickerType
                     )
+                    .accessibilityLabel(Text(L10n.Composer.Suggestions.Commands.header))
                     .accessibilityIdentifier("PickerTypeButtonCommands")
                 }
             case .collapsed:
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/AttachmentPickerView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/AttachmentPickerView.swift
@@ -159,6 +159,7 @@ public struct AttachmentSourcePickerView: View {
                 isSelected: selected == .files,
                 onTap: onTap
             )
+            .accessibilityLabel(L10n.Composer.Picker.file)
             .accessibilityIdentifier("attachmentPickerFiles")
 
             AttachmentPickerButton(
@@ -176,6 +177,7 @@ public struct AttachmentSourcePickerView: View {
                     isSelected: selected == .polls,
                     onTap: onTap
                 )
+                .accessibilityLabel(L10n.Composer.Polls.createPoll)
                 .accessibilityIdentifier("attachmentPickerPolls")
             }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/SendMessageButton.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/SendMessageButton.swift
@@ -31,7 +31,7 @@ public struct SendMessageButton: View {
                 )
         }
         .disabled(!enabled)
-        .accessibilityAddTraits(.isButton)
+        .accessibilityLabel(Text(L10n.Composer.Placeholder.message))
         .accessibilityIdentifier("SendMessageButton")
     }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/TrailingComposerView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/TrailingComposerView.swift
@@ -85,5 +85,12 @@ public struct VoiceRecordingButton: View {
                         }
                     }
             )
+            .accessibilityRemoveTraits(.isImage)
+            .accessibilityAddTraits(.isButton)
+            .accessibilityLabel(Text(L10n.Composer.AudioRecording.start))
+            .accessibilityAction {
+                viewModel.recordingState = .recording(.zero)
+                viewModel.startRecording()
+            }
     }
 }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Composer/VoiceRecording/RecordingView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Composer/VoiceRecording/RecordingView.swift
@@ -20,6 +20,7 @@ struct RecordingView: View {
         HStack {
             Image(systemName: "mic")
                 .foregroundColor(.red)
+                .accessibilityHidden(true)
             RecordingDurationView(duration: audioRecordingInfo.duration)
             
             Spacer()
@@ -30,6 +31,7 @@ struct RecordingView: View {
             }
             .foregroundColor(Color(colors.textLowEmphasis))
             .opacity(opacityForSlideToCancel)
+            .accessibilityHidden(true)
             
             Spacer()
             
@@ -38,6 +40,7 @@ struct RecordingView: View {
             } label: {
                 Image(systemName: "mic")
             }
+            .accessibilityLabel(Text(L10n.Composer.AudioRecording.stop))
         }
         .padding(.all, 12)
         .overlay(
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift
@@ -215,6 +215,7 @@ struct VoiceRecordingView: View {
                     .resizable()
                     .aspectRatio(contentMode: .fit)
                     .frame(height: 40)
+                    .accessibilityHidden(true)
             }
         }
         .onReceive(handler.$context, perform: { value in
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/BottomReactionsView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/BottomReactionsView.swift
@@ -95,6 +95,9 @@ struct BottomReactionsView: View {
                     .onLongPressGesture {
                         onLongPress()
                     }
+                    .accessibilityAction {
+                        viewModel.reactionTapped(reaction)
+                    }
                 }
             }
             
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentView.swift
@@ -97,6 +97,9 @@ public struct FileAttachmentView: View {
             .onTapGesture {
                 fullScreenShown = true
             }
+            .accessibilityAction {
+                fullScreenShown = true
+            }
 
             Spacer()
         }
@@ -134,6 +137,7 @@ public struct FileAttachmentDisplayView: View {
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 34, height: 40)
+                .accessibilityHidden(true)
             VStack(alignment: .leading, spacing: 8) {
                 Text(title)
                     .font(fonts.bodyBold)
@@ -146,6 +150,7 @@ public struct FileAttachmentDisplayView: View {
             }
             Spacer()
         }
+        .accessibilityElement(children: .combine)
     }
 
     private var previewImage: UIImage {
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyBadgeView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/GiphyBadgeView.swift
@@ -14,6 +14,7 @@ public struct GiphyBadgeView: View {
         BottomLeftView {
             HStack(spacing: 4) {
                 Image(uiImage: images.commandGiphy)
+                    .accessibilityHidden(true)
                 Text(L10n.Message.GiphyAttachment.title)
                     .font(fonts.bodyBold)
                     .foregroundColor(Color(colors.staticColorText))
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift
@@ -371,6 +371,11 @@ struct LazyLoadingImage: View {
                                     imageTapped(index ?? 0)
                                 }
                         )
+                        .accessibilityLabel(L10n.Message.Attachment.accessibilityLabel((index ?? 0) + 1))
+                        .accessibilityAddTraits(source.type == .video ? .startsMediaSession : .isImage)
+                        .accessibilityAction {
+                            imageTapped(index ?? 0)
+                        }
                 }
             } else if error != nil {
                 Color(.secondarySystemBackground)
@@ -383,6 +388,7 @@ struct LazyLoadingImage: View {
             
             if source.type == .video && width > 64 && source.uploadingState == nil {
                 VideoPlayIcon()
+                    .accessibilityHidden(true)
             }
         }
         .onAppear {
@@ -414,6 +420,7 @@ struct LazyLoadingImage: View {
             .allowsHitTesting(false)
             .scaleEffect(1.0001) // Needed because of SwiftUI sometimes incorrectly displaying landscape images.
             .clipped()
+            .accessibilityHidden(true)
     }
 }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift
@@ -26,7 +26,7 @@ public struct MessageAuthorAndDateView: View {
             }
             Spacer()
         }
-        .accessibilityElement(children: .contain)
+        .accessibilityElement(children: .combine)
         .accessibilityIdentifier("MessageAuthorAndDateView")
     }
 }
@@ -80,11 +80,16 @@ struct MessageDateView: View {
         return text
     }
     
+    var accessibilityLabel: String {
+        L10n.Message.Cell.sentAt(text)
+    }
+    
     var body: some View {
         Text(text)
             .font(fonts.footnote)
             .foregroundColor(Color(colors.textLowEmphasis))
             .animation(nil)
+            .accessibilityLabel(Text(accessibilityLabel))
             .accessibilityIdentifier("MessageDateView")
     }
 }
@@ -119,6 +124,11 @@ public struct MessageReadIndicatorView: View {
             .customizable()
             .foregroundColor(!readUsers.isEmpty ? colors.tintColor : Color(colors.textLowEmphasis))
             .frame(height: 16)
+            .accessibilityLabel(
+                Text(
+                    readUsers.isEmpty ? L10n.Message.ReadStatus.seenByNoOne : L10n.Message.ReadStatus.seenByOthers
+                )
+            )
             .accessibilityIdentifier("readIndicatorCheckmark")
         }
         .accessibilityElement(children: .contain)
@@ -161,6 +171,7 @@ public struct MessagePinDetailsView: View {
             Image(uiImage: images.pin)
                 .customizable()
                 .frame(maxHeight: 12)
+                .accessibilityHidden(true)
             Text("\(L10n.Message.Cell.pinnedBy) \(message.pinDetails?.pinnedBy.name ?? L10n.Message.Cell.unknownPin)")
                 .font(fonts.footnote)
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift
@@ -467,6 +467,7 @@ public struct ScrollToBottomButton: View {
                     .frame(width: buttonSize, height: buttonSize)
                     .modifier(ShadowViewModifier(cornerRadius: buttonSize / 2))
             }
+            .accessibilityLabel(Text(L10n.Channel.List.ScrollToBottom.title))
             .padding()
             .overlay(
                 unreadCount > 0 ?
@@ -526,6 +527,7 @@ public struct DateIndicatorView: View {
                 .padding(.all, 8)
             Spacer()
         }
+        .accessibilityAddTraits(.isHeader)
     }
 }
 
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/QuotedMessageView.swift
@@ -47,6 +47,9 @@ struct QuotedMessageViewContainer<Factory: ViewFactory>: View {
         .onTapGesture(perform: {
             scrolledId = quotedMessage.messageId
         })
+        .accessibilityAction {
+            scrolledId = quotedMessage.messageId
+        }
         .accessibilityIdentifier("QuotedMessageViewContainer")
     }
 }
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift b/Sources/StreamChatSwiftUI/ChatChannel/MessageList/VideoAttachmentView.swift
@@ -155,6 +155,7 @@ struct VideoAttachmentContentView: View {
                     .scaledToFill()
                     .clipped()
                     .allowsHitTesting(false)
+                    .accessibilityHidden(true)
 
                 if width > 64 && attachment.uploadingState == nil {
                     VStack {
@@ -166,6 +167,9 @@ struct VideoAttachmentContentView: View {
                     .onTapGesture {
                         fullScreenShown = true
                     }
+                    .accessibilityAction {
+                        fullScreenShown = true
+                    }
                 }
             } else if error != nil {
                 Color(.secondarySystemBackground)
diff --git a/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsView.swift b/Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsView.swift
@@ -28,6 +28,9 @@ struct ReactionsContainer: View {
                 .onLongPressGesture {
                     onLongPressGesture()
                 }
+                .accessibilityAction {
+                    onTapGesture()
+                }
             }
 
             Spacer()
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/MoreChannelActionsView.swift b/Sources/StreamChatSwiftUI/ChatChannelList/MoreChannelActionsView.swift
@@ -164,12 +164,14 @@ public struct ChannelMemberView: View {
                 showOnlineIndicator: onlineIndicatorShown,
                 size: memberSize
             )
+            .accessibilityHidden(true)
 
             Text(name)
                 .font(fonts.footnoteBold)
                 .multilineTextAlignment(.center)
                 .lineLimit(2)
                 .frame(maxWidth: memberSize.width, maxHeight: 34, alignment: .top)
+                .accessibilityLabel(Text(name) + Text(onlineIndicatorShown ? ", \(L10n.Message.Title.online)" : ""))
         }
     }
 }
diff --git a/Sources/StreamChatSwiftUI/Generated/L10n.swift b/Sources/StreamChatSwiftUI/Generated/L10n.swift
diff --git a/Sources/StreamChatSwiftUI/Resources/en.lproj/Localizable.strings b/Sources/StreamChatSwiftUI/Resources/en.lproj/Localizable.strings
diff --git a/StreamChatSwiftUITestsAppTests/Pages/MessageListPage.swift b/StreamChatSwiftUITestsAppTests/Pages/MessageListPage.swift

Original file line number	Diff line number	Diff line change
`@@ -36,12 +36,15 @@ public struct CustomChannelHeader: ToolbarContent {`
`36`	`36`	`.background(colors.tintColor)`
`37`	`37`	`.clipShape(Circle())`
`38`	`38`	`}`
	`39`	`+ .accessibilityLabel(Text("New Channel"))`
`39`	`40`	`}`
`40`	`41`	`ToolbarItem(placement: .navigationBarLeading) {`
`41`	`42`	`Button {`
`42`	`43`	`actionsPopupShown = true`
`43`	`44`	`} label: {`
`44`	`45`	`StreamLazyImage(url: currentUserController.currentUser?.imageURL)`
	`46`	`+ .accessibilityLabel("Account Actions")`
	`47`	`+ .accessibilityAddTraits(.isButton)`
`45`	`48`	`}`
`46`	`49`	`}`
`47`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -71,20 +71,23 @@ public struct DefaultChatChannelHeader: ToolbarContent {`
`71`	`71`	`.clipShape(Circle())`
`72`	`72`	`.offset(x: 8)`
`73`	`73`	`}`
	`74`	`+ .accessibilityLabel(Text(L10n.Channel.Header.Info.title))`
`74`	`75`
`75`	`76`	`NavigationLink(isActive: $isActive) {`
`76`	`77`	`LazyView(ChatChannelInfoView(channel: channel, shownFromMessageList: true))`
`77`	`78`	`} label: {`
`78`	`79`	`EmptyView()`
`79`	`80`	`}`
`80`		`-`
	`81`	`+ .accessibilityHidden(true)`
	`82`	`+`
`81`	`83`	`ChannelAvatarView(`
`82`	`84`	`avatar: headerImage,`
`83`	`85`	`showOnlineIndicator: onlineIndicatorShown,`
`84`	`86`	`size: CGSize(width: 36, height: 36)`
`85`	`87`	`)`
`86`	`88`	`.offset(x: 8)`
`87`	`89`	`.allowsHitTesting(false)`
	`90`	`+ .accessibilityHidden(true)`
`88`	`91`	`}`
`89`	`92`	`.accessibilityIdentifier("ChannelAvatarView")`
`90`	`93`	`}`
Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@ public struct AttachmentPickerTypeView: View {`
`56`	`56`	`pickerType: .media,`
`57`	`57`	`selected: attachmentPickerType`
`58`	`58`	`)`
	`59`	`+ .accessibilityLabel(Text(L10n.Composer.Picker.showAll))`
`59`	`60`	`.accessibilityIdentifier("PickerTypeButtonMedia")`
`60`	`61`	`}`
`61`	`62`
`@@ -65,6 +66,7 @@ public struct AttachmentPickerTypeView: View {`
`65`	`66`	`pickerType: .instantCommands,`
`66`	`67`	`selected: attachmentPickerType`
`67`	`68`	`)`
	`69`	`+ .accessibilityLabel(Text(L10n.Composer.Suggestions.Commands.header))`
`68`	`70`	`.accessibilityIdentifier("PickerTypeButtonCommands")`
`69`	`71`	`}`
`70`	`72`	`case .collapsed:`
Original file line number	Diff line number	Diff line change
`@@ -159,6 +159,7 @@ public struct AttachmentSourcePickerView: View {`
`159`	`159`	`isSelected: selected == .files,`
`160`	`160`	`onTap: onTap`
`161`	`161`	`)`
	`162`	`+ .accessibilityLabel(L10n.Composer.Picker.file)`
`162`	`163`	`.accessibilityIdentifier("attachmentPickerFiles")`
`163`	`164`
`164`	`165`	`AttachmentPickerButton(`
`@@ -176,6 +177,7 @@ public struct AttachmentSourcePickerView: View {`
`176`	`177`	`isSelected: selected == .polls,`
`177`	`178`	`onTap: onTap`
`178`	`179`	`)`
	`180`	`+ .accessibilityLabel(L10n.Composer.Polls.createPoll)`
`179`	`181`	`.accessibilityIdentifier("attachmentPickerPolls")`
`180`	`182`	`}`
`181`	`183`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ public struct SendMessageButton: View {`
`31`	`31`	`)`
`32`	`32`	`}`
`33`	`33`	`.disabled(!enabled)`
`34`		`- .accessibilityAddTraits(.isButton)`
	`34`	`+ .accessibilityLabel(Text(L10n.Composer.Placeholder.message))`
`35`	`35`	`.accessibilityIdentifier("SendMessageButton")`
`36`	`36`	`}`
`37`	`37`
Original file line number	Diff line number	Diff line change
`@@ -85,5 +85,12 @@ public struct VoiceRecordingButton: View {`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`	`)`
	`88`	`+ .accessibilityRemoveTraits(.isImage)`
	`89`	`+ .accessibilityAddTraits(.isButton)`
	`90`	`+ .accessibilityLabel(Text(L10n.Composer.AudioRecording.start))`
	`91`	`+ .accessibilityAction {`
	`92`	`+ viewModel.recordingState = .recording(.zero)`
	`93`	`+ viewModel.startRecording()`
	`94`	`+ }`
`88`	`95`	`}`
`89`	`96`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ struct RecordingView: View {`
`20`	`20`	`HStack {`
`21`	`21`	`Image(systemName: "mic")`
`22`	`22`	`.foregroundColor(.red)`
	`23`	`+ .accessibilityHidden(true)`
`23`	`24`	`RecordingDurationView(duration: audioRecordingInfo.duration)`
`24`	`25`
`25`	`26`	`Spacer()`
`@@ -30,6 +31,7 @@ struct RecordingView: View {`
`30`	`31`	`}`
`31`	`32`	`.foregroundColor(Color(colors.textLowEmphasis))`
`32`	`33`	`.opacity(opacityForSlideToCancel)`
	`34`	`+ .accessibilityHidden(true)`
`33`	`35`
`34`	`36`	`Spacer()`
`35`	`37`
`@@ -38,6 +40,7 @@ struct RecordingView: View {`
`38`	`40`	`} label: {`
`39`	`41`	`Image(systemName: "mic")`
`40`	`42`	`}`
	`43`	`+ .accessibilityLabel(Text(L10n.Composer.AudioRecording.stop))`
`41`	`44`	`}`
`42`	`45`	`.padding(.all, 12)`
`43`	`46`	`.overlay(`
Original file line number	Diff line number	Diff line change
`@@ -215,6 +215,7 @@ struct VoiceRecordingView: View {`
`215`	`215`	`.resizable()`
`216`	`216`	`.aspectRatio(contentMode: .fit)`
`217`	`217`	`.frame(height: 40)`
	`218`	`+ .accessibilityHidden(true)`
`218`	`219`	`}`
`219`	`220`	`}`
`220`	`221`	`.onReceive(handler.$context, perform: { value in`