feat: implement large text and high contrast toggles

[rajanarahul93]

feat(accessibility): implement large text and high contrast toggles

Description

This pull request introduces two accessibility features as requested in issue #20: "Large Text" and "High Contrast" modes. Toggles have been added to the UI, allowing users to dynamically adjust the application's appearance for better readability and visibility.

Fixes #20

Type of change

• Bug fix
• New feature
• Documentation update
• Other (please describe):

Checklist

• I have followed the guidelines in CONTRIBUTING.md
• My code follows the project's coding standards
• I have commented my code, especially in hard-to-understand areas
• I have updated the documentation where necessary
• My changes generate no new warnings or errors

Additional Information

Root Cause

The application previously lacked accessibility options. There was no mechanism to increase font sizes or switch to a high-contrast color scheme, making it difficult for some users to interact with the content.

Changes Made

• src/App.js:
  • Added a useState hook to manage the state for largeText and highContrast.
  • Implemented two toggle buttons and their handler functions.
  • Dynamically applied CSS classes (.large-text, .high-contrast) to the main app container based on the state.
• src/App.css:
  • Added CSS rules for .large-text to increase the base font size by 20%.
  • Added CSS rules for .high-contrast to switch to a black background, white/yellow text, and add distinct borders to interactive elements.

Screenshots

Before:

After (Large Text):

After (High Contrast):

Testing Steps

1. Cloned the repository and created a new branch.
2. Applied the patch.
3. Ran npm install to install dependencies.
4. Ran npm start to launch the application locally.
5. Clicked "Toggle Large Text" and observed font sizes increased.
6. Clicked "Toggle High Contrast" and observed the color scheme changed.

• Expected: The UI updates correctly when toggles are clicked.
• Actual: The UI behaved as expected.

Risk & Rollback

• Risk: Minimal. The changes are self-contained within the App component and its CSS. No existing logic was modified.
• Rollback: This PR can be reverted safely using the "Revert" button in the GitHub UI.

[amk211001]

@rajanarahul93 Getting conflict in PR, please resolve and raise again.

[rajanarahul93]

@amk211001 can you check once.

[amk211001]

@rajanarahul93 Again getting PR conflict, could you pull latest changes and raise the PR .

[amk211001]

@rajanarahul93 Only your PR left with conflict, could you please resolve the conflict and raise it again?