Improve voice over labels and actions (#726)

* 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
GetStream · Jan 23, 2025 · 1ceac73 · 1ceac73
1 parent 9557751
commit 1ceac73
Show file tree

Hide file tree

Showing 23 changed files with 127 additions and 4 deletions.
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/...mChatSwiftUI/ChatChannel/MessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift b/...mChatSwiftUI/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)" : ""))
         }
     }
 }