Timeline tab accessibility uplift (#1277)

* Refine Profile tab VoiceOver order to prioritise user information

Previously, VoiceOver user would have to traverse through header image, “follows you”, and the profile image before getting to the display name of the user.

Now, this element is the first element after the navigation bar.

* Add accessibility label to Timeline Compose post button

Previously, this button was using the SF symbol fallback label.

Now, it has a localized equivalent in addition to two other options: “New”, and “Create”

* Change accessible representation of Timeline nav bar menu

Previously, this would present as a static text.

Now, it has the header trait. In addition, by changing the representation, VoiceOver will read it out as “Home, Pop-up button, Header”, indicating that it opens a menu.

* Add accessibilityHint to Timeline tab Accounts selector

* Add accessibilityLabel and hint to PendingStatusesObserver

Previously, this button would have a label equal to the count of unread posts. Now, it states “X new posts” with the hint “Scrolls the timeline”

IceCubesApp/Resources/Localization/be.lproj/Localizable.strings

@@ -524,7 +524,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Дадаць уліковы запіс";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Уліковыя запісы";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/ca.lproj/Localizable.strings

@@ -518,7 +518,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Add account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/de.lproj/Localizable.strings

@@ -514,7 +514,13 @@
 "accessibility.editor.privacy.label" = "Sichtbarkeit";
 "accessibility.editor.privacy.hint" = "Ändert das Beitragspublikum.";
 "accessibility.tabs.timeline.add-account" = "Konto hinzufügen";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Konten";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/en-GB.lproj/Localizable.strings

@@ -518,10 +518,16 @@
 "accessibility.editor.button.language" = "Language";
 "accessibility.editor.button.ai-prompt" = "AI prompt";
 "accessibility.tabs.timeline.add-account" = "Add Account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.editor.button.characters-remaining" = "Characters remaining";
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/en.lproj/Localizable.strings

@@ -520,7 +520,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Add Account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/es.lproj/Localizable.strings

@@ -520,7 +520,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Añadir cuenta";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Cuentas";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/eu.lproj/Localizable.strings

@@ -509,7 +509,13 @@
 "accessibility.editor.privacy.label" = "Ikusgaitasuna";
 "accessibility.editor.privacy.hint" = "Nork ikus dezakeen aldatzen du.";
 "accessibility.tabs.timeline.add-account" = "Gehitu kontua";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Kontuak";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/fr.lproj/Localizable.strings

@@ -515,7 +515,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Ajouter un compte>";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Comptes";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/it.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Aggiungi account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Account";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/ja.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "可視性";
 "accessibility.editor.privacy.hint" = "投稿対象者を変更します";
 "accessibility.tabs.timeline.add-account" = "アカウントを追加";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "アカウント";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/ko.lproj/Localizable.strings

@@ -521,7 +521,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "계정 추가";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "계정";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/nb.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Add account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/nl.lproj/Localizable.strings

@@ -516,7 +516,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Voeg account toe";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/pl.lproj/Localizable.strings

@@ -511,7 +511,13 @@
 "accessibility.editor.privacy.label" = "Widoczność postu";
 "accessibility.editor.privacy.hint" = "Zmienia odbiorców postu.";
 "accessibility.tabs.timeline.add-account" = "Dodaj konto";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Konta";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/pt-BR.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Adicionar conta";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Contas";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/tr.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Add account";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Accounts";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/uk.lproj/Localizable.strings

@@ -520,7 +520,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "Додати профіль";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "Профілі";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/zh-Hans.lproj/Localizable.strings

@@ -521,7 +521,13 @@
 "accessibility.editor.privacy.label" = "可见度";
 "accessibility.editor.privacy.hint" = "更改嘟文可见度。";
 "accessibility.tabs.timeline.add-account" = "添加账户";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "账户";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

IceCubesApp/Resources/Localization/zh-Hant.lproj/Localizable.strings

@@ -519,7 +519,13 @@
 "accessibility.editor.privacy.label" = "Visibility";
 "accessibility.editor.privacy.hint" = "Changes post audience.";
 "accessibility.tabs.timeline.add-account" = "新增帳號";
+"accessibility.tabs.timeline.new-post.label" = "Compose";
+"accessibility.tabs.timeline.new-post.inputLabel1" = "New";
+"accessibility.tabs.timeline.new-post.inputLabel2" = "Create";
+"accessibility.tabs.timeline.unread-posts.label-%lld" = "%lld new posts";
+"accessibility.tabs.timeline.unread-posts.hint" = "Scrolls the timeline.";
 "accessibility.app-account.selector.accounts" = "帳號";
+"accessibility.app-account.selector.accounts.hint" = "Opens options sheet.";
 "accessibility.tabs.profile.options.label" = "Options";
 "accessibility.tabs.profile.options.inputLabel1" = "Settings";
 "accessibility.tabs.profile.options.inputLabel2" = "More";

Packages/Account/Sources/Account/AccountDetailHeaderView.swift

@@ -198,7 +198,10 @@ struct AccountDetailHeaderView: View {
             .textSelection(.enabled)
             .accessibilityRespondsToUserInteraction(false)
           joinedAtView
-        }.accessibilityElement(children: .contain)
+        }
+        .accessibilityElement(children: .contain)
+        .accessibilitySortPriority(1)
+
         Spacer()
         if let relationship = viewModel.relationship, !viewModel.isCurrentUser {
           HStack {

Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift

@@ -77,6 +77,7 @@ public struct AppAccountsSelectorView: View {
       }
     }
     .accessibilityLabel("accessibility.app-account.selector.accounts")
+    .accessibilityHint("accessibility.app-account.selector.accounts.hint")
   }
 
   private var accountsView: some View {

Packages/DesignSystem/Sources/DesignSystem/Views/StatusEditorToolbarItem.swift

@@ -11,6 +11,12 @@ public extension View {
         HapticManager.shared.fireHaptic(of: .buttonPress)
       } label: {
         Image(systemName: "square.and.pencil")
+          .accessibilityLabel("accessibility.tabs.timeline.new-post.label")
+          .accessibilityInputLabels([
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.label"),
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.inputLabel1"),
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.inputLabel2")
+          ])
       }
     }
   }
