Merge pull request #138 from kiwicom/bug/accessibility-fixes

Fix accessibility for TextStruct and Tag
kiwicom · May 20, 2022 · 592775e · 592775e
2 parents 1c6d972 + 2aed150
commit 592775e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/Sources/Orbit/Components/CountryFlag.swift b/Sources/Orbit/Components/CountryFlag.swift
@@ -27,6 +27,7 @@ public struct CountryFlag: View {
                 .padding(Icon.averageIconContentPadding / 2)
                 .frame(width: size.value * sizeCategory.ratio)
                 .fixedSize()
+                .accessibility(label: SwiftUI.Text(countryCode))
         }
     }
 

diff --git a/Sources/Orbit/Components/Icon.swift b/Sources/Orbit/Components/Icon.swift
@@ -34,11 +34,13 @@ public struct Icon: View {
                 SwiftUI.Text(verbatim: symbol.value)
                     .foregroundColor(color)
                     .font(.orbitIcon(size: size.value, style: size.textStyle))
+                    .accessibility(label: SwiftUI.Text(String(describing: symbol)))
             case .image(let image, let mode):
                 image
                     .resizable()
                     .aspectRatio(contentMode: mode)
                     .frame(width: size.value, height: size.value * sizeCategory.ratio)
+                    .accessibility(hidden: true)
             case .countryFlag(let countryCode):
                 CountryFlag(countryCode, size: size)
             case .sfSymbol(let systemName):

diff --git a/Sources/Orbit/Components/Tag.swift b/Sources/Orbit/Components/Tag.swift
@@ -125,6 +125,7 @@ extension Tag {
                 if case .removable(let removeAction) = style {
                     Icon(.closeCircle, size: .small, color: iconColor(isPressed: configuration.isPressed))
                         .onTapGesture(perform: removeAction)
+                        .accessibility(addTraits: .isButton)
                 }
             }
             .foregroundColor(labelColor)

diff --git a/Sources/Orbit/Components/Text.swift b/Sources/Orbit/Components/Text.swift
@@ -26,34 +26,24 @@ public struct Text: View {
     let isSelectable: Bool
     let kerning: CGFloat
     let strikethrough: Bool
+    let isAccessibilityElement: Bool
 
     public var body: some View {
         if content.isEmpty == false {
-            if content.containsHtmlFormatting {
-                SwiftUI.Text(attributedText)
-                    .strikethrough(strikethrough, color: foregroundColor.map(SwiftUI.Color.init))
-                    .kerning(kerning)
-                    .multilineTextAlignment(alignment)
-                    .lineSpacing(lineSpacing ?? 0)
-                    .fixedSize(horizontal: false, vertical: true)
-                    .overlay(selectableText)
-                    .overlay(textLinks)
-            } else {
-                SwiftUI.Text(verbatim: content)
-                    .strikethrough(strikethrough, color: foregroundColor.map(SwiftUI.Color.init))
-                    .kerning(kerning)
-                    .foregroundColor(foregroundColor.map(SwiftUI.Color.init))
-                    .font(.orbit(size: size.value, weight: weight, style: size.textStyle))
-                    .lineSpacing(lineSpacing ?? 0)
-                    .multilineTextAlignment(alignment)
-                    .fixedSize(horizontal: false, vertical: true)
-                    .overlay(selectableText)
-            }
+            text
+                .lineSpacing(lineSpacing ?? 0)
+                .multilineTextAlignment(alignment)
+                .fixedSize(horizontal: false, vertical: true)
+                .overlay(selectableText)
+                .overlay(textLinks)
+                .accessibility(hidden: isAccessibilityElement == false)
+                .accessibility(removeTraits: isAccessibilityElement ? [] : [.isStaticText])
+                .accessibility(label: isAccessibilityElement ? SwiftUI.Text(content) : SwiftUI.Text(""))
         }
     }
 
     @ViewBuilder var textLinks: some View {
-        if content.containsTextLinks {
+        if content.containsHtmlFormatting, content.containsTextLinks {
             GeometryReader { geometry in
                 TextLink(content: textLinkContent, bounds: geometry.size, color: linkColor) { url, text in
                     HapticsProvider.sendHapticFeedback(.light(0.5))
@@ -76,6 +66,20 @@ public struct Text: View {
         }
     }
 
+    var text: SwiftUI.Text {
+        if content.containsHtmlFormatting {
+            return SwiftUI.Text(attributedText)
+                .strikethrough(strikethrough, color: foregroundColor.map(SwiftUI.Color.init))
+                .kerning(kerning)
+        } else {
+            return SwiftUI.Text(verbatim: content)
+                .strikethrough(strikethrough, color: foregroundColor.map(SwiftUI.Color.init))
+                .kerning(kerning)
+                .foregroundColor(foregroundColor.map(SwiftUI.Color.init))
+                .font(.orbit(size: size.value, weight: weight, style: size.textStyle))
+        }
+    }
+
     var textLinkContent: NSAttributedString {
         TagAttributedStringBuilder.all.attributedStringForLinks(
             content,
@@ -132,6 +136,7 @@ public extension Text {
     /// - Parameter linkAction: Handler for any detected TextLink tap action.
     /// - Parameter isSelectable: Determines if text is copyable using long tap gesture.
     /// - Parameter kerning: Additional spacing between characters.
+    /// - Parameter isAccessibilityElement: Makes it possible to remove the default accessibility traits.
     /// - Parameter strikethrough: Determines if strikethrough should be applied.
     init(
         _ content: String,
@@ -145,6 +150,7 @@ public extension Text {
         isSelectable: Bool = false,
         strikethrough: Bool = false,
         kerning: CGFloat = 0,
+        isAccessibilityElement: Bool = true,
         linkAction: @escaping TextLink.Action = { _, _ in }
     ) {
         self.content = content
@@ -158,6 +164,7 @@ public extension Text {
         self.isSelectable = isSelectable
         self.strikethrough = strikethrough
         self.kerning = kerning
+        self.isAccessibilityElement = isAccessibilityElement
         self.linkAction = linkAction
     }
 }

diff --git a/Sources/Orbit/Support/Layout/TextStrut.swift b/Sources/Orbit/Support/Layout/TextStrut.swift
@@ -8,9 +8,9 @@ public struct TextStrut: View {
     let textSize: Text.Size
 
     public var body: some View {
-        Text("I", size: textSize, color: .custom(.clear))
-            .frame(width: 0)
+        Text("I", size: textSize, color: .custom(.clear), isAccessibilityElement: false)
             .accessibility(hidden: true)
+            .frame(width: 0)
     }
 
     /// Creates invisible strut of height of text based on provided text size.