Semantics란

he system of representing the meaning of UI elements for accessibility services. This includes properties like descriptions, states, and actions a user can take.

Composition은 트리구조로 생성된다 이렇게 생성된 트리와 동일한 구조를 가지고 있는 트리가 있는데 바로 Semantics Tree다
이 트리구조는 Accessibility services에 대한 설명과 테스팅 프레임워크에서 사용된다.
Semantics는 composeable이 어떻게 draw되는지에 대해서는 정보를 가지고 있지 않다. 사용자가 할 수 있는 이벤트, 상태 이런 정보를 가지고 있다.
기본적으로는 composeable, Modifier를 사용하는 구조라면 자동적으로 생성이 된다. 하지만 low-level의 뷰를 커스텀하는 경우에는 반드시 semantics를 제공해주어야한다.

공식문서에서는 위처럼 캘린더를 구현하는데 Layout을 이용해서 바로 캔버스에 그리는 방식으로 한 경우 semantics를 지정해주지 않으면 accessibility services는 충분한 정보를 받지 못할거고 accessilibity framework는 캘린더가 선택되었다 또는 운좋게 4월 캘린더가 선택되었다 정도로 정보를 받는다고한다. 이 달력 컴포저블이 더 접근성 좋게 하려면 semantics를 지정해주어야한다.

Semantics properties

위에서 이야기한 것 처럼 UI node tree와 평행된 구조로 생성된 semantics tree는 해당 노드들이 어떤 역할을 하는지에 대한 정보를 가지고 있다.
예를 들어 Text의 경우 text에 대한 프로퍼티를 가지고 있다. Icon의 경우 contentDescription을 통해 해당 아이콘의 설명을 텍스트 형식으로 붙일 수 있다.
Compose에서 제공하는 대부분은 이런 semantics가 설정되어있다. 원한다면 오버라이드가 가능하다. Modifier에서 semantics 또는 clearAndSetSemantics를 통해 가능하다.

Semantics tree Visualize

LayoutInspector를 사용하는 방법과 테스트 환경에서 printToLog를 사용하는 방법이 있다.

Semantics 활용

Talkback 시스템

semantics로 지정한 텍스트들을 talkback이 읽는다. 여기서 talkback은 화면을 보지 않고 음성 출력을 통해 기기를 사용할 수 있는 기능을 말한다.

테스트에서 node찾고 해당 노드에서 작업 진행

val mySwitch = SemanticsMatcher.expectValue(
    SemanticsProperties.Role, Role.Switch
)
composeTestRule.onNode(mySwitch)
    .performClick()
    .assertIsOff()

공식문서의 예제로 semantics를 통해 특정 노드에 접근 후 해당 노드의 동작을 제어할 수 있다.