demo app : add accessibility combine and state (#836)

Orange-OpenSource · Jun 10, 2024 · 3ce0519 · 3ce0519
1 parent a39238d
commit 3ce0519
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [DemoApp] A11y - Buttons component : group labels and buttons and state ([#835](https://github.com/Orange-OpenSource/ods-ios/issues/835))
 - [DemoApp] A11y - Slider has no visible text ([#832](https://github.com/Orange-OpenSource/ods-ios/issues/832))
 - [DemoApp] A11y - Irrelevant Colour palette page title: page title is "Palette" ([#730](https://github.com/Orange-OpenSource/ods-ios/issues/730))
 - [DemoApp] A11y - Bars-navigation component accessibility issues ([#830](https://github.com/Orange-OpenSource/ods-ios/issues/830))

diff --git a/...angeDesignSystemDemo/Screens/Components/Pages/Buttons/EmphasisAndFunctionnalVariant.swift b/...angeDesignSystemDemo/Screens/Components/Pages/Buttons/EmphasisAndFunctionnalVariant.swift
@@ -52,7 +52,8 @@ struct EmphasisVariant: View {
             }
         }
         .accessibilityElement(children: .combine)
-        .accessibilityAddTraits(.isButton)
+        .accessibilityHint(model.text)
+        .accessibilityValue(model.text)
     }
 }
 
@@ -84,7 +85,6 @@ struct FunctionalVariant: View {
                     Text(description(for: style)).odsFont(.headlineS)
                     Spacer()
                 }
-                .accessibilityAddTraits(.isHeader)
 
                 ODSFunctionalButton(text: Text(model.text),
                                     image: model.icon,
@@ -93,6 +93,9 @@ struct FunctionalVariant: View {
                     .disabled(!model.showEnabled)
             }
         }
+        .accessibilityElement(children: .combine)
+        .accessibilityHint(model.text)
+        .accessibilityValue(model.text)
     }
 
     // ====================

diff --git a/...esignSystemDemo/OrangeDesignSystemDemo/Screens/Components/Pages/Buttons/IconVariant.swift b/...esignSystemDemo/OrangeDesignSystemDemo/Screens/Components/Pages/Buttons/IconVariant.swift
@@ -45,29 +45,47 @@ struct IconVariant: View {
                     .odsFont(.bodyLRegular)
                     .frame(maxWidth: .infinity, alignment: .leading)
 
-                VariantsTitle().frame(maxWidth: .infinity, alignment: .leading)
+                VariantsTitle()
+                    .frame(maxWidth: .infinity, alignment: .leading)
 
                 VStack(alignment: .center, spacing: ODSSpacing.l) {
-                    VStack(alignment: .center, spacing: ODSSpacing.s) {
-                        Text("screens.components.buttons.icon_add").odsFont(.headlineS).frame(maxWidth: .infinity, alignment: .leading)
-
-                        ODSIconButton(image: Image("Add")) {}
-                            .disabled(!model.showEnabled)
+                    VStack(alignment: .leading, spacing: ODSSpacing.s) {
+                        Text("screens.components.buttons.icon_add")
+                            .odsFont(.headlineS)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+
+                        HStack {
+                            Spacer()
+                            ODSIconButton(image: Image("Add")) {}
+                                .disabled(!model.showEnabled)
+                            Spacer()
+                        }
                     }
-
-                    VStack(alignment: .center, spacing: ODSSpacing.s) {
-                        Text("screens.components.buttons.icon_info").odsFont(.headlineS).frame(maxWidth: .infinity, alignment: .leading)
-
-                        ODSIconButton(image: Image(systemName: "info.circle")) {}
-                            .disabled(!model.showEnabled)
+                    .accessibilityElement(children: .combine)
+
+                    VStack(alignment: .leading, spacing: ODSSpacing.s) {
+                        Text("screens.components.buttons.icon_info")
+                            .odsFont(.headlineS)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+
+                        HStack {
+                            Spacer()
+                            ODSIconButton(image: Image(systemName: "info.circle")) {}
+                                .disabled(!model.showEnabled)
+                            Spacer()
+                        }
                     }
+                    .accessibilityElement(children: .combine)
                 }
+                .accessibilityHint(model.text)
             }
             .padding(.top, ODSSpacing.m)
             .padding(.horizontal, ODSSpacing.m)
         }
         .padding(.bottom, 55)
     }
+
+
 }
 
 // ==========================
@@ -80,15 +98,25 @@ final class IconVariantModel: ObservableObject {
     // MARK: Stored properties
     // =======================
 
+    @Published var showLongText: Bool
     @Published var showEnabled: Bool
 
     // =================
     // MARK: Initializer
     // =================
 
     init() {
+        showLongText = false
         showEnabled = true
     }
+
+    // =====================
+    // MARK: Computed values
+    // =====================
+
+    var text: LocalizedStringKey {
+        showLongText ? "screens.components.buttons.variant.long" : (showEnabled ? "shared.enabled" : "shared.disabled")
+    }
 }
 
 // ============================