Merge pull request #160 from writeas/add-button-accessibility-hints

Improve accessibility labels and hints
This commit is contained in:
Angelo Stavrow 2021-01-11 09:16:13 -05:00 committed by GitHub
commit e3ddefa769
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 115 additions and 28 deletions

View File

@ -0,0 +1,23 @@
{
"images" : [
{
"filename" : "does.not.exist.png",
"idiom" : "universal",
"scale" : "1x"
},
{
"filename" : "does.not.exist@2x.png",
"idiom" : "universal",
"scale" : "2x"
},
{
"filename" : "does.not.exist@3x.png",
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 B

View File

@ -20,6 +20,8 @@ struct PostEditorStatusToolbarView: View {
}, label: {
Image(systemName: "square.and.arrow.down")
})
.accessibilityLabel(Text("Update post"))
.accessibilityHint(Text("Replace this post with the server version"))
}
.padding(.horizontal)
.background(Color.primary.opacity(0.1))
@ -45,6 +47,8 @@ struct PostEditorStatusToolbarView: View {
}, label: {
Image(systemName: "trash")
})
.accessibilityLabel(Text("Delete"))
.accessibilityHint(Text("Delete this post from your Mac"))
}
.padding(.horizontal)
.background(Color.primary.opacity(0.1))

View File

@ -20,6 +20,10 @@ struct PostListView: View {
)
.toolbar {
ToolbarItem(placement: .primaryAction) {
// We have to add a Spacer as a sibling view to the Button in some kind of Stack, so that any a11y
// modifiers are applied as expected: bug report filed as FB8956392.
ZStack {
Spacer()
Button(action: {
let managedPost = WFAPost(context: self.managedObjectContext)
managedPost.createdDate = Date()
@ -45,8 +49,21 @@ struct PostListView: View {
self.model.selectedPost = managedPost
}
}, label: {
ZStack {
Image("does.not.exist")
.accessibilityHidden(true)
Image(systemName: "square.and.pencil")
.accessibilityHidden(true)
.imageScale(.large) // These modifiers compensate for the resizing
.padding(.vertical, 12) // done to the Image (and the button tap target)
.padding(.leading, 12) // by the SwiftUI layout system from adding a
.padding(.trailing, 8) // Spacer in this ZStack (FB8956392).
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
})
.accessibilityLabel(Text("Compose"))
.accessibilityHint(Text("Compose a new local draft"))
}
}
ToolbarItem(placement: .bottomBar) {
HStack {
@ -54,7 +71,13 @@ struct PostListView: View {
model.isPresentingSettingsView = true
}, label: {
Image(systemName: "gear")
.imageScale(.large)
.padding(.vertical, 12)
.padding(.leading, 8)
.padding(.trailing, 12)
})
.accessibilityLabel(Text("Settings"))
.accessibilityHint(Text("Open the Settings sheet"))
Spacer()
Text(postCount == 1 ? "\(postCount) post" : "\(postCount) posts")
.foregroundColor(.secondary)
@ -69,7 +92,13 @@ struct PostListView: View {
}
}, label: {
Image(systemName: "arrow.clockwise")
.imageScale(.large)
.padding(.vertical, 12)
.padding(.leading, 12)
.padding(.trailing, 8)
})
.accessibilityLabel(Text("Refresh Posts"))
.accessibilityHint(Text("Fetch changes from the server"))
.disabled(!model.account.isLoggedIn)
}
}

View File

@ -80,6 +80,8 @@ struct PostEditorView: View {
}, label: {
Label("Publish…", systemImage: "paperplane")
})
.accessibilityHint(Text("Choose the blog you want to publish this post to"))
.disabled(post.body.count == 0)
} else {
Button(action: {
if model.account.isLoggedIn {
@ -97,6 +99,7 @@ struct PostEditorView: View {
}, label: {
Label("Share", systemImage: "square.and.arrow.up")
})
.accessibilityHint(Text("Open the system share sheet to share a link to this post"))
.disabled(post.postId == nil)
// Button(action: {
// print("Tapped 'Delete...' button")
@ -117,8 +120,20 @@ struct PostEditorView: View {
}
}
}, label: {
ZStack {
Image("does.not.exist")
.accessibilityHidden(true)
Image(systemName: "ellipsis.circle")
.imageScale(.large)
.accessibilityHidden(true)
}
})
.accessibilityLabel(Text("Menu"))
.accessibilityHint(Text("Opens a context menu to publish, share, or move the post"))
.onTapGesture {
hideKeyboard()
}
.disabled(post.body.count == 0)
}
}
}

