Skip to content

Commit ba83951

Browse files
asgvardasgvard
committed
Prettier changes
1 parent bd46707 commit ba83951

2 files changed

Lines changed: 34 additions & 28 deletions

File tree

‎docs/api-reference/SpatialNavigation.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,20 @@ init(config?: {
5959

6060
### Config options
6161

62-
| Option | Type | Default | Description |
63-
| ----------------------------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64-
| `debug` | `boolean` | `false` | Log navigation decisions to the browser console. |
65-
| `visualDebug` | `boolean` | `false` | Draw a canvas overlay showing component bounding boxes and navigation paths. |
66-
| `nativeMode` | `boolean` | `false` | **Deprecated.** Disable DOM key event listeners (for React Native). You must drive navigation manually. |
67-
| `throttle` | `number` | `0` | Milliseconds to wait between processing repeated key presses. `0` means no throttle. |
68-
| `throttleKeypresses` | `boolean` | `false` | When `true` and `throttle > 0`, throttle key repeat events while a key is held down. |
69-
| `useGetBoundingClientRect` | `boolean` | `false` | Use `getBoundingClientRect()` instead of `offsetLeft/Top` for layout measurement. Use this when elements are CSS-transformed or scaled. |
70-
| `shouldFocusDOMNode` | `boolean` | `false` | Call `HTMLElement.focus()` on the focused component's DOM node, enabling native browser focus behavior and accessibility. |
71-
| `domNodeFocusOptions` | `FocusOptions` | `undefined` | Options passed to `HTMLElement.focus()` when `shouldFocusDOMNode` is `true`. |
72-
| `shouldUseNativeEvents` | `boolean` | `false` | Do not call `preventDefault()` on key events, allowing the browser to handle them natively as well. |
73-
| `rtl` | `boolean` | `false` | Enable right-to-left layout mode. Left and right navigation directions are swapped. |
74-
| `distanceCalculationMethod` | `'center' \| 'edges' \| 'corners'` | `'corners'` | Algorithm used to calculate distance between components. See [Distance Calculation](../guides/distance-calculation.md). |
75-
| `customDistanceCalculationFunction` | `function` | `undefined` | Override the secondary-axis distance calculation. See [Distance Calculation](../guides/distance-calculation.md). |
62+
| Option | Type | Default | Description |
63+
| ----------------------------------- | ---------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64+
| `debug` | `boolean` | `false` | Log navigation decisions to the browser console. |
65+
| `visualDebug` | `boolean` | `false` | Draw a canvas overlay showing component bounding boxes and navigation paths. |
66+
| `nativeMode` | `boolean` | `false` | **Deprecated.** Disable DOM key event listeners (for React Native). You must drive navigation manually. |
67+
| `throttle` | `number` | `0` | Milliseconds to wait between processing repeated key presses. `0` means no throttle. |
68+
| `throttleKeypresses` | `boolean` | `false` | When `true` and `throttle > 0`, throttle key repeat events while a key is held down. |
69+
| `useGetBoundingClientRect` | `boolean` | `false` | Use `getBoundingClientRect()` instead of `offsetLeft/Top` for layout measurement. Use this when elements are CSS-transformed or scaled. |
70+
| `shouldFocusDOMNode` | `boolean` | `false` | Call `HTMLElement.focus()` on the focused component's DOM node, enabling native browser focus behavior and accessibility. |
71+
| `domNodeFocusOptions` | `FocusOptions` | `undefined` | Options passed to `HTMLElement.focus()` when `shouldFocusDOMNode` is `true`. |
72+
| `shouldUseNativeEvents` | `boolean` | `false` | Do not call `preventDefault()` on key events, allowing the browser to handle them natively as well. |
73+
| `rtl` | `boolean` | `false` | Enable right-to-left layout mode. Left and right navigation directions are swapped. |
74+
| `distanceCalculationMethod` | `'center' \| 'edges' \| 'corners'` | `'corners'` | Algorithm used to calculate distance between components. See [Distance Calculation](../guides/distance-calculation.md). |
75+
| `customDistanceCalculationFunction` | `function` | `undefined` | Override the secondary-axis distance calculation. See [Distance Calculation](../guides/distance-calculation.md). |
7676
| `onUtterText` | `(text: string) => void` | `undefined` | Global callback invoked with a concatenated accessibility label string whenever focus changes. Wire this to your platform's Text-To-Speech engine. See the [Accessibility Labels](../guides/accessibility-labels.md) guide. |
7777

7878
### Example

‎docs/guides/accessibility-labels.md‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ init({
3838

3939
A few examples of what `platformTTS.speak` might look like in practice:
4040

41-
| Platform | Typical entry point |
42-
| ------------ | ----------------------------------------------------------------------------------------------- |
41+
| Platform | Typical entry point |
42+
| ------------------ | --------------------------------------------------------------------------------------------- |
4343
| Tizen (Samsung TV) | `tizen.tvinputdevice` + custom TTS bridge, or `window.webapis.tts.speak(text)` on some models |
44-
| webOS (LG TV) | `webOS.service.request('luna://com.webos.service.tts', { method: 'speak', ... })` |
45-
| Browser dev env | `window.speechSynthesis.speak(new SpeechSynthesisUtterance(text))` |
44+
| webOS (LG TV) | `webOS.service.request('luna://com.webos.service.tts', { method: 'speak', ... })` |
45+
| Browser dev env | `window.speechSynthesis.speak(new SpeechSynthesisUtterance(text))` |
4646

4747
During development, logging to the console is usually enough:
4848

@@ -130,11 +130,11 @@ Content (label="Recommended")
130130

131131
Navigating `Home` → `Inception` → `Interstellar` → `Breaking Bad` produces:
132132

133-
| Step | `onUtterText` argument | Why |
134-
| ---------------------- | -------------------------------------- | ------------------------------------------------------------------------- |
135-
| `Home` → `Inception` | `"Recommended, Movies, Inception"` | Entered `Content` and `Row 1` for the first time, plus the leaf label |
136-
| `Inception` → `Interstellar` | `"Interstellar"` | Still inside `Row 1`; no new parent region entered — only the leaf label |
137-
| `Interstellar` → `Breaking Bad` | `"Series, Breaking Bad"` | Left `Row 1` and entered `Row 2`; `Content` is unchanged, so it's skipped |
133+
| Step | `onUtterText` argument | Why |
134+
| ------------------------------- | ---------------------------------- | ------------------------------------------------------------------------- |
135+
| `Home` → `Inception` | `"Recommended, Movies, Inception"` | Entered `Content` and `Row 1` for the first time, plus the leaf label |
136+
| `Inception` → `Interstellar` | `"Interstellar"` | Still inside `Row 1`; no new parent region entered — only the leaf label |
137+
| `Interstellar` → `Breaking Bad` | `"Series, Breaking Bad"` | Left `Row 1` and entered `Row 2`; `Content` is unchanged, so it's skipped |
138138

139139
### When nothing is uttered
140140

@@ -157,7 +157,13 @@ Prefer the concrete item over the element type. `"Play"` is more useful than `"B
157157
`accessibilityLabel` is one of the few `useFocusable` options that _is_ reactive after mount. Passing a new value triggers an update; the next focus change on that component will use the new label. This is useful for toggles and counters:
158158

159159
```typescript
160-
function Favorite({ title, isFavorited }: { title: string; isFavorited: boolean }) {
160+
function Favorite({
161+
title,
162+
isFavorited
163+
}: {
164+
title: string;
165+
isFavorited: boolean;
166+
}) {
161167
const { ref, focused } = useFocusable({
162168
accessibilityLabel: isFavorited
163169
? `Remove ${title} from favorites`
@@ -187,9 +193,9 @@ If you expect fast, repeated key presses (e.g. holding the arrow key), consider
187193

188194
## API summary
189195

190-
| Location | Purpose |
191-
| -------------------------------------------------------- | ------------------------------------------------------------------------------------ |
192-
| [`init({ onUtterText })`](../api-reference/SpatialNavigation.md#init-config) | Global callback fired with the text to be uttered when focus changes. |
193-
| [`useFocusable({ accessibilityLabel })`](../api-reference/useFocusable.md#accessibilitylabel) | Per-component label. Set on both leaf items and containers. |
196+
| Location | Purpose |
197+
| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
198+
| [`init({ onUtterText })`](../api-reference/SpatialNavigation.md#init-config) | Global callback fired with the text to be uttered when focus changes. |
199+
| [`useFocusable({ accessibilityLabel })`](../api-reference/useFocusable.md#accessibilitylabel) | Per-component label. Set on both leaf items and containers. |
194200

195201
See also: [`useFocusable`](../api-reference/useFocusable.md) and [`SpatialNavigation`](../api-reference/SpatialNavigation.md).

0 commit comments

Comments
 (0)