♿ Add VoiceOver and TalkBack Accessibility Support #72

JasperVercammen · 2026-01-22T13:38:53Z

♿ Add VoiceOver and TalkBack Accessibility Support

Summary

Implements comprehensive screen reader accessibility for the timer picker component, enabling VoiceOver (iOS) and TalkBack (Android) users to interact with all picker columns using native swipe gestures.

What's Changed

New Files

src/utils/useScreenReaderEnabled.ts - Hook to detect screen reader state with automatic change detection

Modified Files

src/components/DurationScroll/types.ts - Added accessibility-related props
src/components/DurationScroll/DurationScroll.tsx - Implemented accessible picker with adjustable role
src/components/TimerPicker/types.ts - Added accessibility label props
src/components/TimerPicker/TimerPicker.tsx - Integrated screen reader detection and passed accessibility props
src/index.ts - Exported useScreenReaderEnabled hook
README.md - Documented new accessibility features and props

Features

✅ Native Screen Reader Support

Pickers become "adjustable" elements when screen readers are enabled
Users can swipe up/down to increment/decrement values
Values wrap around at boundaries (e.g., 00 → 23 → 00 for hours)

✅ Immediate Audio Feedback

New values announced instantly after each gesture
Respects formatting preferences (padWithZero, 12-hour format, etc.)

✅ Conditional Behavior

Accessibility only active when screen reader is enabled
Normal scroll behavior preserved for sighted users
Prevents iOS parent-blocking-child accessibility issues

✅ Internationalization Ready

<TimerPicker
    accessibilityLabels={{
        hours: "Heures",
        minutes: "Minutes",
        seconds: "Secondes",
        hint: "Balayez vers le haut ou le bas pour ajuster"
    }}
/>

New Props

`TimerPicker` / `TimerPickerModal`

accessibilityLabel?: string - Label for entire picker
accessibilityLabels?: { days, hours, minutes, seconds, picker, hint } - Per-column labels

Technical Implementation

Uses AccessibilityInfo API to detect VoiceOver/TalkBack state
Wraps FlatList in accessible View with accessibilityRole="adjustable"
Hides child elements from screen readers using importantForAccessibility="no-hide-descendants"
Labels explicitly hidden with accessibilityElementsHidden (iOS) and importantForAccessibility (Android)
Format functions passed to respect existing display preferences

Breaking Changes

None - fully backward compatible. Default behavior unchanged when screen readers are disabled.

Testing

Manual Testing Required:

iOS: Enable VoiceOver (Settings → Accessibility → VoiceOver)
Android: Enable TalkBack (Settings → Accessibility → TalkBack)
Verify each picker column is focusable
Verify swipe up/down adjusts values
Verify values are announced immediately
Verify wrap-around behavior at min/max values
Test with different configurations (12-hour format, custom intervals, limits)

Automated Tests:

All existing tests pass. Accessibility features don't interfere with test queries (default isScreenReaderEnabled={false}).

Documentation

Updated README with:

New props in TimerPicker props table
Dedicated "Accessibility" section with usage examples
Internationalization examples
How to use useScreenReaderEnabled hook in custom components

⚙️ upgrade yarn to v4.11.0 (for compatibility with OIDC)

Release/v2.3.1

Release/v2.4.0

troberts-28 · 2026-01-24T09:23:07Z

Hey @JasperVercammen, thank you for putting this PR together. Will review ASAP 🙌

troberts-28

Thanks again for the PR @JasperVercammen. There's a little bit of work to do to get this release-ready - have left you some comments. It's also be great make this complete by adding the little bits of accesibility support needed for TimerPickerModal (roles and labels for the modal components, announcement for the modal etc.)

troberts-28 · 2026-02-08T19:22:16Z

src/components/DurationScroll/DurationScroll.tsx

+                    const announcement = formatValue
+                        ? formatValue(newValue)
+                        : String(newValue);
+                    AccessibilityInfo.announceForAccessibility(announcement);


What's the reason for not using announceForAccessibilityWithOptions with queue: false for decrementing (as for incrementing?)

troberts-28 · 2026-02-08T19:24:12Z

src/components/DurationScroll/DurationScroll.tsx

