🎨 Palette: [Accessibility] Improve focus states and ARIA labels for icon-only buttons

[MacTechIN]

💡 What:

• Added accessible focus rings using Tailwind focus-visible classes to icon-only buttons (ImageUploader clear button and mobile menu button in page.tsx).
• Specifically added focus-visible:ring-offset-2 to the clear image button to prevent the focus ring from being clipped by its overflow-hidden container.
• Added missing aria-label to the clear image button and aria-expanded to the mobile menu button.
• Added aria-hidden="true" to the internal lucide-react icons.

🎯 Why:
Keyboard users rely on visible focus indicators to navigate the application. Icon-only buttons without aria-labels are not announced properly by screen readers. The focus ring on the clear image button was previously getting clipped and invisible during keyboard navigation.

♿ Accessibility:

• Enhanced screen reader support with explicit ARIA attributes.
• Improved visual keyboard focus indication that complies with WCAG standards for focus visible.
• Logged a critical learning about absolute positioned button focus rings in .Jules/palette.md.

---

PR created automatically by Jules for task 5565698848533875840 started by @MacTechIN

---

Note

Low Risk
Presentation and ARIA-only tweaks on two buttons; no logic, auth, or data paths change.

Overview
Improves keyboard and screen-reader support for two icon-only controls without changing behavior.

The mobile header menu toggle gets focus-visible ring styling, aria-expanded tied to menu state, and aria-hidden on the Menu/X icons so assistive tech reads the button label only. The clear image overlay in ImageUploader adds a visible focus ring (including ring-offset-2 so the ring isn’t clipped by the parent overflow-hidden preview), an aria-label for remove, and aria-hidden on the X icon.

A short note in .Jules/palette.md records the overlay-button focus-ring pattern for future work.

^{Reviewed by Cursor Bugbot for commit a34453a. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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.

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a34453a. Configure here.}

[cursor]

Misleading aria-expanded on menu

Medium Severity

The header button now sets aria-expanded from isMobileMenuOpen, but that state only changes the icon—it does not expand or collapse any associated menu or panel. Screen readers can announce “expanded” while the page layout stays the same.

 

^{Reviewed by Cursor Bugbot for commit a34453a. Configure here.}

[gemini-code-assist]

Code Review

This pull request improves accessibility across the application by adding focus-visible rings, aria-expanded, aria-label, and aria-hidden attributes to the mobile menu and image clear buttons, alongside documenting these learnings in .Jules/palette.md. Feedback points out that while the mobile menu button toggles the isMobileMenuOpen state, this state is never used to render the actual mobile menu. This leaves mobile users unable to access the language selector or the GitHub repository link. A code suggestion is provided to implement the missing mobile menu dropdown.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The mobile menu button toggles the isMobileMenuOpen state, but this state is never used elsewhere in the application to render or display a mobile menu, drawer, or dropdown.

This leads to two issues:

1. Non-functional UI: Clicking the button toggles the icon and aria-expanded state, but no menu actually opens.
2. Inaccessible Features on Mobile: Since the language selector and GitHub repository link are hidden on mobile screens (hidden lg:flex), mobile users currently have no way to change the language or access the repository.

Suggestion

Implement a mobile menu dropdown inside the header that displays when isMobileMenuOpen is true, allowing mobile users to access the language selector and GitHub link.

          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="lg:hidden ml-2 p-2 hover:bg-blue-600 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none rounded-lg transition-colors"
            aria-label="Menu"
            aria-expanded={isMobileMenuOpen}
          >
            {isMobileMenuOpen ? <X size={24} aria-hidden="true" /> : <Menu size={24} aria-hidden="true" />}
          </button>
        </div>

        {isMobileMenuOpen && (
          <div className="lg:hidden mt-3 pt-3 border-t border-blue-500/50 flex flex-col gap-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{t('language') || 'Language'}:</span>
              <div className="flex items-center gap-2 bg-blue-800/30 p-1 rounded-lg border border-blue-400/20">
                {LANGUAGES.map((lang) => (
                  <button
                    key={lang.code}
                    onClick={() => {
                      setLanguage(lang.code);
                      setIsMobileMenuOpen(false);
                    }}
                    className={`px-2 py-1 rounded text-xs font-bold transition-all flex items-center gap-1 ${
                      language === lang.code
                        ? 'bg-blue-500 text-white shadow-sm'
                        : 'text-blue-200 hover:text-white hover:bg-blue-700/50'
                    }`}
                    title={lang.label}
                  >
                    <span>{lang.flag}</span>
                    <span className="uppercase">{lang.code}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="text-xs text-blue-100 leading-tight border-t border-blue-500/50 pt-3">
              {t('contributionMessage')}
              <a 
                href="https://github.com/MacTechIN/OpenCVTestingBoard_Framework.git" 
                target="_blank" 
                rel="noopener noreferrer"
                className="block mt-1 text-white hover:text-yellow-200 transition-colors font-semibold underline decoration-blue-300 underline-offset-4"
              >
                GitHub Repository
              </a>
            </div>
          </div>
        )}
      </div>