Skip to content

Commit

Permalink
Docs + sample
Browse files Browse the repository at this point in the history
Summary: $title

Reviewed By: pentiumao

Differential Revision: D63276012

fbshipit-source-id: a7820d088a09a36a23f0a1ff5f18c797595b6d61
  • Loading branch information
Anna Powolny authored and facebook-github-bot committed Sep 27, 2024
1 parent 4346545 commit dc958a4
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 0 deletions.
8 changes: 8 additions & 0 deletions docs/accessibility/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,11 @@ The following table provides the supported events of the `Style` object:
| `Style.performAccessibilityAction` | <a href="https://developer.android.com/reference/android/support/v4/view/AccessibilityDelegateCompat.html#performAccessibilityAction(android.view.View, int, android.os.Bundle)">performAccessibilityAction</a> |
| `Style.sendAccessibilityEvent` | <a href="https://developer.android.com/reference/android/support/v4/view/AccessibilityDelegateCompat.html#sendAccessibilityEvent(android.view.View, int)">sendAccessibilityEvent</a> |
| `Style.sendAccessibilityEventUnchecked` | <a href="https://developer.android.com/reference/android/support/v4/view/AccessibilityDelegateCompat.html#sendAccessibilityEventUnchecked(android.view.View, android.view.accessibility.AccessibilityEvent)">sendAccessibilityEventUnchecked</a> |


## Focus Order

You can customize the default focus order behavior by creating focus order properties using `useFocusOrder()` hook and adding them to the `Style` object. This allows you to tailor the focus order to your specific needs, ensuring that interactive elements are navigable in a logical and predictable manner.

```kotlin file=sample/src/main/java/com/facebook/samples/litho/kotlin/accessibility/FocusOrderComponent.kt start=start_focusorder_a11y_example end=end_focusorder_a11y_example
```
6 changes: 6 additions & 0 deletions sample/src/main/java/com/facebook/samples/litho/Demos.kt
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ import com.facebook.samples.litho.java.triggers.ClearTextTriggerExampleComponent
import com.facebook.samples.litho.java.triggers.CustomEventTriggerExampleComponent
import com.facebook.samples.litho.java.triggers.TooltipTriggerExampleActivity
import com.facebook.samples.litho.java.viewpager.ViewPagerDemoComponent
import com.facebook.samples.litho.kotlin.accessibility.FocusOrderComponent
import com.facebook.samples.litho.kotlin.animations.animatedapi.AnimatedComponent
import com.facebook.samples.litho.kotlin.animations.animatedbadge.AnimatedBadgeKotlin
import com.facebook.samples.litho.kotlin.animations.animatedcounter.AnimatingCounterRootComponent
Expand Down Expand Up @@ -170,6 +171,11 @@ class Demos {
DemoList(
name = "Kotlin API Demos",
listOf(
DemoGrouping(
name = "Accessibility",
listOf(
SingleDemo(name = "Focus Order", component = FocusOrderComponent()),
)),
DemoGrouping(
name = "Animations",
listOf(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.facebook.samples.litho.kotlin.accessibility

import com.facebook.litho.Column
import com.facebook.litho.Component
import com.facebook.litho.ComponentScope
import com.facebook.litho.KComponent
import com.facebook.litho.Style
import com.facebook.litho.accessibility.contentDescription
import com.facebook.litho.accessibility.focusOrder
import com.facebook.litho.core.padding
import com.facebook.litho.kotlin.widget.Text
import com.facebook.litho.kotlin.widget.TextInput
import com.facebook.litho.useFocusOrder
import com.facebook.litho.useState
import com.facebook.litho.view.onClick
import com.facebook.rendercore.dp

class FocusOrderComponent : KComponent() {

override fun ComponentScope.render(): Component {
// start_focusorder_a11y_example
val hideElements = useState { false }
val (first, second, third, fourth, fifth) = useFocusOrder()

return Column(
style = Style.padding(16.dp).contentDescription("Fourth hello!").focusOrder(fourth)) {
child(
Text(
text = "First hello!",
style =
Style.focusOrder(first).onClick {
hideElements.update { !hideElements.value }
}))

if (hideElements.value) {
child(Text(text = "Fifth hello!", style = Style.focusOrder(fifth)))
child(TextInput(initialText = "Second hello!", style = Style.focusOrder(second)))
}
child(Text(text = "Third hello!", style = Style.focusOrder(third)))
}
// end_focusorder_a11y_example

}
}

0 comments on commit dc958a4

Please sign in to comment.