feat: add accessibilityLabel support to UI components

[hyochan]

Summary

• Add accessibilityLabel prop to all interactive UI components
• Components use text/label as default, customizable via props
• Add accessibilityRole and accessibilityState for better screen reader support

Components

Button, IconButton, Checkbox, SwitchToggle, EditText, RadioButton, SegmentedControl

Test

Added accessibility tests for all modified components

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced accessibility support across UI components including buttons, checkboxes, input fields, radio buttons, segmented controls, and switches with proper semantic roles and labels for assistive technologies.

• Tests

  • Added comprehensive accessibility test coverage for all updated components to verify correct accessibility attributes and states.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds comprehensive accessibility support across multiple UI components. Each component now accepts an optional accessibilityLabel prop and exposes appropriate accessibility role and state attributes to assistive technologies via React Native's accessibility API.

Changes

Cohort / File(s)	Summary
Button Component src/components/uis/Button/Button.tsx, src/components/uis/Button/Button.test.tsx	Added accessibilityLabel prop with fallback to text string. Set accessibilityRole="button" on TouchableHighlight. Tests verify role, default label, and custom label override.
Checkbox Component src/components/uis/Checkbox/Checkbox.tsx, src/components/uis/Checkbox/Checkbox.test.tsx	Added accessibilityLabel prop with fallback to text string. Set accessibilityRole="checkbox" and accessibilityState with checked and disabled flags. Tests cover role, label behavior, and state combinations.
EditText Component src/components/uis/EditText/EditText.tsx	Added accessibilityLabel prop with fallback to label or placeholder. Passed to underlying TextInput.
IconButton Component src/components/uis/IconButton/IconButton.tsx, src/components/uis/IconButton/IconButton.test.tsx	Added accessibilityLabel prop with fallback to icon name. Set accessibilityRole="button" on TouchableHighlight. Tests verify role and label defaults.
RadioButton Component src/components/uis/RadioGroup/RadioButton.tsx, src/components/uis/RadioGroup/RadioGroup.test.tsx	Added accessibilityLabel prop with fallback to label. Set accessibilityRole="radio" and accessibilityState with selected and disabled flags. Tests validate role, label, and state across selected/disabled combinations.
SegmentedControl Component src/components/uis/SegmentedControl/SegmentedControl.tsx	Added accessibilityLabel, accessibilityRole="button", and accessibilityState props to segment TouchableOpacity elements.
SwitchToggle Component src/components/uis/SwitchToggle/SwitchToggle.tsx, src/components/uis/SwitchToggle/SwitchToggle.test.tsx	Added accessibilityLabel prop and accessibilityState with checked flag reflecting isOn. Tests verify role, label application, and state reflection.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• feat: segmented control #10 — Introduced the SegmentedControl component; this PR adds accessibility attributes to its segment elements.

Suggested labels

🎯 feature

Poem

🐰 A button walks without a label,
Now accessibility's its stable!
Roles and states for all to hear—
Screen readers rejoice, the path is clear! 🎯

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately describes the main objective of the pull request: adding accessibilityLabel support to UI components. It is concise, specific, and directly reflects the primary change across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Visit the preview URL for this PR (updated for commit d5e898c):

https://cpk-ui--pr11-feat-accessibility-l-3a57hpq8.web.app

_{(expires Sun, 25 Jan 2026 09:05:23 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 05244aa8e2a82af676f8a528c78a4bcd59756f99}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/uis/IconButton/IconButton.tsx (1)

212-222: Default accessibilityLabel is missing when icon is omitted.
If icon is undefined, the component renders the fallback icon but the label becomes undefined. Consider aligning the label with the rendered icon unless a custom iconElement is supplied.

🛠️ Proposed fix

-  const IconView = useMemo(() => 
-    iconElement || (
-      <Icon
-        color={buttonStylesConfig.iconColor}
-        name={icon || 'QuestBoxFill'}
-        size={iconSize}
-        style={compositeStyles?.icon}
-      />
-    ),
-    [iconElement, buttonStylesConfig.iconColor, icon, iconSize, compositeStyles?.icon]
-  );
+  const resolvedIconName = icon ?? 'QuestBoxFill';
+  const IconView = useMemo(() => 
+    iconElement || (
+      <Icon
+        color={buttonStylesConfig.iconColor}
+        name={resolvedIconName}
+        size={iconSize}
+        style={compositeStyles?.icon}
+      />
+    ),
+    [iconElement, buttonStylesConfig.iconColor, resolvedIconName, iconSize, compositeStyles?.icon]
+  );
...
-        accessibilityLabel={accessibilityLabel ?? icon}
+        accessibilityLabel={
+          accessibilityLabel ?? (iconElement ? undefined : resolvedIconName)
+        }

Also applies to: 249-252

🧹 Nitpick comments (1)

src/components/uis/SegmentedControl/SegmentedControl.tsx (1)

169-175: Include disabled in accessibilityState when SegmentedControl is disabled.

Line 174 only reports selected. Screen readers often rely on accessibilityState.disabled rather than the disabled prop alone. Consider adding disabled to the state.

♻️ Proposed tweak

-            accessibilityState={{selected: isSelected}}
+            accessibilityState={{selected: isSelected, disabled}}