From 9d5a09810b5e9a40916434e908f696f23a609bf5 Mon Sep 17 00:00:00 2001
From: Mauro Romito <mauro.romito@element.io>
Date: Mon, 7 Jul 2025 16:06:29 +0200
Subject: [PATCH] a11y label for pinned items + fix for the pinned items banner
 when voice over is on

---
 .../Screens/RoomScreen/View/RoomScreen.swift        | 13 ++++++++++++-
 .../View/Style/TimelineItemBubbledStylerView.swift  |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift b/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
index c1c8cf15f..82e5c3440 100644
--- a/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
+++ b/ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
@@ -13,6 +13,7 @@ struct RoomScreen: View {
     @ObservedObject private var context: RoomScreenViewModelType.Context
     @ObservedObject private var timelineContext: TimelineViewModelType.Context
     let composerToolbar: ComposerToolbar
+    @Environment(\.accessibilityVoiceOverEnabled) private var isVoiceOverEnabled
 
     init(context: RoomScreenViewModelType.Context,
          timelineContext: TimelineViewModelType.Context,
@@ -32,12 +33,22 @@ struct RoomScreen: View {
             }
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .overlay(alignment: .top) {
-                pinnedItemsBanner
+                if !isVoiceOverEnabled {
+                    pinnedItemsBanner
+                }
             }
             // This can overlay on top of the pinnedItemsBanner
             .overlay(alignment: .top) {
                 knockRequestsBanner
             }
+            .safeAreaInset(edge: .top) {
+                // When voice over is on the table view is not reversed
+                // and the scroll gestures are not intercepted
+                // so we render the pinned banner on top.
+                if isVoiceOverEnabled {
+                    pinnedItemsBanner
+                }
+            }
             .safeAreaInset(edge: .bottom, spacing: 0) {
                 VStack(spacing: 0) {
                     RoomScreenFooterView(details: context.viewState.footerDetails,
diff --git a/ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift
index cbe950c84..138e984d0 100644
--- a/ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift
+++ b/ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift
@@ -309,6 +309,7 @@ private struct PinnedIndicatorViewModifier: ViewModifier {
     private var pinnedIndicator: some View {
         CompoundIcon(\.pinSolid, size: .xSmall, relativeTo: .compound.bodyMD)
             .foregroundStyle(Color.compound.iconTertiary)
+            .accessibilityLabel(L10n.commonPinned)
     }
 }