Merge pull request #1454 from planetary-social/bdm/side-menu

fix side menu accessibility issues
planetary-social · Sep 9, 2024 · 5526d57 · 5526d57
2 parents ffb1d54 + 91f6ab0
commit 5526d57
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed a bug where nostr entities in URLs were treated like quoted note links.
 - Added in-app profile photo editing.
 - Changed "Name" to "Display Name" on the Edit Profile View.
+- Fixed side menu accessibility issues.
 
 ### Internal Changes
 - Included the npub in the properties list sent to analytics.

diff --git a/Nos/Extensions/Font+Clarity.swift b/Nos/Extensions/Font+Clarity.swift
@@ -2,34 +2,62 @@ import SwiftUI
 
 // https://stackoverflow.com/a/74416073
 extension Font {
-    static func clarity(_ fontWeight: UIFont.Weight, textStyle: UIFont.TextStyle = .body) -> Font {
-        switch fontWeight {
-        case .regular:
-            clarityRegular(textStyle)
-        case .medium:
-            clarityMedium(textStyle)
-        case .semibold:
-            claritySemibold(textStyle)
-        case .bold:
-            clarityBold(textStyle)
-        default:
-            clarityRegular(textStyle)
-        }
+
+    static func clarity(
+        _ fontWeight: Font.Weight,
+        textStyle: Font.TextStyle = .body
+    ) -> Font {
+        .custom(
+            fontWeight.clarityFontName,
+            size: textStyle.defaultSize,
+            relativeTo: textStyle
+        )
     }
 
-    static func clarityRegular(_ textStyle: UIFont.TextStyle) -> Font {
-        .custom("ClarityCity-Regular", size: UIFont.preferredFont(forTextStyle: textStyle).pointSize)
+    static func clarityRegular(_ textStyle: Font.TextStyle) -> Font {
+        clarity(.regular, textStyle: textStyle)
     }
-
-    static func clarityMedium(_ textStyle: UIFont.TextStyle) -> Font {
-        .custom("ClarityCity-Medium", size: UIFont.preferredFont(forTextStyle: textStyle).pointSize)
+    
+    static func clarityBold(_ textStyle: Font.TextStyle) -> Font {
+        clarity(.bold, textStyle: textStyle)
     }
+}
 
-    static func claritySemibold(_ textStyle: UIFont.TextStyle) -> Font {
-        .custom("ClarityCity-SemiBold", size: UIFont.preferredFont(forTextStyle: textStyle).pointSize)
+extension Font.Weight {
+    var clarityFontName: String {
+        switch self {
+        case .medium:   "ClarityCity-Medium"
+        case .semibold: "ClarityCity-SemiBold"
+        case .bold:     "ClarityCity-Bold"
+        default:        "ClarityCity-Regular"
+        }
     }
+}
 
-    static func clarityBold(_ textStyle: UIFont.TextStyle) -> Font {
-        .custom("ClarityCity-Bold", size: UIFont.preferredFont(forTextStyle: textStyle).pointSize)
+fileprivate extension Font.TextStyle {
+    var uiFontTextStyle: UIFont.TextStyle {
+        switch self {
+        case .largeTitle:       .largeTitle
+        case .title:            .title1
+        case .title2:           .title2
+        case .title3:           .title3
+        case .headline:         .headline
+        case .subheadline:      .subheadline
+        case .body:             .body
+        case .callout:          .callout
+        case .footnote:         .footnote
+        case .caption:          .caption1
+        case .caption2:         .caption2
+        case .extraLargeTitle:  .extraLargeTitle
+        case .extraLargeTitle2: .extraLargeTitle2
+        @unknown default:       UIFont.TextStyle.body
+        }
+    }
+
+    var defaultSize: CGFloat {
+        UIFont.preferredFont(
+            forTextStyle: uiFontTextStyle,
+            compatibleWith: UITraitCollection(preferredContentSizeCategory: .large)
+        ).pointSize
     }
 }
diff --git a/Nos/Views/Components/ActionBanner.swift b/Nos/Views/Components/ActionBanner.swift
@@ -7,6 +7,7 @@ struct ActionBanner: View {
     var messageImage: Image?
     var buttonText: LocalizedStringResource
     var buttonImage: Image?
+    var shouldButtonFillHorizontalSpace: Bool
     var action: (() -> Void)?
 
     private var backgroundGradient: LinearGradient {
@@ -46,12 +47,15 @@ struct ActionBanner: View {
                             startPoint: .leading,
                             endPoint: .trailing
                         ),
-                        textShadow: false
+                        textShadow: false,
+                        shouldFillHorizontalSpace: shouldButtonFillHorizontalSpace
                     ) {
                         action?()
                     }
                     .frame(minHeight: 40)
-                    Spacer()
+                    if !shouldButtonFillHorizontalSpace {
+                        Spacer()
+                    }
                 }
             }
             .padding(.vertical, 24)
@@ -99,7 +103,8 @@ struct ActionBanner_Previews: PreviewProvider {
             ActionBanner(
                 messageText: .localizable.completeProfileMessage,
                 messageImage: Image.atSymbol,
-                buttonText: .localizable.completeProfileButton
+                buttonText: .localizable.completeProfileButton,
+                shouldButtonFillHorizontalSpace: true
             )
             .padding(20)
         }

diff --git a/Nos/Views/Components/BioView.swift b/Nos/Views/Components/BioView.swift
@@ -90,7 +90,7 @@ struct BioView: View {
             if shouldShowReadMore {
                 ZStack(alignment: .center) {
                     Text(String(localized: .localizable.readMore).uppercased())
-                        .font(.clarity(.regular, textStyle: .caption1))
+                        .font(.clarityRegular(.caption))
                         .foregroundColor(.secondaryTxt)
                         .padding(EdgeInsets(top: 4, leading: 6, bottom: 4, trailing: 6))
                         .background(Color.hashtagBg)

diff --git a/Nos/Views/Components/Wizard/WizardSheetTitleText.swift b/Nos/Views/Components/Wizard/WizardSheetTitleText.swift
@@ -14,7 +14,7 @@ struct WizardSheetTitleText: View {
 
     var body: some View {
         Text(localizedStringResource)
-            .font(.clarity(.bold, textStyle: .title1))
+            .font(.clarityBold(.title))
             .foregroundStyle(Color.primaryTxt)
     }
 }

diff --git a/Nos/Views/NoteComposer/ComposerActionBar.swift b/Nos/Views/NoteComposer/ComposerActionBar.swift
@@ -100,7 +100,7 @@ struct ComposerActionBar: View {
                 ScrollView(.horizontal) {
                     HStack {
                         Text(.localizable.noteDisappearsIn)
-                            .font(.clarity(.regular, textStyle: .caption1))
+                            .font(.clarityRegular(.caption))
                             .foregroundColor(.secondaryTxt)
                             .transition(.move(edge: .trailing))
                             .padding(10)

diff --git a/Nos/Views/Profile/Edit/ProfileEditView.swift b/Nos/Views/Profile/Edit/ProfileEditView.swift
@@ -321,7 +321,8 @@ fileprivate struct NosNIP05Banner: View {
             ActionBanner(
                 messageText: .localizable.claimYourUsernameText,
                 messageImage: .atSymbol,
-                buttonText: .localizable.claimYourUsernameButton
+                buttonText: .localizable.claimYourUsernameButton,
+                shouldButtonFillHorizontalSpace: false
             ) {
                 showNIP05Wizard = true
             }

diff --git a/Nos/Views/SideMenu/SideMenuContent.swift b/Nos/Views/SideMenu/SideMenuContent.swift
@@ -21,12 +21,14 @@ struct SideMenuContent: View {
                 ActionBanner(
                     messageText: .localizable.completeProfileMessage,
                     buttonText: .localizable.completeProfileButton,
-                    buttonImage: .editProfile
+                    buttonImage: .editProfile,
+                    shouldButtonFillHorizontalSpace: true
                 ) {
                     if let author = currentUser.author {
                         router.push(EditProfileDestination(profile: author))
                     }
                 }
+                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
                 .padding(.horizontal, 20)
                 .padding(.vertical, 30)
             } else {
@@ -47,7 +49,8 @@ struct SideMenuContent: View {
                         if let name = currentUser.author?.safeName {
                             Text(name)
                                 .foregroundColor(.primaryTxt)
-                                .font(.clarity(.bold, textStyle: .title2))
+                                .dynamicTypeSize(...DynamicTypeSize.accessibility1)
+                                .font(.clarityBold(.title2))
                                 .padding(.top, 15)
                         }
                     }
@@ -59,42 +62,44 @@ struct SideMenuContent: View {
 
     var body: some View {
         NosNavigationStack(path: $router.sideMenuPath) {
-            VStack(alignment: .leading, spacing: 0) {
-                profileHeader
-                SideMenuRow(
-                    title: .localizable.yourProfile,
-                    image: Image(systemName: "person.crop.circle"),
-                    destination: .profile
-                )
-                SideMenuRow(title: .localizable.settings, image: Image(systemName: "gear"), destination: .settings)
-                SideMenuRow(
-                    title: .localizable.relays,
-                    image: Image(systemName: "antenna.radiowaves.left.and.right"),
-                    destination: .relays
-                )
-                SideMenuRow(
-                    title: .localizable.about,
-                    image: Image(systemName: "questionmark.circle"),
-                    destination: .about
-                )
-                SideMenuRow(title: .localizable.contactUs, image: Image(systemName: "envelope.circle")) {
-                    isShowingReportABugMailView = true
-                }
-                .disabled(!MFMailComposeViewController.canSendMail())
-                .sheet(isPresented: $isShowingReportABugMailView) {
-                    ReportABugMailView(result: self.$result)
-                        .onAppear {
-                            analytics.showedSupport()
-                        }
-                }
-                SideMenuRow(title: .localizable.shareNos, image: Image(systemName: "person.2.circle")) {
-                    shareNosPressed = true
-                }
-                .sheet(isPresented: $shareNosPressed) {
-                    let url = URL(string: "https://nos.social")!
-                    ActivityViewController(activityItems: [url])
+            ScrollView {
+                VStack(alignment: .leading, spacing: 0) {
+                    profileHeader
+                    SideMenuRow(
+                        title: .localizable.yourProfile,
+                        image: Image(systemName: "person.crop.circle"),
+                        destination: .profile
+                    )
+                    SideMenuRow(title: .localizable.settings, image: Image(systemName: "gear"), destination: .settings)
+                    SideMenuRow(
+                        title: .localizable.relays,
+                        image: Image(systemName: "antenna.radiowaves.left.and.right"),
+                        destination: .relays
+                    )
+                    SideMenuRow(
+                        title: .localizable.about,
+                        image: Image(systemName: "questionmark.circle"),
+                        destination: .about
+                    )
+                    SideMenuRow(title: .localizable.contactUs, image: Image(systemName: "envelope.circle")) {
+                        isShowingReportABugMailView = true
+                    }
+                    .disabled(!MFMailComposeViewController.canSendMail())
+                    .sheet(isPresented: $isShowingReportABugMailView) {
+                        ReportABugMailView(result: self.$result)
+                            .onAppear {
+                                analytics.showedSupport()
+                            }
+                    }
+                    SideMenuRow(title: .localizable.shareNos, image: Image(systemName: "person.2.circle")) {
+                        shareNosPressed = true
+                    }
+                    .sheet(isPresented: $shareNosPressed) {
+                        let url = URL(string: "https://nos.social")!
+                        ActivityViewController(activityItems: [url])
+                    }
+                    Spacer()
                 }
-                Spacer()
             }
             .background(Color.appBg)
             .navigationDestination(for: SideMenu.Destination.self) { destination in
@@ -136,12 +141,12 @@ struct SideMenuRow: View {
         } label: {
             HStack(alignment: .center) {
                 image
-                    .font(.clarity(.bold, textStyle: .title3))
                 Text(title)
-                    .font(.clarity(.bold, textStyle: .title3))
                     .foregroundColor(.primaryTxt)
                 Spacer()
             }
+            .dynamicTypeSize(...DynamicTypeSize.accessibility1)
+            .font(.clarityBold(.title3))
         }
         .padding()
     }

diff --git a/Nos/Views/UNS/UNSErrorView.swift b/Nos/Views/UNS/UNSErrorView.swift
@@ -18,15 +18,15 @@ struct UNSErrorView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.oops)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)
                         .padding(.top, 20)
                         .padding(.bottom, 3)
 
                     Text(.localizable.anErrorOccurred)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSNameTakenView.swift b/Nos/Views/UNS/UNSNameTakenView.swift
@@ -15,15 +15,15 @@ struct UNSNameTakenView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.oops)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)
                         .padding(.top, 20)
                         .padding(.bottom, 3)
 
                     Text(.localizable.thatNameIsTaken)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSNewNameView.swift b/Nos/Views/UNS/UNSNewNameView.swift
@@ -18,7 +18,7 @@ struct UNSNewNameView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.chooseYourName)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSSuccessView.swift b/Nos/Views/UNS/UNSSuccessView.swift
@@ -19,7 +19,7 @@ struct UNSSuccessView: View {
                         VStack(spacing: 0) {
                             Image.unsCheck
                             Text(controller.nameRecord?.name ?? "")
-                                .font(.clarity(.bold, textStyle: .title1))
+                                .font(.clarityBold(.title))
                                 .multilineTextAlignment(.center)
                                 .foregroundColor(.primaryTxt)
                                 .shadow(radius: 1, y: 1)
@@ -30,7 +30,7 @@ struct UNSSuccessView: View {
                     .padding(.top, 50)
 
                     Text(.localizable.success)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSVerifyCodeView.swift b/Nos/Views/UNS/UNSVerifyCodeView.swift
@@ -23,7 +23,7 @@ struct UNSVerifyCodeView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.verification)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSWizardChooseNameView.swift b/Nos/Views/UNS/UNSWizardChooseNameView.swift
@@ -20,7 +20,7 @@ struct UNSWizardChooseNameView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.chooseNameOrRegister)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)

diff --git a/Nos/Views/UNS/UNSWizardIntroView.swift b/Nos/Views/UNS/UNSWizardIntroView.swift
@@ -12,7 +12,7 @@ struct UNSWizardIntroView: View {
                 .padding(.top, 50)
 
             Text(.localizable.unsRegister)
-                .font(.clarity(.bold, textStyle: .title1))
+                .font(.clarityBold(.title))
                 .multilineTextAlignment(.center)
                 .foregroundColor(.primaryTxt)
                 .readabilityPadding()

diff --git a/Nos/Views/UNS/UNSWizardNeedsPaymentView.swift b/Nos/Views/UNS/UNSWizardNeedsPaymentView.swift
@@ -17,7 +17,7 @@ struct UNSWizardNeedsPaymentView: View {
                 .padding(.top, 50)
 
             Text(.localizable.premiumName)
-                .font(.clarity(.bold, textStyle: .title1))
+                .font(.clarityBold(.title))
                 .multilineTextAlignment(.center)
                 .foregroundColor(.primaryTxt)
                 .readabilityPadding()

diff --git a/Nos/Views/UNS/UNSWizardPhoneView.swift b/Nos/Views/UNS/UNSWizardPhoneView.swift
@@ -23,7 +23,7 @@ struct UNSWizardPhoneView: View {
                         .padding(.top, 50)
 
                     Text(.localizable.registration)
-                        .font(.clarity(.bold, textStyle: .title1))
+                        .font(.clarityBold(.title))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.primaryTxt)
                         .shadow(radius: 1, y: 1)