@@ -32,6 +38,12 @@ public struct StatusEditorToolbarItem: ToolbarContent {
         HapticManager.shared.fireHaptic(of: .buttonPress)
       } label: {
         Image(systemName: "square.and.pencil")
+          .accessibilityLabel("accessibility.tabs.timeline.new-post.label")
+          .accessibilityInputLabels([
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.label"),
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.inputLabel1"),
+            LocalizedStringKey("accessibility.tabs.timeline.new-post.inputLabel2")
+          ])
       }
     }
   }

Packages/Timeline/Sources/Timeline/PendingStatusesObserver.swift

@@ -37,7 +37,11 @@ struct PendingStatusesObserverView: View {
           observer.scrollToIndex?(observer.pendingStatusesCount)
         } label: {
           Text("\(observer.pendingStatusesCount)")
+            // Accessibility: this results in a frame with a size of at least 44x44 at regular font size
+            .frame(minWidth: 30, minHeight: 30)
         }
+        .accessibilityLabel("accessibility.tabs.timeline.unread-posts.label-\(observer.pendingStatusesCount)")
+        .accessibilityHint("accessibility.tabs.timeline.unread-posts.hint")
         .buttonStyle(.bordered)
         .background(.thinMaterial)
         .cornerRadius(8)

Packages/Timeline/Sources/Timeline/TimelineView.swift

@@ -98,6 +98,10 @@ public struct TimelineView: View {
               .font(.headline)
           }
         }
+        .accessibilityRepresentation {
+          Menu(timeline.localizedTitle()) {}
+        }
+        .accessibilityAddTraits(.isHeader)
       }
     }
     .navigationBarTitleDisplayMode(.inline)