Compose Post Screen Accessibility Tweaks (#1259)

* Add localized label for the AI prompt status accessory view

Previously, this icon would have an accessibility label matching its SF symbol key, ‘faxmachine’.

* Darken status editor character count foreground color

By changing it to .secondary, it gets to an APCA contrast of 61, which is a _just_ passing Bronze score for that text size.

It’s still quite short of WCAG 2.1 AA at 3.3:1 (recommended is 4.5:1)

* Change remaining character count color to red when < 0

* Refine remaining character count accessibility

In this commit, we
- Change its trait to `.updatesFrequently`
- Set a localized `accessibilityLabel`
- Set its `accessibilityValue` to the remaining character count
- Disable user interaction (which is presumably set automatically by virtue of being enclosed in a `Menu`)

* Set accessibilitySortPriority on Status editor ScrollView

Previously, the traversal order placed the elements inside the `ScrollView` last. Now, they follow on from the navigation bar contents in the expected order.

* Hide the AvatarView from status creation accessibility

When there is only one account available, there is no functionality associated with this element, so it is considered decorative-only, and should be hidden

* Set TextView placeholder’s `accessibilityValue` to placeholder text when empty

This behaviour matches `UITextField`

* Hide TextView custom `placeholderView` from accessibility

Previously, TextView would vend two accessibility elements when the placeholder was visible. This causes needless confusion for users.

Now, the TextView matches the accessible behaviour of text inputs elsewhere.

* Improve accessibility of post `privacyMenu`

Previously, it would be presented as `Everyone, Button`. Now, we move the visibility to its `value` and use `Visibility` for its label, in conjunction with a hint that states it `Changes post audience`.

* Add `.button` trait and accessible label to emojis in `customEmojisSheet`

Previously, these would all present as `image` with no description, making it very hard to discern what kind of emoji you were adding.

* Change drafts sheet item type to `Button`

A button with an action has a more accessible representation than a `Text` with a tap gesture.
This commit is contained in:
Chris Kolbu 2023-03-17 16:39:31 +11:00 committed by GitHub
parent c5b4a0dd07
commit 4d588e4a18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 107 additions and 11 deletions

View File

@ -518,6 +518,10 @@
"accessibility.editor.button.drafts" = "Чарнавікі";
"accessibility.editor.button.custom-emojis" = "Уласныя эмодзі";
"accessibility.editor.button.language" = "Мова";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Дадаць уліковы запіс";
"accessibility.app-account.selector.accounts" = "Уліковыя запісы";

View File

@ -512,6 +512,10 @@
"accessibility.editor.button.drafts" = "Drafts";
"accessibility.editor.button.custom-emojis" = "Custom emojis";
"accessibility.editor.button.language" = "Language";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Add account";
"accessibility.app-account.selector.accounts" = "Accounts";

View File

@ -508,6 +508,10 @@
"accessibility.editor.button.drafts" = "Entwürfe";
"accessibility.editor.button.custom-emojis" = "Eigene Emojis";
"accessibility.editor.button.language" = "Sprache";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Konto hinzufügen";
"accessibility.app-account.selector.accounts" = "Konten";

View File

@ -515,7 +515,11 @@
"accessibility.editor.button.drafts" = "Drafts";
"accessibility.editor.button.custom-emojis" = "Custom emojis";
"accessibility.editor.button.language" = "Language";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.tabs.timeline.add-account" = "Add Account";
"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";
// MARK: Report

View File

@ -514,6 +514,10 @@
"accessibility.editor.button.drafts" = "Drafts";
"accessibility.editor.button.custom-emojis" = "Custom emojis";
"accessibility.editor.button.language" = "Language";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Add Account";
"accessibility.app-account.selector.accounts" = "Accounts";

View File

@ -514,6 +514,10 @@
"accessibility.editor.button.drafts" = "Borradores";
"accessibility.editor.button.custom-emojis" = "Emojis personalizados";
"accessibility.editor.button.language" = "Idioma";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Añadir cuenta";
"accessibility.app-account.selector.accounts" = "Cuentas";

View File

@ -503,6 +503,10 @@
"accessibility.editor.button.drafts" = "Zirriborroak";
"accessibility.editor.button.custom-emojis" = "Instantziaren emojiak";
"accessibility.editor.button.language" = "Hizkuntza";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Gehitu kontua";
"accessibility.app-account.selector.accounts" = "Kontuak";

View File

@ -509,6 +509,10 @@
"accessibility.editor.button.drafts" = "Brouillons";
"accessibility.editor.button.custom-emojis" = "Emojis personalisés";
"accessibility.editor.button.language" = "Langue";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Ajouter un compte>";
"accessibility.app-account.selector.accounts" = "Comptes";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "Bozze";
"accessibility.editor.button.custom-emojis" = "Emoji personalizzate";
"accessibility.editor.button.language" = "Lingua";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Aggiungi account";
"accessibility.app-account.selector.accounts" = "Account";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "下書き";
"accessibility.editor.button.custom-emojis" = "カスタム絵文字";
"accessibility.editor.button.language" = "言語";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "アカウントを追加";
"accessibility.app-account.selector.accounts" = "アカウント";

View File

@ -515,6 +515,10 @@
"accessibility.editor.button.drafts" = "임시 보관함";
"accessibility.editor.button.custom-emojis" = "커스텀 이모지";
"accessibility.editor.button.language" = "글 언어 지정";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "계정 추가";
"accessibility.app-account.selector.accounts" = "계정";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "Drafts";
"accessibility.editor.button.custom-emojis" = "Custom emojis";
"accessibility.editor.button.language" = "Language";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Add account";
"accessibility.app-account.selector.accounts" = "Accounts";

View File

@ -510,6 +510,10 @@
"accessibility.editor.button.drafts" = "Concepten";
"accessibility.editor.button.custom-emojis" = "Aangepaste emojis";
"accessibility.editor.button.language" = "Taal";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Voeg account toe";
"accessibility.app-account.selector.accounts" = "Accounts";

View File

@ -505,6 +505,10 @@
"accessibility.editor.button.drafts" = "Wersje robocze";
"accessibility.editor.button.custom-emojis" = "Emotikony własne";
"accessibility.editor.button.language" = "Język";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Dodaj konto";
"accessibility.app-account.selector.accounts" = "Konta";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "Rascunhos";
"accessibility.editor.button.custom-emojis" = "Emojis customizados";
"accessibility.editor.button.language" = "Idioma";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Adicionar conta";
"accessibility.app-account.selector.accounts" = "Contas";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "Drafts";
"accessibility.editor.button.custom-emojis" = "Custom emojis";
"accessibility.editor.button.language" = "Language";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Add account";
"accessibility.app-account.selector.accounts" = "Accounts";

View File

@ -514,6 +514,10 @@
"accessibility.editor.button.drafts" = "Чернетка";
"accessibility.editor.button.custom-emojis" = "Власні emojis";
"accessibility.editor.button.language" = "Мова";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "Додати профіль";
"accessibility.app-account.selector.accounts" = "Профілі";

View File

@ -515,6 +515,10 @@
"accessibility.editor.button.drafts" = "草稿";
"accessibility.editor.button.custom-emojis" = "自定义表情";
"accessibility.editor.button.language" = "选择语言";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "添加账户";
"accessibility.app-account.selector.accounts" = "账户";

View File

@ -513,6 +513,10 @@
"accessibility.editor.button.drafts" = "草稿";
"accessibility.editor.button.custom-emojis" = "自定表情符號";
"accessibility.editor.button.language" = "語言";
"accessibility.editor.button.ai-prompt" = "AI prompt";
"accessibility.editor.button.characters-remaining" = "Characters remaining";
"accessibility.editor.privacy.label" = "Visibility";
"accessibility.editor.privacy.hint" = "Changes post audience.";
"accessibility.tabs.timeline.add-account" = "新增帳號";
"accessibility.app-account.selector.accounts" = "帳號";

View File

@ -176,6 +176,7 @@ struct StatusEditorAccessoryView: View {
ProgressView()
} else {
Image(systemName: "faxmachine")
.accessibilityLabel("accessibility.editor.button.ai-prompt")
}
}
}
@ -236,13 +237,13 @@ struct StatusEditorAccessoryView: View {
NavigationStack {
List {
ForEach(preferences.draftsPosts, id: \.self) { draft in
Text(draft)
.lineLimit(3)
.listRowBackground(theme.primaryBackgroundColor)
.onTapGesture {
viewModel.insertStatusText(text: draft)
isDraftsSheetDisplayed = false
}
Button {
viewModel.insertStatusText(text: draft)
isDraftsSheetDisplayed = false
} label: {
Text(draft)
.lineLimit(3)
}.listRowBackground(theme.primaryBackgroundColor)
}
.onDelete { indexes in
if let index = indexes.first {
@ -274,10 +275,13 @@ struct StatusEditorAccessoryView: View {
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 40, height: 40)
.accessibilityLabel(emoji.shortcode.replacingOccurrences(of: "_", with: " "))
.accessibilityAddTraits(.isButton)
} else if state.isLoading {
Rectangle()
.fill(Color.gray)
.frame(width: 40, height: 40)
.accessibility(hidden: true)
.shimmering()
}
}
@ -300,10 +304,18 @@ struct StatusEditorAccessoryView: View {
.presentationDetents([.medium])
}
@ViewBuilder
private var characterCountView: some View {
Text("\((currentInstance.instance?.configuration?.statuses.maxCharacters ?? 500) + viewModel.statusTextCharacterLength)")
.foregroundColor(.gray)
let value = (currentInstance.instance?.configuration?.statuses.maxCharacters ?? 500) + viewModel.statusTextCharacterLength
Text("\(value)")
.foregroundColor(value < 0 ? .red : .secondary)
.font(.scaledCallout)
.accessibilityLabel("accessibility.editor.button.characters-remaining")
.accessibilityValue("\(value)")
.accessibilityRemoveTraits(.isStaticText)
.accessibilityAddTraits(.updatesFrequently)
.accessibilityRespondsToUserInteraction(false)
}
private var recentlyUsedLanguages: [Language] {

View File

@ -66,7 +66,7 @@ public struct StatusEditorView: View {
}
.padding(.top, 8)
.padding(.bottom, 40)
}
}.accessibilitySortPriority(1) // Ensure that all elements inside the `ScrollView` occur earlier than the accessory views
VStack(alignment: .leading, spacing: 0) {
StatusEditorAutoCompleteView(viewModel: viewModel)
StatusEditorAccessoryView(isSpoilerTextFocused: $isSpoilerTextFocused,
@ -235,6 +235,7 @@ public struct StatusEditorView: View {
} else {
AvatarView(url: account.avatar, size: .status)
.environmentObject(theme)
.accessibilityHidden(true)
}
VStack(alignment: .leading, spacing: 4) {
privacyMenu
@ -261,6 +262,9 @@ public struct StatusEditorView: View {
} label: {
HStack {
Label(viewModel.visibility.title, systemImage: viewModel.visibility.iconName)
.accessibilityLabel("accessibility.editor.privacy.label")
.accessibilityValue(viewModel.visibility.title)
.accessibilityHint("accessibility.editor.privacy.hint")
Image(systemName: "chevron.down")
}
.font(.scaledFootnote)

View File

@ -19,6 +19,7 @@ public extension TextView {
var view = self
let text = Text(placeholder)
view.placeholderView = AnyView(configure(text))
view.placeholderText = placeholder
return view
}

View File

@ -13,6 +13,7 @@ public struct TextView: View {
private var getTextView: ((UITextView) -> Void)?
var placeholderView: AnyView?
var placeholderText: String?
var keyboard: UIKeyboardType = .default
/// Makes a new TextView that supports `NSAttributedString`
@ -41,6 +42,7 @@ public struct TextView: View {
minHeight: calculatedHeight,
maxHeight: calculatedHeight
)
.accessibilityValue($text.wrappedValue.string.isEmpty ? (placeholderText ?? "") : $text.wrappedValue.string)
.background(
placeholderView?
.foregroundColor(Color(.placeholderText))
@ -48,7 +50,8 @@ public struct TextView: View {
.font(.scaledBody)
.padding(.horizontal, 0)
.padding(.vertical, 0)
.opacity(isEmpty ? 1 : 0),
.opacity(isEmpty ? 1 : 0)
.accessibilityHidden(true),
alignment: .topLeading
)
}