fix: accessibility label to vocalize the icon style style of button component (#460) (#483)

Closes #460

Co-authored-by: Pierre-Yves Lapersonne <[email protected]>
Co-authored-by: Ludovic Pinel <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>

Author: ludovic35

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [Library] Add accessibility label to vocalize the IconOnly button style ([#460](https://github.com/Orange-OpenSource/ouds-ios/issues/460))
 - [Library] Chevron for link component pointing to bad direction in RTL mode ([#557](https://github.com/Orange-OpenSource/ouds-ios/issues/557))
 - [Library] Remove divider if outline effect is active in RadioItem component ([#564](https://github.com/Orange-OpenSource/ouds-ios/issues/564))
 - [DesignToolbox] In RTL mode code sample text not aligned on the left ([#554](https://github.com/Orange-OpenSource/ouds-ios/issues/554))

DesignToolbox/DesignToolbox.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -42,8 +42,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/pointfreeco/xctest-dynamic-overlay",
       "state" : {
-        "revision" : "b444594f79844b0d6d76d70fbfb3f7f71728f938",
-        "version" : "1.5.1"
+        "revision" : "39de59b2d47f7ef3ca88a039dff3084688fe27f4",
+        "version" : "1.5.2"
       }
     }
   ],

DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift

@@ -83,11 +83,19 @@ private struct ButtonDemo: View {
             } else {
                 switch model.layout {
                 case .iconOnly:
-                    OUDSButton(icon: Image(decorative: "ic_heart"), hierarchy: model.hierarchy, style: model.style) {}
+                    OUDSButton(icon: Image(decorative: "ic_heart"),
+                               accessibilityLabel: "app_components_button_icon_a11y".localized(),
+                               hierarchy: model.hierarchy,
+                               style: model.style) {}
                 case .textOnly:
-                    OUDSButton(text: model.text, hierarchy: model.hierarchy, style: model.style) {}
+                    OUDSButton(text: model.text,
+                               hierarchy: model.hierarchy,
+                               style: model.style) {}
                 case .iconAndText:
-                    OUDSButton(icon: Image(decorative: "ic_heart"), text: model.text, hierarchy: model.hierarchy, style: model.style) {}
+                    OUDSButton(icon: Image(decorative: "ic_heart"),
+                               text: model.text,
+                               hierarchy: model.hierarchy,
+                               style: model.style) {}
                 }
             }
 

DesignToolbox/DesignToolboxSnapshotsTests/__Snapshots__/Components/OUDSButtonUITests.swift

@@ -181,7 +181,7 @@ private struct ButtonTest: View {
         case .textAndIcon:
             OUDSButton(icon: Image(decorative: "ic_heart"), text: "Button", hierarchy: hierarchy, style: style) {}
         case .icon:
-            OUDSButton(icon: Image(decorative: "ic_heart"), hierarchy: hierarchy, style: style) {}
+            OUDSButton(icon: Image(decorative: "ic_heart"), accessibilityLabel: "Icon", hierarchy: hierarchy, style: style) {}
         }
     }
 }

OUDS/Core/Components/Sources/Buttons/OUDSButton.swift

@@ -77,7 +77,7 @@ public struct OUDSButton: View {
 
     private enum `Type` {
         case text(String)
-        case icon(Image)
+        case icon(Image, String)
         case textAndIcon(text: String, icon: Image)
     }
 
@@ -123,11 +123,12 @@ public struct OUDSButton: View {
     ///
     /// - Parameters:
     ///    - icon: An image which shoud contains an icon
+    ///    - accessibilityLabel: The text to vocalize with *Voice Over* describing the button action
     ///    - hierarchy: The button hierarchy
     ///    - style: The button style
     ///    - action: The action to perform when the user triggers the button
-    public init(icon: Image, hierarchy: Hierarchy, style: Style, action: @escaping () -> Void) {
-        self.type = .icon(icon)
+    public init(icon: Image, accessibilityLabel: String, hierarchy: Hierarchy, style: Style, action: @escaping () -> Void) {
+        self.type = .icon(icon, accessibilityLabel)
         self.hierarchy = hierarchy
         self.style = style
         self.action = action
@@ -158,7 +159,7 @@ public struct OUDSButton: View {
 
         Button(action: action) {
             switch type {
-            case let .icon(icon):
+            case let .icon(icon, _):
                 ButtonIcon(icon: icon)
             case let .text(text):
                 ButtonText(text: text)
@@ -167,6 +168,21 @@ public struct OUDSButton: View {
             }
         }
         .buttonStyle(OUDSButtonStyle(hierarchy: hierarchy, style: style))
+        .accessibilityLabel(accessibilityLabel)
+    }
+
+    /// Forges a string to vocalize with *Voice Over* describing the button style `loading`
+    /// or the text according to the button type. For iconOnly the `accessibilityLabel` is used,
+    /// else the button text is used.
+    private var accessibilityLabel: String {
+        if style == .loading {
+            return "core_button_loading_a11y".localized()
+        } else {
+            switch type {
+            case .text(let text), .textAndIcon(let text, _), .icon(_, let text):
+                return text
+            }
+        }
     }
 }
 

OUDS/Core/Components/Sources/Resources/Localizable.xcstrings

@@ -4,6 +4,30 @@
     "" : {
       "shouldTranslate" : false
     },
+    "core_button_loading_a11y" : {
+      "comment" : "Button",
+      "extractionState" : "manual",
+      "localizations" : {
+        "ar" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "تحميل"
+          }
+        },
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Loading"
+          }
+        },
+        "fr" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Chargement"
+          }
+        }
+      }
+    },
     "core_checkbox_checked_a11y" : {
       "comment" : "Checkbox",
       "extractionState" : "manual",
@@ -239,7 +263,7 @@
         "fr" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Non sélectionné"
+            "value" : "Undéterminé"
           }
         }
       }