Add accessibility support with content descriptions and semantic labels

[Copilot]

Implements TalkBack screen reader support and accessibility compliance across all UI components.

Changes

Content Descriptions

• Dynamic state announcements: Battery and storage icons announce current values

  Icon(
      painter = painterResource(id = R.drawable.battery_5_bar_24dp),
      contentDescription = "Battery level at ${state.batteryPercentage} percent",
  )

• Context-aware actions: Delete buttons specify alert type ("Delete battery alert" vs "Delete storage alert")
• Navigation clarity: All IconButtons have explicit descriptions ("Navigate back", "Configure Email", "Filter logs")
• Decorative icons: Icons in labeled buttons set to null to avoid redundant announcements

Semantic Grouping

• Complex cards use semantics(mergeDescendants = true) to merge related information

  Card(
      modifier = Modifier.semantics(mergeDescendants = true) {
          contentDescription = 
              "Device status: Battery at ${batteryPercentage} percent, " +
              "Storage ${availableStorage} of ${totalStorage} gigabytes available"
      }
  )

Testing Documentation

• Created ACCESSIBILITY_TESTING_CHECKLIST.md covering:
  • TalkBack navigation validation
  • WCAG AA contrast verification (4.5:1)
  • Font scaling at 100%, 150%, 200%
  • Touch target validation (48dp minimum)
  • Accessibility Scanner integration

Files Modified

• AlertsListScreen.kt, NotificationMediumListScreen.kt, AddNewRemoteAlert.kt, AlertCheckLogViewerScreen.kt
• Supporting components: LastCheckStatusCardUi.kt, EmptyNotificationsStateUi.kt, WorkerCheckIntervalConfigUi.kt

Material3 typography automatically handles dynamic text sizing. All interactive elements now provide meaningful context to assistive technologies.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improve accessibility with content descriptions and TalkBack support</issue_title>
<issue_description>## Problem
The app needs better accessibility support for users with visual impairments:

• Missing content descriptions for icons and buttons
• Need to test with TalkBack screen reader
• Should support larger text sizes

Proposed Solution

Implement comprehensive accessibility improvements across all UI components.

Implementation Details

1. Content Descriptions for All UI Elements

Ensure all clickable elements, icons, and images have meaningful content descriptions:

Icon(
    painter = painterResource(id = R.drawable.battery_3_bar_24dp),
    contentDescription = "Battery level at ${batteryPercentage} percent",
    modifier = Modifier.semantics {
        role = Role.Image
        contentDescription = "Current battery level"
    }
)

IconButton(
    onClick = onDelete,
    modifier = Modifier.semantics {
        contentDescription = "Delete ${alertType} alert"
    }
) {
    Icon(
        imageVector = Icons.Default.Delete,
        contentDescription = null // Parent has description
    )
}

2. Test with TalkBack

• Enable TalkBack on test device
• Navigate through all screens
• Ensure logical reading order
• Verify all interactive elements are accessible

3. Support Dynamic Text Sizing

Text(
    text = "Alert Title",
    style = MaterialTheme.typography.titleMedium,
    // Automatically scales with system font size settings
)

4. Add Semantic Labels

Column(
    modifier = Modifier.semantics(mergeDescendants = true) {
        contentDescription = "Battery alert: Current level 50%, Threshold 20%"
    }
) {
    // Complex UI with multiple elements
}

Files to Update

