React Native Assignment– 9

Accessibility & Internationalization

Basic Questions

  1. Mark a tappable View as accessible by adding accessible and accessibilityRole=”button”; verify it’s focusable with a screen reader.
  2. Add accessibilityLabel=”Submit order” to a Pressable and confirm VoiceOver/TalkBack reads the label instead of raw text.
  3. Provide accessibilityHint=”Sends your order for processing” to the same control and validate the hint is announced.
  4. Tag a decorative image with accessibilityIgnoresInvertColors and accessible={false}; confirm it’s skipped by screen readers.
  5. Add accessibilityRole=”image” and a descriptive accessibilityLabel to a product image that conveys meaning.
  6. Enhance a TextInput with accessibilityLabel=”Email address” and accessibilityHint=”Required”; verify announcement.
  7. Group related elements (icon + text) into one accessible element (accessible wrapper) so they read as a single control.
  8. Set importantForAccessibility=”no-hide-descendants” on a hidden modal backdrop to remove it from the accessibility tree.
  9. Create a header Text with accessibilityRole=”header”; ensure rotor/quick nav jumps to it.
  10. Build a small form (name, email, submit) and ensure each field has clear labels and hints.

Intermediate Questions

  1. Enable VoiceOver (iOS) and record a short video demonstrating correct reading order on your form screen.
  2. Enable TalkBack (Android) and fix any incorrect focus order using importantForAccessibility on specific elements.
  3. Add accessibilityState={{ disabled: true }} to a disabled button and confirm readers announce “dimmed/disabled”.
  4. Implement accessibilityLiveRegion=”polite” for a cart total Text that updates after adding an item; verify the update is announced.
  5. Programmatically set screen reader focus to an error Text using AccessibilityInfo.setAccessibilityFocus(ref) after a failed submit.
  6. Provide auditory feedback: play a short sound (e.g., via Expo AV or Sound module) when a critical action completes; ensure it doesn’t block announcements.
  7. Build a custom AccessibleButton component that always applies accessibilityRole, Label, Hint, and State from props.
  8. Create a carousel and ensure only the active slide is accessible, others use no-hide-descendants.
  9. For a list item with dynamic badge counts, expose accessibilityLabel like “Messages, 5 new”; update via accessibilityLiveRegion on change.
  10. Add accessibilityActions (e.g., “activate”, “longpress”) to a card and handle them in onAccessibilityAction.
  11. Install and configure i18next (or react-native-i18n) with react-native-localize; create locales/en.json and locales/fr.json.
  12. Detect device locale and load translations; show a translatable “Hello, {{name}}” string with interpolation.
  13. Implement fallback language: if de is requested and missing, fall back to en.
  14. Move all user-facing strings from one screen into translation keys and replace hard-coded text.
  15. Format a date and a currency value using Intl.DateTimeFormat and Intl.NumberFormat; render both per locale.
  16. Add a language switcher (EN/FR) and hot-swap translations at runtime without app reload.
  17. Use pluralization in i18n (e.g., “1 item” vs “{{count}} items”) and verify correct forms.
  18. Add direction-aware styles: if RTL, swap paddings/margins for a list item row.
  19. Integrate I18nManager.forceRTL(true) in a dev-only toggle and remount the app to test mirrored layout.
  20. Ensure icons/chevrons flip correctly in RTL using transform: [{ scaleX: isRTL ? -1 : 1 }].

Advanced Questions

  1. Build an error summary banner that appears after form submit, receives keyboard focus, and lists field errors with anchors; use AccessibilityInfo.announceForAccessibility to announce “Form errors found”.
  2. Create a live region (“Downloading… 30%”) with throttled announcements so screen readers aren’t spammed; switch to “Download complete” at 100%.
  3. Implement custom navigation order on a complex screen: set importantForAccessibility and accessibilityElementsHidden to ensure logical traversal.
  4. Build an accessible modal: trap focus inside, hide background from accessibility tree, add proper roles/labels, and restore focus to the triggering control on close.
  5. Create a reusable withA11y HOC or hook (useA11yControl) that standardizes roles, labels, hints, and state across buttons/inputs; apply it to three components.
  6. Add locale-specific formatting for a checkout screen (dates, times, numbers, currencies) and verify with EN/FR/AR; ensure AR uses RTL and mirrored UI.
  7. Implement dynamic content with nested translations (e.g., “Pay {{amount}} by {{date}}”) and ensure Intl respects locale numerals (e.g., Arabic digits).
  8. Localize accessibility labels and hints too (not just visible text); confirm screen readers speak the localized strings.
  9. Build a feature-flagged RTL demo: toggle RTL at runtime, re-calc layout metrics, flip icons, and maintain scroll positions without jank.
  10. Final Hands-on Project:
    • Convert a multi-screen mini-app to be fully accessible (labels, hints, roles, states, focus management, live regions)
    • Support EN/FR + one RTL locale (e.g., AR) with live language switching and correct formatting for dates/currency
    • Ensure proper screen reader order on iOS/Android, accessible modal, and accessible lists with dynamic badges
    • Provide a test checklist (VoiceOver/TalkBack steps) and record short demos proving conformance (focus order, announcements, RTL mirroring).