[SwiftUI] AccessibilityElements like UIKit

UIKit 에서

셀 (전체) -> 셀 내부의 버튼 으로 포커싱 이동시켜주고 싶으면

accessibilityElements = [ contentView, button ]

 

이렇게 해줬다.  

 

예를들어 앱스토어 같은 동선이다.

 

 

------

근데 SwiftUI 에서는 이걸 어떻게 할 수 있을까? 

레퍼런스는 못찾았고 예전에  

[SwiftUI] accessibilityRepresentation 과 accessibilityChildren 를 봤던 기억이 나서

이걸 활용해봤다.

 

 

아주 간단하게 비슷한 예제를 만들어보자

VStack 을 combine 하여 다 읽어주고 포커싱 이동하면 안의 버튼만 읽게 해주고 싶다

 

import SwiftUI

struct ContentView: View {
    
    var button: some View {
        Button("Buy") {
            
        }
    }
    
    var content: some View {
        VStack {
            Text("Hello, world!")
            Text("Hello, apple!")
            button.accessibilityHidden(true)
        }
        .padding()
        .border(.gray)
        .accessibilityElement(children: .combine)
        .accessibilityAddTraits(.isButton)
    }
    
    var body: some View {
        content
            .accessibilityChildren {
                content
                button
            }
    }
}

 

 

이렇게 해주면 children 쪽이 VStack 으로 들어가므로 영역이 이렇게 잡히게 된다. 

 

 

 

그럼 overlay 로 해보자 

    var body: some View {
        content
            .accessibilityChildren {
                content
                button
            }
    }

 

 

Buy 버튼의 영역이 VStack 만큼 잡한다.

 

 

 

 

alignment bottom 과 height 를 얼추 줘보자. 

    var button: some View {
        Button("Buy") {
            
        }
        .frame(height: 50)
    }
    
    ... 
    
    var body: some View {
        content
            .accessibilityChildren {
                content
                    .overlay(alignment: .bottom) { button }
            }
    }

 

얼추 괜찮아졌다. 

 

 

 

 

디바이스로 돌려보면 이런 느낌 + 리스트에서 원하는대로 잘 동작하는 것 확인

 

 

참고로 accessibilityRepresentation 로 해도 상관없다.  (이 예제에서는 이게 더 명확할지도..? 동작은 동일)

content
    .accessibilityRepresentation {
        content
            .overlay(alignment: .bottom) { button }
    }

 

 

 

근데 이건 내가 바라는게 아니다.. 접근성을 위해 위치랑 사이즈를 별도로 잡아주는 건 너무 하드하다.

GeometryReader 를 쓰는 것 또한 마찬가지,, 

 

UIKit 처럼 간단한 방법이 없을까? 🧐

 

 

 

최근에 나온 일기 앱이 SwiftUI 로 만든 것 같아서 봤더니 

custom action으로 대응했다.  (swipe up)

 

 

SwiftUI 에서는 이렇게 하는 걸 권장하는 건가??? 헷갈린다;; 

 

 

[ 이것저것 찾으며 발견한 SwiftUI 접근성 좋은 레퍼런스 ]

 

https://mobilea11y.com/guides/swiftui/swiftui-semantic-views/ 

https://github.com/cvs-health/ios-swiftui-accessibility-techniques