Settings screen Accessibility tweaks (#1258)

* Remove `.button` trait from `Link`s on Account Settings screen

SwiftUI currently sets both the `.button` and `.link` traits on these elements, which is a failure for WCAG 2.1 4.12: Name, Role, Value: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

There is a radar for this issue: FB11507660

* Improve accessibility by making `AppAccountView`s a Button

Previously, the component elements of the `fullView` would be rendered as 3-4 individual views that would _all_ be interactive and perform the same action.

Now, as a Button, only one accessibility element is vended.

* Fix account label color

---------

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>
This commit is contained in:
Chris Kolbu 2023-03-17 16:38:50 +11:00 committed by GitHub
parent fa090f5663
commit c5b4a0dd07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 49 deletions

View file

@ -208,6 +208,7 @@ struct SettingsTabs: View {
Link(destination: URL(string: "https://github.com/Dimillian/IceCubesApp")!) {
Label("settings.app.source", systemImage: "link")
}
.accessibilityRemoveTraits(.isButton)
.tint(theme.labelColor)
NavigationLink(destination: SupportAppView()) {
@ -218,6 +219,7 @@ struct SettingsTabs: View {
Link(destination: reviewURL) {
Label("settings.rate", systemImage: "link")
}
.accessibilityRemoveTraits(.isButton)
.tint(theme.labelColor)
}

View file

@ -4,6 +4,7 @@ import Env
import SwiftUI
public struct AppAccountView: View {
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var routerPath: RouterPath
@EnvironmentObject private var appAccounts: AppAccountsManager
@EnvironmentObject private var preferences: UserPreferences
@ -41,6 +42,21 @@ public struct AppAccountView: View {
}
private var fullView: some View {
Button {
if appAccounts.currentAccount.id == viewModel.appAccount.id,
let account = viewModel.account
{
routerPath.navigate(to: .accountSettingsWithAccount(account: account, appAccount: viewModel.appAccount))
HapticManager.shared.fireHaptic(of: .buttonPress)
} else {
var transation = Transaction()
transation.disablesAnimations = true
withTransaction(transation) {
appAccounts.currentAccount = viewModel.appAccount
HapticManager.shared.fireHaptic(of: .notification(.success))
}
}
} label: {
HStack {
if let account = viewModel.account {
ZStack(alignment: .topTrailing) {
@ -75,6 +91,7 @@ public struct AppAccountView: View {
VStack(alignment: .leading) {
if let account = viewModel.account {
EmojiTextApp(.init(stringValue: account.safeDisplayName), emojis: account.emojis)
.foregroundColor(theme.labelColor)
Text("\(account.username)@\(viewModel.appAccount.server)")
.font(.scaledSubheadline)
.emojiSize(Font.scaledSubheadlineFont.emojiSize)
@ -88,21 +105,6 @@ public struct AppAccountView: View {
.foregroundColor(.gray)
}
}
.contentShape(Rectangle())
.onTapGesture {
if appAccounts.currentAccount.id == viewModel.appAccount.id,
let account = viewModel.account
{
routerPath.navigate(to: .accountSettingsWithAccount(account: account, appAccount: viewModel.appAccount))
HapticManager.shared.fireHaptic(of: .buttonPress)
} else {
var transation = Transaction()
transation.disablesAnimations = true
withTransaction(transation) {
appAccounts.currentAccount = viewModel.appAccount
HapticManager.shared.fireHaptic(of: .notification(.success))
}
}
}
}
}