+                            isScreenReaderEnabled
+                                ? {
+                                      text: formatValue
+                                          ? formatValue(latestDuration.current)


This is memoized so this won't receive the latest value of this ref - you'll end up with a stale value here I think

troberts-28 · 2026-02-08T19:25:43Z

src/components/TimerPicker/TimerPicker.tsx

 const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
    (props, ref) => {
        const {
+            accessibilityLabel,


Doesn't look like this is used?

troberts-28 · 2026-02-08T19:26:23Z

src/components/TimerPicker/types.ts

+        hint?: string;
+        hours?: string;
+        minutes?: string;
+        picker?: string;


Not sure this is used anywhere?

troberts-28 · 2026-02-08T19:28:55Z

src/components/DurationScroll/DurationScroll.tsx

-                        viewabilityConfigCallbackPairs={
-                            viewabilityConfigCallbackPairs
+                        accessibilityRole={
+                            isScreenReaderEnabled ? "adjustable" : undefined


I'm not sure we all need all of these ternaries? I think a lot of these are harmless even if there's no screen reader so would be cleaner to just set them. Not certain but looks as though the only two that actually matter are: importantForAccessibility="no-hide-descendants" and accessibilityElementsHidden

troberts-28 · 2026-02-08T19:35:42Z

src/components/TimerPicker/TimerPicker.tsx


+        // Format functions for accessibility announcements
+        const formatDayValue = (value: number) =>
+            padDaysWithZero ? padNumber(value) : String(value);


These should probably include a label right (e.g. 5 days)? Otherwise the announcement would just say the number, which doesn't make it clear which picker the value refers to. I'm also not sure that we need to pad the value with a zero here; that's a visual concern and not really of any use to someone using a screen reader

troberts-28 · 2026-02-08T19:39:09Z

src/components/TimerPicker/TimerPicker.tsx

+        const formatDayValue = (value: number) =>
+            padDaysWithZero ? padNumber(value) : String(value);
+
+        const formatHourValue = (value: number) => {


These format fns are all pure functions so should be moved out of the component (otherwise these will be recreated on every render, breaking the memoization of DurationScroll. I think we could probably combine them into a single formatAccessibilityValue utility fn

troberts-28 · 2026-02-08T19:40:02Z

src/components/DurationScroll/DurationScroll.tsx

+                            onMomentumScrollEnd={onMomentumScrollEnd}
+                            onScroll={onScroll}
+                            renderItem={renderItem}
+                            scrollEnabled={!isDisabled}


Think we probably need: accessibilityState={{ disabled: isDisabled }}

troberts-28 · 2026-02-08T19:44:00Z

README.md

+
+**Internationalization:**
+
+You can customize the accessibility labels for internationalization:


Accessibility labels aren't for internationalization though?

troberts-28 · 2026-02-08T19:49:44Z

src/components/DurationScroll/DurationScroll.tsx

-                        ref={flatListRef}
-                        contentContainerStyle={
-                            styles.durationScrollFlatListContentContainer
+                    <View


Adding this extra View is potentially problematic. It could well interfere with people's layout — it has no style prop, so it'll use default flex behaviour and users can't target it with styling. There's already a wrapper View in this component in the return, I think we can just move these accessibility props there.

troberts-28 and others added 5 commits November 9, 2025 12:34

Merge pull request troberts-28#65 from troberts-28/patch/v2.3.1

cd4edca

⚙️ upgrade yarn to v4.11.0 (for compatibility with OIDC)

Merge pull request troberts-28#66 from troberts-28/release/v2.3.1

c16aee6

Release/v2.3.1

Merge pull request troberts-28#68 from troberts-28/release/v2.4.0

b7b5102

Release/v2.4.0

♿added accessibility support

c50cf0c

Merge branch 'develop' into feature/accessibility

8255c10

troberts-28 requested changes Feb 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

♿ Add VoiceOver and TalkBack Accessibility Support #72

♿ Add VoiceOver and TalkBack Accessibility Support #72

Uh oh!

JasperVercammen commented Jan 22, 2026

Uh oh!

troberts-28 commented Jan 24, 2026

Uh oh!

troberts-28 left a comment

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

troberts-28 Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		Internationalization:

		You can customize the accessibility labels for internationalization:

♿ Add VoiceOver and TalkBack Accessibility Support #72

Are you sure you want to change the base?

♿ Add VoiceOver and TalkBack Accessibility Support #72

Uh oh!

Conversation

JasperVercammen commented Jan 22, 2026

♿ Add VoiceOver and TalkBack Accessibility Support

Summary

What's Changed

New Files

Modified Files

Features

New Props

TimerPicker / TimerPickerModal

Technical Implementation

Breaking Changes

Testing

Manual Testing Required:

Automated Tests:

Documentation

Uh oh!

troberts-28 commented Jan 24, 2026

Uh oh!

troberts-28 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`TimerPicker` / `TimerPickerModal`