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.

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

@@ -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" = "Уліковыя запісы";
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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" = "アカウント";
 

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

@@ -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" = "계정";
 

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

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

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

@@ -510,6 +510,10 @@
 "accessibility.editor.button.drafts" = "Concepten";
 "accessibility.editor.button.custom-emojis" = "Aangepaste emoji’s";
 "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";
 

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

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

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

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

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

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

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

@@ -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" = "Профілі";
 

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

@@ -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" = "账户";
 

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

@@ -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" = "帳號";
 

Packages/Status/Sources/Status/Editor/Components/StatusEditorAccessoryView.swift

@@ -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)
+          Button {
-            .lineLimit(3)
+            viewModel.insertStatusText(text: draft)
-            .listRowBackground(theme.primaryBackgroundColor)
+            isDraftsSheetDisplayed = false
-            .onTapGesture {
+          } label: {
-              viewModel.insertStatusText(text: draft)
+            Text(draft)
-              isDraftsSheetDisplayed = false
+              .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)")
+    let value = (currentInstance.instance?.configuration?.statuses.maxCharacters ?? 500) + viewModel.statusTextCharacterLength
-      .foregroundColor(.gray)
+
+    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] {

Packages/Status/Sources/Status/Editor/StatusEditorView.swift

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

Packages/Status/Sources/Status/Editor/UITextView/Modifiers.swift

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

Packages/Status/Sources/Status/Editor/UITextView/TextView.swift

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