Skip to content

feat(a11y): add accessibility labels to top menu and tabs#129

Open
abouhoraira2006 wants to merge 5 commits intoadelpro:developfrom
abouhoraira2006:a11y-fix
Open

feat(a11y): add accessibility labels to top menu and tabs#129
abouhoraira2006 wants to merge 5 commits intoadelpro:developfrom
abouhoraira2006:a11y-fix

Conversation

@abouhoraira2006
Copy link

Description

This PR enhances the accessibility (TalkBack support) for the main interactive UI components in TopMenu and TopTabs. Added proper accessibilityRole, accessibilityLabel, accessibilityHint, and accessibilityState to ensure visually impaired users can navigate the app smoothly.

Part of the Ramadan Al-Athar initiative (رمضان الأثر). 🌙

Related Issue

Closes #124

Testing

  • Tested locally on a physical Android device.
  • Verified TalkBack reads the components correctly in Arabic.

@coderabbitai
Copy link

coderabbitai bot commented Mar 7, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 884977f6-981d-4b2a-9bfe-82101e7a7844

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

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

Copy link
Owner

@adelpro adelpro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not change any code outside the parts related to the issue.

};

export function TopTabs({ activeTab, setActiveTab }: Props) {
export default function TopTabs({ activeTab, setActiveTab }: Props) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not change the function export

import { StyleSheet, TouchableOpacity } from 'react-native';

import { useColors } from '@/hooks';
import { useColors } from '@/hooks/useColors';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please keep the import structure as it

@adelpro
Copy link
Owner

adelpro commented Mar 7, 2026

Salam @abouhoraira2006
Please revert the changes in the code that are not related to accessibility

@abouhoraira2006
Copy link
Author

مرحباً أخي @adelpro،

لقد قمت بالتراجع عن التعديلات الجانبية في ملف TopTabs.tsx (الخاصة بالاستيراد والتصدير) كما طلبت تماماً، وأبقيت فقط التعديلات الخاصة بسهولة الوصول (Accessibility).

أعتقد أن الكود الآن جاهز للمراجعة النهائية والدمج. شكراً لوقتك! 🌙

Copy link
Owner

@adelpro adelpro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please chech these minor issues

@adelpro
Copy link
Owner

adelpro commented Mar 8, 2026

مرحباً أخي @adelpro،

لقد قمت بالتراجع عن التعديلات الجانبية في ملف TopTabs.tsx (الخاصة بالاستيراد والتصدير) كما طلبت تماماً، وأبقيت فقط التعديلات الخاصة بسهولة الوصول (Accessibility).

أعتقد أن الكود الآن جاهز للمراجعة النهائية والدمج. شكراً لوقتك! 🌙

Salam @abouhoraira2006,
After testing your code, I found multiple linting issues. Please fix them.

@abouhoraira2006
Copy link
Author

هلا @adelpro،

خلاص ظبطت كل مشاكل التنسيق (Linting) ورجعت الاستيرادات في ملف TopMenu زي ما كانت بالضبط.
الكود كذا صار نظيف وجاهز، خذ نضره عليه وإذا كله تمام او لا

يعطيك العافية , تقبل الله صيامك

Copy link
Owner

@adelpro adelpro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove all the import changes

@abouhoraira2006
Copy link
Author

Hey @adelpro, I've reverted all the import changes as requested. Does everything look good to go now?

@adelpro
Copy link
Owner

adelpro commented Mar 15, 2026

Hey @adelpro, I've reverted all the import changes as requested. Does everything look good to go now?

The import changes are still present. Could you please double-check and remove them?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants