Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Semantics in Jetpack Compose

Bryan Herbst
December 09, 2021

Semantics in Jetpack Compose

In Jetpack Compose semantics are the key to unlocking accessibility and testing for your applications. We will explore what semantics are, how semantics work with the accessibility framework to make your apps accessible, and how you can use them to effectively test Composables.

Bryan Herbst

December 09, 2021
Tweet

More Decks by Bryan Herbst

Other Decks in Technology

Transcript

  1. Jetpack Compose Semantics 1. Why do I need semantics? 2.

    How do I use semantics? 3. Deep Dives: • Accessibility • Testing
  2. Accessibility & Testing •Need to find UI elements •Need to

    act on UI elements •Need UI element metadata (e.g. content description, available interactions)
  3. “This is not a recommend method in View system.” Source:

    https://issuetracker.google.com/issues/172590945
  4. com.example D/whereIsJane: printToLog: Printing with useUnmergedTree = 'false' Node #1

    at (l=0.0, t=145.0, r=232.0, b=249.0)px |-Node #2 at (l=0.0, t=145.0, r=232.0, b=249.0)px Text = '[Jane Doe, 555-555-5555]' Actions = [OnClick, GetTextLayoutResult] MergeDescendants = 'true'
  5. com.example D/whereIsJane: printToLog: Printing with useUnmergedTree = 'false' Node #1

    at (l=0.0, t=145.0, r=232.0, b=249.0)px |-Node #2 at (l=0.0, t=145.0, r=232.0, b=249.0)px Text = '[Jane Doe, 555-555-5555]' Actions = [OnClick, GetTextLayoutResult] MergeDescendants = 'true'
  6. com.example D/whereIsJane: printToLog: Printing with useUnmergedTree = 'false' Node #1

    at (l=0.0, t=145.0, r=232.0, b=249.0)px |-Node #2 at (l=0.0, t=145.0, r=232.0, b=249.0)px Text = '[Jane Doe, 555-555-5555]' Actions = [OnClick, GetTextLayoutResult] MergeDescendants = 'true'
  7. com.example D/whereIsJane: printToLog: Printing with useUnmergedTree = 'true' Node #1

    at (l=0.0, t=145.0, r=232.0, b=249.0)px |-Node #2 at (l=0.0, t=145.0, r=232.0, b=249.0)px Actions = [OnClick] MergeDescendants = 'true' |-Node #3 at (l=0.0, t=145.0, r=159.0, b=197.0)px | Text = '[Jane Doe]' | Actions = [GetTextLayoutResult] |-Node #5 at (l=0.0, t=197.0, r=232.0, b=249.0)px Text = '[555-555-5555]' Actions = [GetTextLayoutResult]