View File

@ -41,6 +41,7 @@ struct PostTextEditingView: View {
.foregroundColor(Color(UIColor.placeholderText))
.padding(.horizontal, 4)
.padding(.vertical, 8)
.accessibilityHidden(true)
}
PostTitleTextView(
text: $post.title,
@ -49,6 +50,8 @@ struct PostTextEditingView: View {
isFirstResponder: $titleIsFirstResponder,
lineSpacing: horizontalSizeClass == .compact ? lineSpacingMultiplier / 2 : lineSpacingMultiplier
)
.accessibilityLabel(Text("Title (optional)"))
.accessibilityHint(Text("Add or edit the title for your post; use the Return key to skip to the body"))
.frame(height: titleFieldHeight)
.onChange(of: post.title) { _ in
if post.status == PostStatus.published.rawValue && !updatingTitleFromServer {
@ -66,6 +69,7 @@ struct PostTextEditingView: View {
.foregroundColor(Color(UIColor.placeholderText))
.padding(.horizontal, 4)
.padding(.vertical, 8)
.accessibilityHidden(true)
}
PostBodyTextView(
text: $post.body,
@ -73,6 +77,8 @@ struct PostTextEditingView: View {
isFirstResponder: $bodyIsFirstResponder,
lineSpacing: horizontalSizeClass == .compact ? lineSpacingMultiplier / 2 : lineSpacingMultiplier
)
.accessibilityLabel(Text("Body"))
.accessibilityHint(Text("Add or edit the body of your post"))
.onChange(of: post.body) { _ in
if post.status == PostStatus.published.rawValue && !updatingBodyFromServer {
post.status = PostStatus.edited.rawValue

View File

@ -9,6 +9,8 @@ struct RemoteChangePromptView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass
@State private var promptText: String = "This is placeholder prompt text. Replace it?"
@State private var promptIcon: Image = Image(systemName: "questionmark.square.dashed")
@State private var accessibilityLabel: String = "Replace"
@State private var accessibilityHint: String = "Replace this text with an accessibility hint"
@State var remoteChangeType: RemotePostChangeType
@State var buttonHandler: () -> Void
@ -18,6 +20,8 @@ struct RemoteChangePromptView: View {
.font(horizontalSizeClass == .compact ? .caption : .body)
.foregroundColor(.secondary)
Button(action: buttonHandler, label: { promptIcon })
.accessibilityLabel(Text(accessibilityLabel))
.accessibilityHint(Text(accessibilityHint))
}
.padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
.background(Color(UIColor.secondarySystemBackground))
@ -28,9 +32,13 @@ struct RemoteChangePromptView: View {
case .remoteCopyUpdated:
promptText = "Newer copy on server. Replace local copy?"
promptIcon = Image(systemName: "square.and.arrow.down")
accessibilityLabel = "Update post"
accessibilityHint = "Replace this post with the server version"
case .remoteCopyDeleted:
promptText = "Post deleted from server. Delete local copy?"
promptIcon = Image(systemName: "trash")
accessibilityLabel = "Delete"
accessibilityHint = "Delete this post from your device"
}
})
}

View File

@ -15,6 +15,8 @@ struct SettingsHeaderView: View {
}, label: {
Image(systemName: "xmark.circle")
})
.accessibilityLabel(Text("Close"))
.accessibilityHint(Text("Dismiss the Settings sheet"))
}
Text("WriteFreely v\(Bundle.main.appMarketingVersion) (build \(Bundle.main.appBuildVersion))")
.font(.caption)