Prerelease 0 16 1

core/Sources/Common/SwiftUI/GlobalExtension/IfModifier/IfModifier.swift

@@ -9,6 +9,7 @@
 import SwiftUI
 
 extension View {
+    @available(*, deprecated, message: "Will be removed soon")
     func `if`<Content: View>(_ conditional: Bool, content: (Self) -> Content) -> some View {
         if conditional {
             return AnyView(content(self))

core/Sources/Components/Checkbox/AccessibilityIdentifier/CheckboxAccessibilityIdentifier.swift

@@ -10,10 +10,20 @@ import Foundation
 
 /// The accessibility identifiers for the checkbox.
 public enum CheckboxAccessibilityIdentifier {
-    /// The default accessibility identifier. Can be changed by the consumer
+    /// The default checkbox accessibility identifier.
     public static let checkbox = "spark-check-box"
-    /// The default accessibility identifier. Can be changed by the consumer
+    /// The default checkbox group accessibility identifier.
     public static let checkboxGroup = "spark-check-box-group"
     /// The identifier of checkbox group ui view title
     public static let checkboxGroupTitle = "spark-check-box-group-title"
+    /// The default checkbox group item accessibility identifier.
+    public static func checkboxGroupItem(_ id: String) -> String {
+        Self.checkbox + "-\(id)"
+    }
+}
+
+public enum CheckboxAccessibilityValue {
+    public static let checked = "1"
+    public static let indeterminate = "0.5"
+    public static let unchecked = "0"
 }

core/Sources/Components/Checkbox/Model/CheckboxGroupViewModel.swift

@@ -17,7 +17,6 @@ final class CheckboxGroupViewModel: ObservableObject {
     @Published var checkedImage: Image
     @Published var layout: CheckboxGroupLayout
     @Published var spacing: LayoutSpacing
-    @Published var accessibilityIdentifierPrefix: String
     @Published var titleFont: TypographyFontToken
     @Published var titleColor: any ColorToken
     @Published var intent: CheckboxIntent
@@ -28,7 +27,6 @@ final class CheckboxGroupViewModel: ObservableObject {
     init(
         title: String?,
         checkedImage: Image,
-        accessibilityIdentifierPrefix: String,
         theme: Theme,
         intent: CheckboxIntent = .main,
         alignment: CheckboxAlignment = .left,
@@ -43,7 +41,6 @@ final class CheckboxGroupViewModel: ObservableObject {
         self.spacing = theme.layout.spacing
         self.titleFont = theme.typography.subhead
         self.titleColor = theme.colors.base.onSurface
-        self.accessibilityIdentifierPrefix = accessibilityIdentifierPrefix
     }
 
     func calculateSingleCheckboxWidth(string: String?) -> CGFloat {

core/Sources/Components/Checkbox/Model/CheckboxGroupViewModelTests.swift

@@ -25,7 +25,6 @@ final class CheckboxGroupViewModelTests: XCTestCase {
         self.sut = CheckboxGroupViewModel(
             title: "Title",
             checkedImage: Image(uiImage: self.checkedImage),
-            accessibilityIdentifierPrefix: "id",
             theme: self.theme
         )
     }
@@ -45,7 +44,6 @@ final class CheckboxGroupViewModelTests: XCTestCase {
             XCTAssertEqual(sut.intent, .main, "Intent does not match")
             XCTAssertEqual(sut.titleFont.uiFont, self.theme.typography.subhead.uiFont, "Title font does not match" )
             XCTAssertEqual(sut.titleColor.uiColor, self.theme.colors.base.onSurface.uiColor, "Title color does not match" )
-            XCTAssertEqual(sut.accessibilityIdentifierPrefix, "id", "Accessibility identifier does not match" )
     }
 
     func test_singleCheckbox_width() throws {

core/Sources/Components/Checkbox/View/SwiftUI/CheckboxGroupView.swift

@@ -38,6 +38,7 @@ public struct CheckboxGroupView: View {
     ///   - checkboxAlignment: The checkbox is positioned on the leading or trailing edge of the view.
     ///   - theme: The Spark-Theme.
     ///   - accessibilityIdentifierPrefix: All checkbox-views are prefixed by this identifier followed by the `CheckboxGroupItemProtocol`-identifier.
+    @available(*, deprecated, message: "Please use init without accessibilityIdentifierPrefix. It was given as a static string.")
     public init(
         title: String? = nil,
         checkedImage: Image,
@@ -47,11 +48,38 @@ public struct CheckboxGroupView: View {
         theme: Theme,
         intent: CheckboxIntent = .main,
         accessibilityIdentifierPrefix: String
+    ) {
+        self.init(
+            title: title,
+            checkedImage: checkedImage,
+            items: items,
+            layout: layout,
+            alignment: alignment,
+            theme: theme,
+            intent: intent
+        )
+    }
+
+    /// Initialize a group of one or multiple checkboxes.
+    /// - Parameters:
+    ///   - title: An optional group title displayed on top of the checkbox group..
+    ///   - checkedImage: The tick-checkbox image for checked-state.
+    ///   - items: An array containing of multiple `CheckboxGroupItemProtocol`. Each array item is used to render a single checkbox.
+    ///   - layout: The layout of the group can be horizontal or vertical.
+    ///   - checkboxAlignment: The checkbox is positioned on the leading or trailing edge of the view.
+    ///   - theme: The Spark-Theme.
+    public init(
+        title: String? = nil,
+        checkedImage: Image,
+        items: Binding<[any CheckboxGroupItemProtocol]>,
+        layout: CheckboxGroupLayout = .vertical,
+        alignment: CheckboxAlignment,
+        theme: Theme,
+        intent: CheckboxIntent = .main
     ) {
         let viewModel = CheckboxGroupViewModel(
             title: title,
             checkedImage: checkedImage,
-            accessibilityIdentifierPrefix: accessibilityIdentifierPrefix,
             theme: theme,
             intent: intent,
             alignment: alignment,
@@ -94,10 +122,21 @@ public struct CheckboxGroupView: View {
         .onChange(of: self.itemContents) { newValue in
             self.isScrollableHStack = true
         }
-        .accessibilityIdentifier("\(self.viewModel.accessibilityIdentifierPrefix).\(CheckboxAccessibilityIdentifier.checkboxGroup)")
+        .accessibilityElement(children: .contain)
+        .accessibilityIdentifier(CheckboxAccessibilityIdentifier.checkboxGroup)
     }
 
+    @ViewBuilder
     private func makeHStackView() -> some View {
+        if self.isScrollableHStack {
+            self.makeScrollHStackView()
+        } else {
+            self.makeDefaultHStackView()
+        }
+    }
+
+    @ViewBuilder
+    private func makeScrollHStackView() -> some View {
         ScrollView (.horizontal, showsIndicators: false) {
             HStack(alignment: .top, spacing: self.spacingLarge) {
                 self.makeContentView(maxWidth: self.viewWidth)
@@ -114,11 +153,6 @@ public struct CheckboxGroupView: View {
             .padding(checkboxSelectedBorderWidth)
         }
         .padding(-checkboxSelectedBorderWidth)
-        .if(!self.isScrollableHStack) { _ in
-            makeDefaultHStackView()
-        } else: { view in
-            view
-        }
     }
 
     @ViewBuilder
@@ -156,7 +190,6 @@ public struct CheckboxGroupView: View {
     }
 
     private func checkBoxView(item: Binding<any CheckboxGroupItemProtocol>) -> some View {
-        let identifier = "\(self.viewModel.accessibilityIdentifierPrefix).\(item.id.wrappedValue)"
         return CheckboxView(
             text: item.title.wrappedValue,
             checkedImage: self.viewModel.checkedImage,
@@ -166,7 +199,8 @@ public struct CheckboxGroupView: View {
             isEnabled: item.isEnabled.wrappedValue,
             selectionState: item.selectionState
         )
-        .accessibilityIdentifier(identifier)
+        .disabled(!item.isEnabled.wrappedValue)
+        .accessibilityIdentifier(CheckboxAccessibilityIdentifier.checkboxGroupItem(item.id.wrappedValue))
     }
 }
 

core/Sources/Components/Checkbox/View/SwiftUI/CheckboxView.swift

@@ -104,33 +104,41 @@ public struct CheckboxView: View {
             }
         )
         .buttonStyle(PressedButtonStyle(isPressed: self.$isPressed))
-        .accessibilityIdentifier(CheckboxAccessibilityIdentifier.checkbox)
         .isEnabledChanged { isEnabled in
             self.viewModel.isEnabled = isEnabled
         }
+        .fixedSize(horizontal: false, vertical: true)
+        .accessibilityIdentifier(CheckboxAccessibilityIdentifier.checkbox)
+        .accessibilityValue(setAccessibilityValue(selectionState: self.viewModel.selectionState))
+        .accessibilityRemoveTraits(.isSelected)
+    }
+
+    private func setAccessibilityValue(selectionState: CheckboxSelectionState) -> String {
+        switch selectionState {
+        case .selected:
+            return CheckboxAccessibilityValue.checked
+        case .indeterminate:
+            return CheckboxAccessibilityValue.indeterminate
+        case .unselected:
+            return CheckboxAccessibilityValue.unchecked
+        }
     }
 
     @ViewBuilder 
     private var checkboxView: some View {
-        let tintColor = self.viewModel.colors.tintColor.color
+        if self.selectionState == .selected {
+            self.checkbox().accessibilityAddTraits(.isSelected)
+        } else {
+            self.checkbox()
+        }
+    }
+
+    @ViewBuilder
+    private func checkbox() -> some View {
         let iconColor = self.viewModel.colors.iconColor.color
-        let borderColor = self.viewModel.colors.borderColor.color
+
         ZStack {
-            RoundedRectangle(cornerRadius: self.checkboxBorderRadius)
-                .if(self.selectionState == .selected || self.selectionState == .indeterminate) {
-                    $0.fill(tintColor)
-                } else: {
-                    $0.strokeBorder(borderColor, lineWidth: self.checkboxBorderWidth)
-                }
-                .frame(width: self.checkboxSize, height: self.checkboxSize)
-                .if(self.isPressed && self.viewModel.isEnabled) {
-                    $0.overlay(
-                        RoundedRectangle(cornerRadius: self.checkboxBorderRadius)
-                            .inset(by: -self.checkboxSelectedBorderWidth / 2)
-                            .stroke(self.viewModel.colors.pressedBorderColor.color, lineWidth: self.checkboxSelectedBorderWidth)
-                            .animation(.easeInOut(duration: 0.1), value: self.isPressed)
-                    )
-                }
+            self.stateFullCheckboxRectangle()
 
             switch self.selectionState {
             case .selected:
@@ -148,13 +156,42 @@ public struct CheckboxView: View {
                     .frame(width: self.checkboxIndeterminateWidth, height: self.checkboxIndeterminateHeight)
             }
         }
-        .if(self.selectionState == .selected) {
-            $0.accessibilityAddTraits(.isSelected)
-        }
         .id(Identifier.checkbox.rawValue)
         .matchedGeometryEffect(id: Identifier.checkbox.rawValue, in: self.namespace)
     }
 
+    @ViewBuilder
+    private func stateFullCheckboxRectangle() -> some View {
+        if self.isPressed && self.viewModel.isEnabled {
+            self.checkboxRectangle()
+                .overlay(
+                    RoundedRectangle(cornerRadius: self.checkboxBorderRadius)
+                        .inset(by: -self.checkboxSelectedBorderWidth / 2)
+                        .stroke(self.viewModel.colors.pressedBorderColor.color, lineWidth: self.checkboxSelectedBorderWidth)
+                        .animation(.easeInOut(duration: 0.1), value: self.isPressed)
+                )
+        } else {
+            self.checkboxRectangle()
+        }
+    }
+
+    @ViewBuilder
+    private func checkboxRectangle() -> some View {
+        let tintColor = self.viewModel.colors.tintColor.color
+        let borderColor = self.viewModel.colors.borderColor.color
+
+        if self.selectionState == .selected || self.selectionState == .indeterminate {
+            RoundedRectangle(cornerRadius: self.checkboxBorderRadius)
+                .fill(tintColor)
+                .frame(width: self.checkboxSize, height: self.checkboxSize)
+
+        } else {
+            RoundedRectangle(cornerRadius: self.checkboxBorderRadius)
+                .strokeBorder(borderColor, lineWidth: self.checkboxBorderWidth)
+                .frame(width: self.checkboxSize, height: self.checkboxSize)
+        }
+    }
+
     @ViewBuilder 
     private var contentView: some View {
         HStack(spacing: 0) {

core/Sources/Components/Checkbox/View/SwiftUI/CheckboxViewSnapshotTests.swift

@@ -38,7 +38,7 @@ final class CheckboxViewSnapshotTests: SwiftUIComponentSnapshotTestCase {
             for configuration in configurations {
                 self.selectionState = configuration.selectionState
 
-                let view = CheckboxView(
+                let checkboxView = CheckboxView(
                     text: configuration.text,
                     checkedImage: Image(uiImage: configuration.image),
                     alignment: configuration.alignment,
@@ -48,14 +48,8 @@ final class CheckboxViewSnapshotTests: SwiftUIComponentSnapshotTestCase {
                     selectionState: self._selectionState
                 )
                 .background(Color.systemBackground)
-                .if(configuration.text != "Hello World") { view in
-                    VStack {
-                        view
-                    }
-                    .frame(width: UIScreen.main.bounds.width)
-                } else: { view in
-                    view.fixedSize()
-                }
+
+                let view = self.view(text: configuration.text, checkbox: checkboxView)
 
                 self.assertSnapshot(
                     matching: view,
@@ -66,4 +60,15 @@ final class CheckboxViewSnapshotTests: SwiftUIComponentSnapshotTestCase {
             }
         }
     }
+
+    func view(text: String, checkbox: some View) -> AnyView {
+        if text != "Hello World" {
+            let view = VStack { checkbox }
+                .frame(width: UIScreen.main.bounds.width)
+            return AnyView(view)
+        } else {
+            return AnyView(checkbox.fixedSize())
+        }
+
+    }
 }