From f396bd4f36cebfbadeb1115d27ef0b73f0f04634 Mon Sep 17 00:00:00 2001 From: Florian Laabs Date: Fri, 23 Oct 2026 23:43:52 +0200 Subject: [PATCH] fix(native): let the keyboard reach the scrolling DataView on the web With items without controls the scrolling list had nothing to focus in the browser, so it could not be scrolled with the keyboard (axe: scrollable-region-focusable). The check of the a11y job found it once it waited for the story to settle. Signed-off-by: Florian Laabs --- .changeset/native-dataview-keyboard.md | 6 ++++++ packages/native/src/components/DataView/DataView.tsx | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/native-dataview-keyboard.md diff --git a/.changeset/native-dataview-keyboard.md b/.changeset/native-dataview-keyboard.md new file mode 100644 index 0000000..3909577 --- /dev/null +++ b/.changeset/native-dataview-keyboard.md @@ -0,0 +1,6 @@ +--- +'@wirecore/wirelayer-native': patch +--- + +DataView: in the browser (react-native-web) the scrolling list takes the keyboard focus, so the arrow keys scroll it even +when the items have no controls. diff --git a/packages/native/src/components/DataView/DataView.tsx b/packages/native/src/components/DataView/DataView.tsx index c1342da..bbedfbd 100644 --- a/packages/native/src/components/DataView/DataView.tsx +++ b/packages/native/src/components/DataView/DataView.tsx @@ -8,7 +8,7 @@ import { } from '@wirecore/wirelayer-recipes/native'; import { LayoutGrid, List } from 'lucide-react-native'; import { useEffect, useRef, useState, type ReactNode } from 'react'; -import { FlatList, Text, View, type StyleProp, type ViewStyle } from 'react-native'; +import { FlatList, Platform, Text, View, type StyleProp, type ViewStyle } from 'react-native'; import { useLocale } from '../../locale.js'; import { useAnnouncer } from '../../utils/announce.js'; import { useControllable } from '../../utils/useControllable.js'; @@ -251,6 +251,9 @@ export function DataView({ role="list" aria-label={label} aria-busy={firstLoad || (announces && busy) || undefined} + // In the browser (react-native-web) the list takes the keyboard focus, so the arrow keys scroll it even + // when the items have no controls + focusable={Platform.OS === 'web'} contentContainerClassName={styles.content()} onEndReached={infinite && autoLoad && !firstLoad ? onEnd : undefined} onEndReachedThreshold={0.5}