• ui/alertlist/AlertsListScreen.kt - Add content descriptions
• ui/alertmediumlist/NotificationMediumListScreen.kt - Accessibility labels
• ui/addalert/AddNewRemoteAlert.kt - Form accessibility
• ui/alertchecklog/AlertCheckLogViewerScreen.kt - Log list accessibility
• ui/components/*.kt - Reusable component accessibility

Acceptance Criteria

• All interactive UI elements have content descriptions
• App is fully navigable using TalkBack
• Text scales properly with system font size settings
• Contrast ratios meet WCAG AA standards (4.5:1 for normal text)
• Focus order is logical and intuitive
• Custom touch targets are at least 48dp × 48dp
• Create accessibility testing checklist document

Testing Checklist

• Enable TalkBack and navigate entire app
• Test with 200% font size
• Test with high contrast mode
• Use Accessibility Scanner tool
• Test voice input for text fields

Resources

• Android Accessibility Guide
• Compose Accessibility Documentation
• Material Design Accessibility
• Accessibility Scanner

Priority

Medium - Important for inclusive design

Effort Estimate

Low-Medium - 1-2 days for implementation and testing

Related to

Part of Technical Improvements from IMPROVEMENTS.md (#18)</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Improve accessibility with content descriptions and TalkBack support #379

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

This pull request implements comprehensive accessibility support across the Android Remote Notify app, making it fully compatible with TalkBack screen readers and assistive technologies. The changes follow Android accessibility best practices by adding meaningful content descriptions to all UI elements, implementing semantic grouping for complex components, and providing detailed testing documentation.

Key Changes:

• Added dynamic content descriptions for status icons (battery, storage) that announce current values
• Implemented context-aware action descriptions (e.g., "Delete battery alert" vs "Delete storage alert")
• Applied semantic grouping with mergeDescendants = true for complex cards to provide cohesive screen reader announcements
• Created comprehensive accessibility testing checklist covering TalkBack, WCAG compliance, and font scaling

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
AlertsListScreen.kt	Added dynamic battery/storage content descriptions, semantic merging for device status card, and context-aware delete button descriptions
NotificationMediumListScreen.kt	Enhanced navigation and configuration button descriptions with medium-specific context
AddNewRemoteAlert.kt	Added alert type content descriptions and appropriate null descriptions for decorative icons
AlertCheckLogViewerScreen.kt	Improved filter button descriptions with active state awareness and navigation consistency
LastCheckStatusCardUi.kt	Added content descriptions for status icons (pending check, alert type, worker schedule)
EmptyNotificationsStateUi.kt	Added content description for empty state icon
NoNotifierConfiguredCardUi.kt	Set icon to null description with explanatory comment (decorative within labeled button)
WorkerCheckIntervalConfigUi.kt	Added content description for refresh icon
ACCESSIBILITY_TESTING_CHECKLIST.md	Comprehensive testing guide covering TalkBack navigation, WCAG compliance, font scaling, touch targets, and contrast ratios

[github-actions]

Code Coverage Report

View Coverage Report

[github-actions]

📊 APK Size Analysis

Comparing main → copilot/improve-accessibility-support (this PR)

⚠️ Diffuse analysis failed. Check the workflow logs for details.

---

Generated by Diffuse via diffuse-action

[hossain-khan]

Beautiful! 👍🏽

Will remove the checklist later.

[hossain-khan]

Accessibility Testing Checklist

This document provides a comprehensive checklist for testing the accessibility features of the Android Remote Notify app.

Prerequisites

Before starting accessibility testing, ensure you have:

• A physical Android device or emulator running Android 11 (API 30) or higher
• TalkBack screen reader enabled on the device
• Accessibility Scanner app installed (optional but recommended)
• Font size set to various levels (100%, 150%, 200%) for testing

TalkBack Navigation Testing

Main Screens

Alerts List Screen

• Navigate to Alerts List Screen using TalkBack
• Verify "About App" button is announced correctly
• Verify "Settings" button is announced correctly
• Verify "Add Alert" floating action button is announced clearly
• Verify battery level card announces "Battery level at X percent"
• Verify storage card announces "Storage available X of Y gigabytes"
• Verify device status card is properly merged and readable
• Test navigation through empty alerts state
• Test navigation through configured alerts list
• Verify each alert item is selectable and announces alert type
• Verify delete button announces correct alert type being deleted
• Test "Learn More" button in empty state

Notification Medium List Screen

• Navigate to screen and verify title is read
• Verify back button announces "Navigate back"
• Navigate through each notification medium card
• Verify each medium's icon and name is properly announced
• Verify configuration status (Configured/Not Configured) is read
• Test edit/configure button announces medium name
• Test reset button announces medium name when visible
• Navigate to check frequency slider
• Verify slider value changes are announced
• Test feedback section is accessible

Add/Edit Alert Screen

• Navigate to "Add New Alert" screen
• Verify back button is announced
• Navigate through alert type selector buttons
• Verify battery and storage icons are identified
• Navigate to threshold slider
• Verify slider changes are announced with values
• Test preview card is readable with merged content
• Verify save/update button is clearly announced
• Test battery optimization card if shown

Alert Check Log Viewer Screen

• Navigate to logs screen
• Verify back button announces correctly
• Test filter button with and without active filters
• Verify badge announces filter status
• Navigate through log items
• Test expandable log details
• Verify date and time information is read correctly
• Test clear filters button

Content Descriptions Audit

Icons with Content Descriptions

• Battery icon: "Battery level at X percent"
• Storage icon: "Storage available X of Y gigabytes"
• Battery alert icon: "Battery alert icon"
• Storage alert icon: "Storage alert icon"
• Delete button: "Delete battery/storage alert"
• Pending check icon: "Pending check"
• Schedule icon: "Worker schedule"
• No alerts icon: "No alerts configured"
• Notification medium icons: "[Medium name] notification medium"
• Settings icon: "Configure [medium name]"
• Reset icon: "Reset [medium name] configuration"
• Refresh icon: "Check frequency configuration"
• Filter icon: "Filter logs" or "Filter logs (filters active)"
• More options icon: "More options"

Buttons and Interactive Elements

• All IconButtons have meaningful content descriptions
• All navigation buttons announce "Navigate back"
• All action buttons clearly state their purpose
• Segmented buttons rely on text labels (icons set to null)
• Menu items with icons set icon descriptions to null (text provides context)

Semantic Labels Testing

Complex UI Components

• Device status card merges battery and storage info into single announcement
• Alert item cards have appropriate semantic structure
• Notification medium cards group related information
• Log items merge multiple data points appropriately

Font Size Scaling

Test with Different Font Sizes

• 100% (default) - All text is readable
• 150% - Text scales properly without clipping
• 200% - UI remains functional and readable
• No text truncation occurs at any scale
• All interactive elements remain accessible

Screens to Test at Each Size

• Alerts List Screen
• Notification Medium List Screen
• Add/Edit Alert Screen
• Alert Check Log Viewer Screen
• Configuration screens for each medium

Touch Target Sizes

Minimum Touch Target Verification (48dp × 48dp)

• All IconButtons meet minimum size
• Floating Action Button is appropriately sized
• List item touch targets are sufficient
• Slider thumb is large enough to manipulate
• Filter chips are appropriately sized
• All buttons meet minimum touch target

Contrast Ratios (WCAG AA)

Visual Verification

• Primary text has 4.5:1 contrast ratio
• Secondary text has 4.5:1 contrast ratio
• Error text (low battery indicator) is distinguishable
• Icon colors meet contrast requirements
• Button text is readable in both light and dark modes
• Disabled state has appropriate visual feedback

Test Both Themes

• Light theme passes all contrast checks
• Dark theme passes all contrast checks

Focus Order

Navigation Flow Testing

• Logical reading order on Alerts List Screen (top to bottom)
• Settings and configuration screens follow natural flow
• Form fields in Add Alert screen follow logical order
• Filter options are in sensible order
• No focus traps or inaccessible areas
• Tab navigation (if using keyboard) follows visual order

Accessibility Scanner Results

Run Accessibility Scanner on Each Screen

• Alerts List Screen - No critical issues
• Notification Medium List Screen - No critical issues
• Add/Edit Alert Screen - No critical issues
• Alert Check Log Viewer Screen - No critical issues
• Configuration screens - No critical issues

Address Scanner Recommendations

• Review and address any content description suggestions
• Review and address any touch target size warnings
• Review and address any contrast ratio warnings
• Review and address any text sizing suggestions

High Contrast Mode

Test with System High Contrast Enabled

• All UI elements remain visible
• Text is clearly readable
• Icons are distinguishable
• Interactive elements are identifiable
• No information is lost in high contrast mode

Voice Input Testing

Test Voice Input for Text Fields

• Configuration screens accept voice input for URLs/emails
• Voice input works for all text fields
• Voice commands can activate buttons (if supported)

State Announcements

Dynamic Content Updates

• Slider value changes are announced
• Filter application announces results
• Success/error states are announced
• Loading states are communicated
• Empty states provide clear guidance

Edge Cases

Special Scenarios

• App behaves correctly with TalkBack during first launch
• Education/tutorial sheets are accessible
• Bottom sheets can be dismissed accessibly
• Dialogs announce their purpose
• Snackbars are read by TalkBack
• Long-press actions have alternatives

Material Design Guidelines Compliance

Material 3 Accessibility Features

• Uses Material3 components with built-in accessibility
• Typography scales properly with system settings
• Touch ripples provide visual feedback
• State layers indicate interactive elements
• Elevation and shadows don't impact readability

Testing Notes

Device/Emulator Used

• Device Model: _________________
• Android Version: ______________
• TalkBack Version: _____________
• Date Tested: _________________

Issues Found

Screen	Issue	Severity	Status

Recommendations

Add any suggestions for future accessibility improvements here

---

Resources

• Android Accessibility Guide
• Compose Accessibility Documentation
• Material Design Accessibility
• WCAG 2.1 Guidelines
• Accessibility Scanner App

Completion Status

• All tests completed
• All critical issues resolved
• Documentation updated
• Team notified of results