Accessibility fixes - TDD - String calculator functionality

[rkganeshan]

Accessibility Improvements for String Calculator

What did you do?

This PR implements comprehensive accessibility improvements following WCAG guidelines and best practices, using strict Test-Driven Development (TDD).

Accessibility Enhancements:

• Added descriptive alt text to the calculator image
• Fixed color contrast issues (changed text color from #aaa to #333 for WCAG AA compliance)
• Implemented proper heading hierarchy (h1 for main heading)
• Replaced div with semantic <button> element for the Calculate button
• Added proper form labels with <label> element associated via htmlFor/id
• Removed inappropriate ARIA alert from static instructional content
• Added ARIA live regions for dynamic result/error announcements
• Wrapped primary content in semantic <main> landmark element
• Added proper <form> structure with onSubmit handler
• Ensured keyboard navigation support (Enter key submission, Tab navigation)
• Maintained visible focus indicators for interactive elements

Functionality Implementation:

• Implemented string calculator logic in stringCalculator.ts
• Added support for comma and newline delimiters
• Implemented custom delimiter support (e.g., //;\n1;2)
• Added validation for negative numbers (throws error)
• Added validation for invalid inputs (throws error instead of silently skipping)
• Created comprehensive unit tests for string calculator
• Integrated calculator with React component
• Added proper error handling and display in UI

Testing:

• Created 18 comprehensive accessibility tests using React Testing Library
• All accessibility tests passing (18/18)
• Created unit tests for string calculator functionality
• Verified keyboard navigation and screen reader compatibility

Why did you do it?

These changes were necessary to make the application accessible to all users, including those using assistive technologies.

Accessibility Issues Addressed:

1. Image Accessibility - The calculator image was missing descriptive alt text, making it inaccessible to screen reader users
2. Color Contrast - Text color (#aaa) failed WCAG AA contrast requirements, making it difficult for users with visual impairments
3. Heading Hierarchy - Improper heading structure confuses screen reader navigation and document outline
4. Semantic HTML - Using <div> instead of <button> breaks keyboard navigation and screen reader functionality
5. Form Labels - Missing label associations made the textarea inaccessible to screen reader users
6. ARIA Misuse - role='alert' on static content causes unnecessary screen reader announcements
7. Missing Landmarks - Lack of <main> element makes it harder for screen reader users to navigate to primary content
8. Form Structure - Input and button were not wrapped in a <form>, preventing native form behavior
9. Dynamic Announcements - Results needed ARIA live regions so screen readers announce calculation outcomes

Functionality Implementation:

• Calculator Logic - Implemented the core string calculator functionality with proper validation
• Error Handling - Invalid inputs now throw clear errors instead of being silently ignored, providing better user feedback
• TDD Approach - All features were developed test-first, ensuring reliability and maintainability

Screenshots

Happy case

Error case

Tests