🎨 Palette: PremiumHeader icon-only button accessibility

[mknoufi]

User description

🎨 Palette: Accessibility for PremiumHeader icon-only buttons

💡 What:
Added explicit accessibilityRole="button", accessibilityLabel, and accessibilityHint attributes to the three icon-only TouchableOpacity action buttons (Right Action, Logout, Menu) within the PremiumHeader component. Updated the PremiumHeaderProps TypeScript interface to allow configuration of accessibilityLabel and accessibilityHint for dynamic rightAction buttons.

🎯 Why:
Icon-only buttons present a major barrier to screen reader users because they provide no context on what the button does. Hardcoded actions (Logout, Menu) now announce properly (e.g., "Logout, Signs you out of your account"). Additionally, making the config-driven rightAction object accept accessibility props ensures developers can keep custom actions accessible without having to change component internals.

♿ Accessibility:

• accessibilityRole="button" added to all three action touchables.
• Added explicit labels for 'Open menu' and 'Logout'.
• Enabled custom string passing via accessibilityLabel and accessibilityHint for rightAction config objects.

---

PR created automatically by Jules for task 438385613262965898 started by @mknoufi

---

CodeAnt-AI Description

Improve screen reader support for PremiumHeader action buttons

What Changed

• Icon-only header actions now announce themselves as buttons with clear labels and hints for logout, menu, and custom actions
• Custom right-side actions can now provide their own screen reader label and hint when used in the header
• The header still behaves the same visually, but its action buttons are now understandable to assistive technology users

Impact

✅ Clearer screen reader navigation
✅ Fewer unlabeled header buttons
✅ Easier use of icon-only actions

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[codeant-ai]

CodeAnt AI is reviewing your PR.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codeant-ai]

CodeAnt AI finished reviewing your PR.