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”
This commit is contained in:
Chris Kolbu 2023-03-20 16:33:42 +11:00 committed by GitHub
parent 3a3d0a7b55
commit eab69ce9fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 139 additions and 1 deletions

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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";

View file

@ -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 {

View file

@ -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 {

View file

@ -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")
])
}
}
}

View file

@ -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)

View file

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