IceCubesApp/Packages/Notifications/Sources/Notifications/NotificationsListView.swift
Chris Kolbu 9e347c75b9
Timeline & Timeline detail accessibility uplift (#1323)
* Improve accessibility of StatusPollView

Previously, this view did not provide the proper context to indicate that it represented a poll.

Now, we’ve added
- A container that will stay “Active poll” or “Poll results” when the cursor first hits one of the options;
- A prefix to say “Option X of Y” before each option;
- A Selected trait on the selected option(s), if present
- Consolidating and adding an `.updatesFrequently` trait to the footer view with the countdown.

* Add poll description in StatusRowView combinedAccessibilityLabel

This largely duplicates the logic in `StatusPollView`.

* Improve accessibility of media attachments

Previously, the media attachments without alt text would not show up in the consolidated `StatusRowView`, nor would they be meaningfully explained on the status detail screen.

Now, they are presented with their attachment type.

* Change accessibilityRepresentation of AppAcountsSelectorView

* Change Notifications tab title view accessibility representation to Menu

Previously it would present as a button

* Hide layout `Rectangle`s from accessibility

* Consolidate `StatusRowDetailView` accessibility representation

* Improve readability of Poll accessibility label

* Ensure poll options don’t present as interactive when the poll is finished

* Improve accessibility of StatusRowCardView

Previously, it would present as four separate elements, including an image without a description, all interactive, none with an interactive trait.

Now, it presents as a single element with the `.link` trait

* Improve accessibility of StatusRowHeaderView

Previously, it had no traits and no actions except inherited ones.

Now it presents as a button, triggering its primary action.

It also has custom actions corresponding to its context menu

* Avoid applying the StatusRowView custom actions to every view when contained

* Provide context for the application name

* Add pauses to StatusRowView combinedAccessibilityLabel

* Hide `TimelineView.scrollToTopView` from accessibility

* Set appropriate font style on Notification header

After the change the Text needed a `.headline` style to match the prior appearance.

* Fix bug in accessibilityRepresentation of TimelineView nav bar title

Previously, it would not display the proper label for .remoteLocal filter options.

* Ensure that pop-up button nav bar titles are interactive

* Ensure TextView responds to Environment.sizeCategory

This resolves #1309

* Fix button

---------

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>
2023-03-28 18:48:58 +02:00

199 lines
6.1 KiB
Swift

import DesignSystem
import Env
import Models
import Network
import Shimmer
import SwiftUI
public struct NotificationsListView: View {
@Environment(\.scenePhase) private var scenePhase
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var watcher: StreamWatcher
@EnvironmentObject private var client: Client
@EnvironmentObject private var routerPath: RouterPath
@EnvironmentObject private var account: CurrentAccount
@StateObject private var viewModel = NotificationsViewModel()
let lockedType: Models.Notification.NotificationType?
public init(lockedType: Models.Notification.NotificationType?) {
self.lockedType = lockedType
}
public var body: some View {
List {
topPaddingView
notificationsView
}
.id(account.account?.id)
.environment(\.defaultMinListRowHeight, 1)
.listStyle(.plain)
.toolbar {
ToolbarItem(placement: .principal) {
let title = lockedType?.menuTitle() ?? viewModel.selectedType?.menuTitle() ?? "notifications.navigation-title"
if lockedType == nil {
Text(title)
.font(.headline)
.accessibilityRepresentation {
Menu(title) {}
}
.accessibilityAddTraits(.isHeader)
.accessibilityRemoveTraits(.isButton)
.accessibilityRespondsToUserInteraction(true)
} else {
Text(title)
.font(.headline)
.accessibilityAddTraits(.isHeader)
}
}
}
.toolbar {
if lockedType == nil {
ToolbarTitleMenu {
Button {
viewModel.selectedType = nil
} label: {
Label("notifications.navigation-title", systemImage: "bell.fill")
}
Divider()
ForEach(Notification.NotificationType.allCases, id: \.self) { type in
Button {
viewModel.selectedType = type
} label: {
Label {
Text(type.menuTitle())
} icon: {
type.icon(isPrivate: false)
}
}
}
}
}
}
.navigationBarTitleDisplayMode(.inline)
.scrollContentBackground(.hidden)
.background(theme.primaryBackgroundColor)
.task {
viewModel.client = client
viewModel.currentAccount = account
if let lockedType {
viewModel.selectedType = lockedType
}
await viewModel.fetchNotifications()
}
.refreshable {
SoundEffectManager.shared.playSound(of: .pull)
HapticManager.shared.fireHaptic(of: .dataRefresh(intensity: 0.3))
await viewModel.fetchNotifications()
HapticManager.shared.fireHaptic(of: .dataRefresh(intensity: 0.7))
SoundEffectManager.shared.playSound(of: .refresh)
}
.onChange(of: watcher.latestEvent?.id, perform: { _ in
if let latestEvent = watcher.latestEvent {
viewModel.handleEvent(event: latestEvent)
}
})
.onChange(of: scenePhase, perform: { scenePhase in
switch scenePhase {
case .active:
Task {
await viewModel.fetchNotifications()
}
default:
break
}
})
}
@ViewBuilder
private var notificationsView: some View {
switch viewModel.state {
case .loading:
ForEach(ConsolidatedNotification.placeholders()) { notification in
NotificationRowView(notification: notification,
client: client,
routerPath: routerPath,
followRequests: account.followRequests)
.redacted(reason: .placeholder)
.listRowInsets(.init(top: 12,
leading: .layoutPadding + 4,
bottom: 12,
trailing: .layoutPadding))
.listRowBackground(theme.primaryBackgroundColor)
.redacted(reason: .placeholder)
}
case let .display(notifications, nextPageState):
if notifications.isEmpty {
EmptyView(iconName: "bell.slash",
title: "notifications.empty.title",
message: "notifications.empty.message")
.listRowBackground(theme.primaryBackgroundColor)
.listSectionSeparator(.hidden)
} else {
ForEach(notifications) { notification in
NotificationRowView(notification: notification,
client: client,
routerPath: routerPath,
followRequests: account.followRequests)
.listRowInsets(.init(top: 12,
leading: .layoutPadding + 4,
bottom: 12,
trailing: .layoutPadding))
.listRowBackground(notification.type == .mention && lockedType != .mention ?
theme.secondaryBackgroundColor : theme.primaryBackgroundColor)
.id(notification.id)
}
}
switch nextPageState {
case .none:
EmptyView()
case .hasNextPage:
loadingRow
.onAppear {
Task {
await viewModel.fetchNextPage()
}
}
case .loadingNextPage:
loadingRow
}
case .error:
ErrorView(title: "notifications.error.title",
message: "notifications.error.message",
buttonTitle: "action.retry")
{
Task {
await viewModel.fetchNotifications()
}
}
.listRowBackground(theme.primaryBackgroundColor)
.listSectionSeparator(.hidden)
}
}
private var loadingRow: some View {
HStack {
Spacer()
ProgressView()
Spacer()
}
.listRowInsets(.init(top: .layoutPadding,
leading: .layoutPadding + 4,
bottom: .layoutPadding,
trailing: .layoutPadding))
.listRowBackground(theme.primaryBackgroundColor)
}
private var topPaddingView: some View {
HStack {}
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.listRowInsets(.init())
.frame(height: .layoutPadding)
.accessibilityHidden(true)
}
}