fix(#588): a11y - force VO focus to first vocalizable item in main pages

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Orange-OpenSource · Jan 30, 2024 · 16f31d3 · 16f31d3
1 parent ed101b9
commit 16f31d3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/...geDesignSystem/Modules/About/Internal/ApplicationInformation/ApplicationInformation.swift b/...geDesignSystem/Modules/About/Internal/ApplicationInformation/ApplicationInformation.swift
@@ -17,6 +17,8 @@ import SwiftUI
 
 struct AboutApplicationInformation: View {
 
+    @AccessibilityFocusState private var requestFocus: Bool
+
     // =======================
     // MARK: Stored Properties
     // =======================
@@ -33,6 +35,8 @@ struct AboutApplicationInformation: View {
                 .odsFont(.headlineL)
                 .fixedSize(horizontal: false, vertical: true)
                 .accessibilityAddTraits(.isHeader)
+                .accessibilityFocused($requestFocus)
+                .odsRequestAccessibleFocus(_requestFocus)
 
             if applicationInformation.shareConfiguration != nil || applicationInformation.onFeedbackClicked != nil {
                 HStack(spacing: ODSSpacing.none) {

diff --git a/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/About/ODSAboutModule.swift b/OrangeDesignSystem/Sources/OrangeDesignSystem/Modules/About/ODSAboutModule.swift
@@ -21,7 +21,7 @@ import SwiftUI
 /// pages related to the service provided by the application
 /// (i.e. settings, tutorials, ...).
 public struct ODSAboutModule<TermsOfService>: View where TermsOfService: View {
-
+    
     // =======================
     // MARK: Stored properties
     // =======================

diff --git a/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Screens/Guidelines/GuidelinesList.swift b/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Screens/Guidelines/GuidelinesList.swift
@@ -17,6 +17,7 @@ import SwiftUI
 struct GuidelinesList: View {
 
     @EnvironmentObject private var themeProvider: ThemeProvider
+    @AccessibilityFocusState private var requestFocus: AccessibilityFocusable?
 
     // =======================
     // MARK: Stored properties
@@ -48,6 +49,8 @@ struct GuidelinesList: View {
                             ODSCardVerticalImageFirst(
                                 title: Text(guideline.name),
                                 imageSource: .image(imageFrom(resourceName: guideline.imageName)))
+                            .accessibilityFocused($requestFocus, equals: .some(id: guideline.id))
+                            .odsRequestAccessibleFocus(_requestFocus, for: .some(id: guidelines[0].id))
                         }
                     }
                 }

diff --git a/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Screens/Modules/ModulesList.swift b/OrangeDesignSystemDemo/OrangeDesignSystemDemo/Screens/Modules/ModulesList.swift
@@ -16,11 +16,13 @@ import SwiftUI
 
 struct ModulesList: View {
 
+    @AccessibilityFocusState private var requestFocus: Bool
+    @EnvironmentObject private var themeProvider: ThemeProvider
+
     // =======================
     // MARK: Stored Properties
     // =======================
 
-    @EnvironmentObject private var themeProvider: ThemeProvider
     private let columns = [GridItem(.flexible(), alignment: .topLeading)]
 
     // ==========
@@ -39,6 +41,13 @@ struct ModulesList: View {
                         ODSCardVerticalImageFirst(
                             title: Text("screens.modules.lists.title"),
                             imageSource: .image(imageFrom(resourceName: "Lists")))
+                            .accessibilityFocused($requestFocus)
+                            //.odsRequestAccessibleFocus(_requestFocus) // <--- Don't know why it does not work each time
+                            .onAppear {
+                                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+                                    requestFocus = true
+                                }
+                            }
                     }
 
                     NavigationLink {